svg animation tutorial
longdesc for this image
complete code as a text file
For now we are only concerned with the basics of this image - how the shapes are rendered. This image uses three basic svg shapes, that is circle, line and eclipse.
<g id="roundrel" transform="translate(150,315)">
<circle r="150" fill="#000099" cx="0" cy="0"/>
<circle r="100" fill="#fff" cx="0" cy="0"/>
<circle r="50" fill="#cc0033" cx="0" cy="0"/>
</g>
This group (<g>) represents the largest of the RAF roundrels, a symbol also popular with mods. The transform attribute of <g> tells the svg parser where to render the three circles in <g> group - in this case at x (vertical) 150 and y (horizontal) 315. All circles radiate out from that central point.
The lines were positioned thus - the code fragment for the lower right:
<g id="upper-lines">
<line x1="220" y1="250" x2="450" y2="100" style="stroke:rgb(0,0,153);stroke-width:48;z-index:3"/>
<line x1="220" y1="250" x2="450" y2="100" style="stroke:rgb(255,255,255);stroke-width:24;z-index:3"/>
<line x1="220" y1="250" x2="450" y2="100" style="stroke:rgb(204,0,51);stroke-width:16;z-index:3"/>
</g>
The line begins at x1=220, 220 pixels into the image on the right, and y1=250, 250 pixels down the screen on that x axis. it will finish at x2=450 and y2=100. The css style attributes dictate the color and width. The three different lines in this group render in order creating layers which resemble a union flag of Britain. There are other ways of dictating the stacking of layers but here I'm just using code order. The lines are also kept simple in the respect that they're just lines, rather than polylines with 4 four points, it's the stroke-width attribute that gives them their character rather than having four different points defined, which a polyline could have.
The drop-shadow text is called via an SVG filter, thus:
<filter id="dropshadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="6" dy="6" result="offsetBlurredAlpha"/> <feMerge>
<feMergeNode in="offsetBlurredAlpha"/> <feMergeNode in="SourceGraphic"/> </feMerge>
</filter>
This calls in a filter from the <defs> section of the code and applies it to the text at position x, 180, and y 375 - that is 180 pixels on the vertical axis and 375 on the vertical axis, negative values are also possible. This will be explained properly on another page, so don't worry about it too much for now.
<text id="six" x="180" y="375" style="text-anchor:middle; font-size:185; font-weight:800; font-family:Verdana; filter:url(#dropshadow)"><tspan style="fill:rgb(0,0,0);stroke:rgb(255,255,255)">6</tspan></text>
The other type of shape used here is an <eclipse>
<ellipse style="filter:url(#turbulence);" rx="155" ry="40" cx="240" cy="55" />
The first two attributes, rx and ry define the radius of the eclipse on the x and y dimensions, the latter two values its position - 240 on the vertical and 55 pixels from the top of the svg object.
<text id="fluxus" x="240" y="75" style="text-anchor:middle; font-size:70; font-style:italic; font-weight:800; font-family:Verdana; filter:url(#dropshadow)"><tspan style="fill:rgb(0,0,0);stroke:rgb(255,255,255)">fluxus</tspan></text></body>
Again this refers to something predefined in the <defs> section of code and will be explained later so don't worry about this for now either.