A Laconic SVG Tutorial
Now that you've seen some rendered SVG, here's how it works. The simplest way to create SVG files is with an SVG editor. There are quite a few SVG editors available today; in my opinion the best is Adobe Go Live. Text in SVG is both selectable and searchable, and can be displayed in any direction—which makes SVG a good choice for displaying text in non-Romanic languages such as Chinese, Japanese, or Arabic. After you familiarize yourself with the viewer plugin features (be sure to explore the right-click menu while viewing the SVG), here's the code, so you can see how simple it is to read and relate the SVG code to the rendered version.
The quickest way to understand the code is to walk through it. I've added extensive comments to the SVG code below that describe the purpose of the various SVG-specific elements:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- defines the width and height in cm, and also the
viewing area (viewBox) in which the SVG gets
rendered-->
<svg width="24cm" height="7.2cm" viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg">
<!-- defines a rectangle of certain height and width based
on x-y coordinate system within the viewbox -->
<rect x="10" y="80" width="900" height="30" fill="orange">
<!-- animates the rectangle on y axis from
height 40 to 80 for 2s, once only -->
<animate attributeName="y" values="40;80" dur="2s"
repeatCount="1"/>
</rect>
<rect x="10" y="110" width="900" height="30" fill="yellow">
<animate attributeName="y" values="90;110" dur="2s"
repeatCount="1"/>
</rect>
<rect x="10" y="140" width="900" height="30"
fill="lightgreen">
</rect>
<rect x="10" y="170" width="900" height="30" fill="yellow">
<animate attributeName="y" values="190;170" dur="2s"
repeatCount="1"/>
</rect>
<rect x="10" y="200" width="900" height="30" fill="orange">
<animate attributeName="y" values="240;200" dur="2s"
repeatCount="1"/>
</rect>
<!-- defines the curved path seen in the SVG. M means
initially move to (100, 200) x, y position. C is a
cubic bezier command that handles the rest of the
path. -->
<defs>
<path id="MyPath"
d="M 100 200
C 300 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100" />
</defs>
<desc>SVG Example</desc>
<!-- writes the text on the curved path with indefinite
animation of color -->
<use xlink:href="#MyPath" fill="none" stroke="red" />
<text font-family="Verdana" font-size="42.5"
fill="blue" >
<textPath xlink:href="#MyPath" startOffset="20%">
<animateColor attributeName="fill"
values="blue;yellow;green;red;blue" begin="5s"
dur="10s" repeatCount="indefinite"/>
SVG
<tspan dy="30" fill="red">
<animateColor attributeName="fill"
values="red;blue;yellow;green;red" begin="5s"
dur="10s" repeatCount="indefinite"/>
Java, XML, JSP
</tspan>
<tspan dy="-30" fill="green">
<animateColor attributeName="fill"
values="green;red;blue;yellow;green" begin="5s"
dur="10s" repeatCount="indefinite"/>
DevX
</tspan>
</textPath>
</text>
</svg>
You can see from the preceding code that SVG is an XML vocabulary. You can change or animate any SVG element easily by making alterations to the base XML file. Because you can draw shapes, add overlay text, lines, and other graphic shapes easily, SVG is an excellent candidate for Web-based mapping and directions applications.
Previous Page
