Developer

Learn how to code SVG

When you create an SVG document, you need to include the actual SVG elements. Here's how to code SVG.

By Jackson West

In this next line of code, we start the actual SVG elements.

<svg width="450px" height="450px" viewBox="0 0 450 450" xmlns:xlink="http://www.w3.org/2000/xlink/namespace/" xmlns:a="http://www.adobe.com/svg10-extensions">

Like an HTML <body> tag, the <svg> tag declares to the browser client that SVG document definitions are commencing. The attributes specified in this tag include width and height, which declare the intrinsic (not necessarily displayed) size of the document, and ViewBox, which declares what portion of the document will be displayed initially. The ViewBox can be used to prezoom the display, for instance. The xlmns links provide the Adobe Viewer with information about proprietary Adobe extensions to SVG, including audio. You have to use these links only if you plan to use the extensions or want to author a document for a different viewer.

<!— rotating square —>

We've added a comment for clarity. You should format comments just as you do in HTML, and the information will never be parsed as text or instructions.

<g id="rotating_square">

We've introduced this tag for grouping, making it probably the most important tag in SVG. You will use the group tag to preserve graphic associations, name objects (using the ID attribute), cascade style changes, and create symbols to reference later.

   <defs>

The tag is used to predefine objects in a group. For instance, I want to define the square, but I don't want to display it yet.

   <g id="square_styled">
   <rect id="square" width="225" height="225"></rect>
   </g>

Here I use the standard shape <rect/> to draw the box and group it so that I can refer to it later by its name, square_styled. Other standard shapes include <circle/>, <ellipse/>,<polygon/>, and <polyline/>. The base currency of graphics in SVG is the <path/> tag, which we'll introduce later.

   </defs>

Now I close my definitions, having designated my square.

   <g id="rotation" transform="translate(225 225)">

Here I define a subgroup, named rotation, and use the transform="translate()" attribute to center the action at X=225, Y=225. (If you haven't noticed yet, SVG keeps its coordinate plotting brief to maintain relatively small file sizes, inferring the context for the values from the method that invokes them—this can be confusing at first, but, like image maps, the systems do become apparent.)

      <use xlink:href="#square" x="-113" y="-113">

Now we call on the square with the use tag. The xlink:href attribute can be used to link to another part of the file—in this case, we'll link to the square defined earlier (identified by #square; the pound sign signifies an anchor within the document). The X and Y attributes can be used to place the object relative to center (in this case, 113 pixels to the left and up from 225, which centers the transformation).

      <animateTransform attributeName="transform" type="rotate" values="0;360" dur="8s" repeatDur="indefinite"/>

While still within the use tag (it hasn't been closed by a forward-slash) we declare an animation. Declarative animations are animation functions built into the SVG specification that don't require JavaScript. You can animate transformations, colors, and even filter effects using declarative animation. Here we use an animatedTransform of type rotate with the values from 0 degrees to 360 degrees (experiment by inserting more values, separated by semicolons). The total duration of the animation is 8 seconds, and it is repeated indefinitely. Changing the duration of the animation will change its speed.

   </use>

We close our use tag.

   </g>

We close the group rotation.

</g>

We close the group rotating_square.

</svg>

Finally, we close our SVG document. This tag should be at the bottom of your SVG document. Also, it should be apparent that objects such as groups and shapes should have unique ID attributes, so that there is no confusion when referencing them.

You've created your first SVG animation. It's not spectacular, but it works and is much, much smaller than a comparable GIF animation.

Jackson West is a frequent contributor to CNET Builder.com.

Editor's Picks