Developer

The Scalable Vector Graphic (SVG) pocket reference, Part 1

Learn about Scalable Vector Graphics (SVG) the easy way with Part 1 of this interactive tutorial.

In 1722, Johann Sebastian Bach published a book called the Das wohltemperierte Klavier, which translates as The Well Tuned Keyboard. The book contained twenty-four examples that made use of a new system for tuning pianos and harpsichords, laying the foundation for Western Classical music for hundreds of years afterwards. The Well Tuned Keyboard is the inspiration for this two-part article—a reference for Scalable Vector Graphics (SVG). The reference is composed of examples that can be used as is or added to and modified, depending on your situation.


Getting started

To get started with SVG (and in order to view the examples in this article) you will need to download the SVG viewer from Adobe.

The fully functional examples shown in this article can be viewed here:

Example A

Example B

Example C

Example D


Introducing SVG

SVG is an XML-based graphic file format, which is best employed in data-driven and interactive environments. SVG images are XML documents that contain instructions on how to display their data. This is perfect for a number of applications that need to combine data and images, such as geographic or financial systems. Unlike GIF or JPEG images, SVG files can be accessed using a normal text search, so if a user is looking for a particular town on a map, or a high or low point on a stock graph, the results are searchable inside the image file.

SVG is a Web-based standard, like XML and HTML, established by the W3C. The SVG file is included in an HTML file with the embed tag and viewed in a Web browser:

<embed src="test.svg" width="80" height="80" type="image/svg+xml" />

SVG images consist of a set of basic shapes including rectangles, circles, and lines as shown in Figure A. Shapes and their attributes are defined as XML nodes.

Figure A

Basic shapes

Defining the basic shapes

Use the <rect> tag to display rectangles and squares. The rx and ry attributes for the <rect> tag define how round the corners of the rectangle are. If you want the rectangle to have no corner rounding, use rx="0", or leave out the attribute altogether.

<rect x="5" y="5" rx="5" ry="5" width="70" height="70" />

The <circle> tag's cx and cy attributes define the x and y positions of the center of the circle. The r attribute is used to define the radius of the circle.

<circle cx="40" cy="40" r="35" />

Ellipses are not perfectly round, so the radius value is not the same in the x and y directions. The rx attribute defines the horizontal radius, while ry defines the vertical radius.

<ellipse cx="40" cy="40" rx="35" ry="25" />

The <line> element displays a straight line defined by the starting (x1, y1) and ending (x2, y2) points.

<line x1="5" y1="75" x2="75" y2="5" />

A <polygon> element contains at least three sides. Each side in a polygon shape is defined by a corresponding pair of values.

<polygon points="40 5, 5 75, 75 75" />

A <polyline> element can create any shape that consists of straight lines. This element uses a similar pair value system to the polygon element.

<polyline points="5 75, 40 5, 75 75, 40 5" />

The <path> element is used to define a line composed of curved and straight segments, which are defined using the d attribute: M = move to; L = line to; C = curve to; Z = close path. The end of a path can contain another shape. This is useful for creating arrows and connectors in technical diagrams.

<path d="M5 5 C5 5 125 40 40 75 L 5 40 5 15 Z" marker-end="url(#Triangle)" />

Text is easy to display in an SVG image. Simply nest the text in a <text> element and define the text's position using the x and y attributes. Note that shapes are positioned from the top left point of the shape, while text is positioned from the bottom left point.

<text x="10" y="20" >Results</text>

Multiple rows of text are displayed with <tspan> elements nested in a text element. The <tspan> elements can have absolute or relative positions. Absolute positions are defined by x and y attributes, while dx and dy attributes define the relative positions for each new <tspan>.

<text x="10" y="20" >Results
<tspan x="20" dy="15">first</tspan>
<tspan x="20" dy="15">second</tspan>
</text>

CSS properties

Style sheet properties can be applied globally or inline, as part of the element's style attribute. For example, fill defines the color that is used to fill the rectangle, and stroke defines the properties of a shape's outline. Colors in SVG can be expressed using named or hexadecimal codes. The fill-opacity property specifies the shape's fill as a percentage of its normal opacity.

<rect style="fill:#336699; stroke:#224488; stroke-width:1; fill-opacity:0.5"/>

Transforms and filters

Having created some SVG shapes, you'll probably want to move them around or change their size. The translate(x, y) property moves the coordinate system to a new position. Note that while the visible result is the shape having moved, what actually happens is that the shape's coordinate system moves. Remembering this will reduce confusion when you are working with more complex transformations.

<g transform="translate(25,25)"> </g>

The scale() property increases (>1) or decreases (between 0 and 1) the size of the shape, and rotate() rotates the shape and the current coordinate system by the specified number of degrees.

<g transform="scale(0.25)"> <g transform="rotate(180)">
<use x="0" y="0" xlink:href="#coords" />
</g></g>

SVG has several built-in filters, which can be used to create interesting, eye-catching effects.

Figure B

CSS properties

The middle image in Figure B is an example of the use of several filters to create a drop-shadow effect.

<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blurredAlpha"/> <feOffset in="blurredAlpha" dx="2" dy="2" result="offsetBlurredAlpha"/>

The stdDeviation attribute defines the drop shadow's "fuzziness" and feOffset's dx and dy attributes determine the depth and direction of the shadow. Filters are defined in the <defs> section of the SVG file. Use filter:url(#url) to link the element to the filter.

<rect style="filter:url(#DropShadow);"/>

SVG allows for two types of gradient: the linear gradient and the radial gradient. A linear gradient is a gradual transformation from one color to another along a line, while a radial gradient transforms in a circular manner by radiating out from a central point. Gradients are defined in the <defs> section of an SVG file. Use the stroke:url(#url) property to link the element to the filter.

<path style="stroke:url(#Grad)"/>

The <stop> elements define the colors used to construct the gradient. Offset attributes determine the gradient's length and rate of change.

<stop offset="0%" style="stop-color:#ffffff"/>
<stop offset="100%" style="stop-color:#336699;"/>

Animation

The SVG specification allows for dynamic changes to the shapes and their attributes to create animation effects. To animate color as shown in Figure C, use the <animateColor> tag.

Figure C

Color animation

The <animateColor> tag can be used to animate both fill and stroke colors, simply by changing the value of attributeName. Specify the time length of the animation in seconds using the dur attribute. Stating that repeatCount="indefinite" ensures that the animation continues looping.

<animateColor id="a" attributeName="fill"         from="#efefef" to="#336699" dur="3s" repeatCount="indefinite"/>

Just about any shape's attribute can be animated using the <animate> tag.

Figure D

Movement

In Figure D, the square's x attribute is animated, which moves the square to the right over time. The from and to attributes define the extent of the movement.

<animate attributeName="x" begin="0s" dur="1s" from="5" to="40" repeatCount="indefinite"/>

Fundamentals

This article merely touches on the fundamentals of Scalable Vector Graphics, such as shapes, transformations, filters, and animation. SVG is a data and image format that has been designed from the start to be dynamic, compact and interactive. In the next article we will delve deeper into SVG's dynamic and interactive nature and explore the scripting techniques that make SVG really come to life.

Editor's Picks

Free Newsletters, In your Inbox