An Introduction to Scalable Vector Graphics
by J. David Eisenberg | Pages: 1, 2

Grouping Objects

To make the series of loops below the rectangle, we use the <g> element, which lets you group graphic objects together. While you may group together any objects you wish, and may nest groups to any depth you desire, in this case we'll just group together multiple <use>s of the loop we defined earlier. Inside the <defs> element, add

<g id="multiloop">
    <use xlink:href="#loop"/>
    <use xlink:href="#loop" transform="translate(10, 0)"/>
    <use xlink:href="#loop" transform="translate(20, 0)"/>
    <use xlink:href="#loop" transform="translate(30, 0)"/>
    <use xlink:href="#loop" transform="translate(40, 0)"/>
    <use xlink:href="#loop" transform="translate(50, 0)"/>
    <use xlink:href="#loop" transform="translate(60, 0)"/>
    <use xlink:href="#loop" transform="translate(70, 0)"/>
    <use xlink:href="#loop" transform="translate(80, 0)"/>
    <use xlink:href="#loop" transform="translate(90, 0)"/>
    <use xlink:href="#loop" transform="translate(100, 0)"/>
    <use xlink:href="#loop" transform="translate(110, 0)"/>
    <use xlink:href="#loop" transform="translate(120, 0)"/>
</g>

Then, after the rectangle, replace the old <use> with one that refers to multiloop, producing the result shown below. See source code

<use xlink:href="#multiloop" transform="translate(20, 100)"/>

Rotation

To put the upside-down loops at the top of the page, we'll need to use the rotate transform, which comes in two versions.

rotate(angle)

Rotates the object by the specified angle in degrees, using the origin (0,0) as the center of rotation.

rotate(angle, cx, cy)

Rotates the object by the specified angle, using point (cx, cy) as the center of rotation

In many cases it's more convenient to use the second form of rotate, especially if an object is not already centered around the origin, as the single loop is. In the case of the multiloop, its center point is (60,0). See the entire source.

<!-- loops at bottom -->
<use xlink:href="#multiloop" transform="translate(20, 100)"/>

<!-- loops at top -->
<use xlink:href="#multiloop"
    transform="translate(20, 10) rotate(180, 60, 0)"/>

Note that the angle specified in a rotate transformation is measured in degrees, with positive numbers indicating a clockwise direction; 0 degrees is east, 90 degrees is south, etc.

Other Shapes and Paths

Adding the circular bullets to the handbill is easy; we use the <circle> element, which has these atributes: cx, the center x coordinate; cy, the center y coordinate; and r, the radius. We'll add the circle to the <defs> section. There's no scaling or color information; that leaves us free to change the color as we like.

 <circle id="bullet" cx="0" cy="0"
r="1.5"/> 

The other SVG shapes such as <rect>, <polyline>, and <polygon> are shorthand for a more generic path object. A path represents the outline of a shape which can be stroked (have its outline drawn) or filled. We could represent the star-shaped bullet as a <polygon>, but instead, we'll represent it as a path.

The <path> element's main attribute is the d attribute. The d stands for the path data. Path data consists of path command letters and coordinate information. Some of the more important path command letters are listed in the following table.

Letter	Meaning
M	move to the following x,y coordinate
L	Draw a line to the following x,y coordinate
A	Draw an elliptical arc using the information that describes the x and y radius, x-axis rotation, direction and size of the arc's sweep, and the ending x, y coordinates of the arc.
Z	Close the path; that is, return to the most recent Moveto point.

SVG provides several shortcuts to minimize the amount of space needed to describe path. When you have a repeated command letter (for example, a series of lines or arcs), you don't have to repeat the letter. You also can eliminate any unnecessary whitespace. Thus, the following three paths describe the same parallelogram.

<path d="M 5,3 L 10,3 L 7,6 L 2,6 Z"/>
<path d="M 5,3 L 10,3  7,6  2,6 Z"/>
<path d="M5 3L10 3 7 6 2 6Z"/>

Upper-case letters indicate absolute coordinates; lower-case letters indicate coordinates relative to the previous coordinates.

Here's the non-minimized path for the star-shaped bullet.

<path id="star"
    d=
    "M -0.951,-0.309
     L  0.951,-0.309
       -0.588, 0.809
        0.000,-1.000
        0.588, 0.809
     Z"
     transform="scale(3,3)" stroke="none" />

And here are the references to them in the main SVG, along with the result. See the entire source.

