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.