<use xlink:href="#bullet" fill="#990000" transform="translate(5, 120)"/>
<use xlink:href="#star" fill="#009900" transform="translate(10, 120)"/>
<use xlink:href="#star" fill="#990099" transform="translate(180, 120)"/>
<use xlink:href="#bullet" fill="#000099" transform="translate(185, 120)"/>

SVG also provides command letters for cubic and quadratic Bézier curves, but they are beyond the scope of this article. The path for the camera (which you may see in the source) uses quadratic curves. Here's the result of the camera's path specifications:

For full information about paths, see the SVG specification.

Adding Text

The <text> element is a container element; the text you wish to display is between the opening and closing tags. The most important attributes are the x and y location for the text, the font-family, font-size, and fill color.

If you need to change the attributes of a word or two somewhere in your text, you should use the <tspan> element rather than splitting your text into multiple <text> elements. The camera body's text is grouped so that we don't have to repeat the font-family and font-size on each text element.

<text font-family="sans-serif" font-size="10pt" fill="black"
    x="18" y="123">Cameras cost
    <tspan fill="#990000" font-style="italic"
        text-decoration="underline">less</tspan>
    at <tspan font-family="serif">MegaMart</tspan>!
</text>

<g font-family="sans-serif" font-size="6pt" fill="black">
    <text x="54" y="59">
    <tspan fill="red">S</tspan><tspan
        fill="green">V</tspan><tspan fill="blue">G</tspan>
    </text>
    <text x="53" y="66">Cam</text>
</g>

We'll also put some scaled, rotated text at the right side of the page. See the source.

<text font-family="serif" font-size="12pt" fill="black"
    x="0" y="0"
    transform="rotate(-90) translate(-100, 180) scale(1.5, 1)">
    MegaMart
</text>

Filters

The final task is to place the yellow glow behind the rotated text by using the SVG <filter> element. The filter element allows you to apply one or more filters, or graphic operations, to a graphic object. Unlike transforms, which change an object's size, shape, and orientation, filters usually affect an object's visual aspect. SVG has, among others, filters that blur an image, change its color saturation or characteristics, add or overlap it with another object, produce a beveled or embossed effect, and lighting effects.

Because we'll be using the MegaMart words twice, we'll put it into the <defs> section:

<text id="megaText" fill="black" x="0" y="0"
  font-family="serif" font-size="12pt">
    MegaMart
</text>

To get the yellow glow from black text, you have to blur the image and change the resulting grayscale to yellow. It looks like this, with line numbers added for reference.

 1  <filter id="glowShadowFilter">
 2      <feGaussianBlur stdDeviation="0.7 0.7"/>
 3      <feColorMatrix
 4          type="matrix" 
 5          values=
 6          "1 0 0 0 0
 7           0 1 0 0 0 
 8           0 0 0 0 0
 9           0 0 0 1 0"/>
10      <feOffset dx="2" dy="2"/>
11  </filter>

Line 1

Start and name this filter sequence

Line 2

Do a Gaussian blur. The larger the standard deviation numbers are (for x and y directions), the more the image will blur.

Lines 3-9

This filter uses a matrix of values to determine how to change colors. Line 6, 7, 8, and 9 tell how to transform the red, green, blue,and alpha (transparency) channels of the image. Each of these lines gives the proportion of red, green, blue, and alpha to combine, plus an “offset” value. For example, line six says to take 100% of the red value, none of the green value, none of the blue value, and none of the alpha value for the current pixel. Add them all together, with no offset (that's the final zero in the line). That total becomes the new value for the red component of this pixel. In short, line six keeps the red component as it was, not adding anything else to it. Line seven keeps only the green component, line eight throws away the blue component entirely, and line nine keeps the transparency exactly as it was. The end result of all this is to change the image from grayscale to “yellow-scale.”

Line 10

This filter offsets an image by the specified dx and dy distances. This would usually be in the middle of a filter sequence; here we use it to avoid having to do a transform=translate() later on.

Now, we group both text items, and filter the first one, which must appear before the second one so that it shows up underneath. Here's the SVG, and the final product. See the source.

<g transform="rotate(-90) translate(-100,180) scale(1.5,1)">
    <use xlink:href="#megaText" fill="whitw"
        filter="url(#glowShadowFilter)"/>
    <use xlink:href="#megaText"/>
</g>

Summary

In this brief introduction, you've learned how to

• set up the dimensions of an SVG drawing
• create basic shapes such as rectangles and circles
• transform a graphic by translating, scaling, and rotating it
• define graphics for later reuse
• group graphics
• use simple paths
• add text to a graphic
• use filters for visual effects

If you wish to learn more about the many things SVG can do, read the SVG specification.

---