O'Reilly logo

SVG Essentials by J. David Eisenberg

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating an SVG Graphic

In this section, we will write an SVG file that produces the image of the cat that we showed earlier in the chapter. This example introduces many of the concepts that we will explain in further detail in subsequent chapters. This file will be a good example of how to write an example file, which is not necessarily the way you should write an SVG file that will be part of a finished project.

Document Structure

We start Example 1-1 with the standard XML processing instruction and DOCTYPE declaration. The root <svg> element defines the width and height of the finished graphic in pixels. The <title> element’s content is available to a viewing program for use in a title bar or as a tooltip pointer, and the <desc> element lets you give a full description of the image.

Example 1-1. Basic structure of an SVG document

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="140" height="170">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>
<!— the drawing will go here —>
</svg>

Basic Shapes

We draw the cat’s face by adding a <circle> element. The element’s attributes specify the center x-coordinate, center y-coordinate, and radius. The (0,0) point is the upper left corner of the picture. x coordinates increase as you move horizontally to the right; y coordinates increase as you move vertically downwards.

The circle’s location and size are part of the drawing’s structure. The color in which it is drawn is part of its presentation. As is customary with XML applications, we want to separate structure and presentation for maximum flexibility. Presentation information is contained in the style attribute. Its value will be a series of presentation properties and values, as described in Appendix B, in Section B.1. We’ll use a stroke color of black for the outline, and a fill color of none to make the face transparent. The SVG is shown in Example 1-2, and its result in Figure 1-8.

Example 1-2. Basic shapes -- circle

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="140" height="170">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>

<circle cx="70" cy="95" r="50" style="stroke: black; fill: none"/>;

</svg>
Stage one -- circle

Figure 1-8. Stage one -- circle

Specifying Styles as Attributes

Now we add two more circles for the eyes in Example 1-3. Although their fill and stroke colors are really part of the presentation, SVG does allow you to specify them as individual attributes. In this example we specify the fill and stroke colors as two separate attributes rather than inside a style attribute. You probably won’t use this method often; we’ll discuss it further in Chapter 4, in Section 4.2.4. We’ve put it here just to prove that it can be done. The results are shown in Figure 1-9.

The <?xml ...?> and <?DOCTYPE?> have been omitted to save space in the listing.

Example 1-3. Basic shapes -- filled circles

<svg width="140" height="170">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>

<circle cx="70" cy="95" r="50" style="stroke: black; fill: none"/>
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>

</svg>
Stage two -- face and eyes

Figure 1-9. Stage two -- face and eyes

Grouping Graphic Objects

Example 1-4 adds the whiskers on the right side of the cat’s face with two <line> elements. We want to treat these whiskers as a unit (you’ll see why in a moment), so we enclose them in the <g> grouping element, and give it an id. A line is specified by giving the x- and y-coordinates for its starting point (x1 and y1) and ending point (x2 and y2). The result is displayed in Figure 1-10.

Example 1-4. Basic shapes -- lines

<svg width="140" height="170">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>

<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>
<g id="whiskers">
   <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>
   <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>
</g>
</svg>
Stage three -- right whiskers

Figure 1-10. Stage three -- right whiskers

Transforming the Coordinate System

Now we will <use> the whiskers group, and transform them into the left whiskers. Example 1-5 first flips the coordinate system by multiplying the x-coordinates by negative one in a scale transformation. This means that the point (75, 95) is now located at at the place which would have been (-75, 95) in the original coordinate system. In the new scaled system, coordinates increase as you move left. This means we have to translate (move) the coordinate system 140 pixels right, the negative direction, to get them where we want them as shown in Figure 1-11.

Example 1-5. Transforming the coordinate system

<svg width="140" height="170">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>

<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>
<g id="whiskers">
   <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>
   <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>
</g>
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/>

</svg>
Stage four -- left whiskers

Figure 1-11. Stage four -- left whiskers

The transform attribute’s value lists the transformations, one after another, separated by whitespace.

Other Basic Shapes

Example 1-6 constructs the ears and mouth with the <polyline> element, which takes pairs of x- and y-coordinates as the points attribute. You separate the numbers with either blanks or commas as you please. The result is in Figure 1-12.

Example 1-6. Basic shapes -- polylines

<svg width="140" height="170">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>

<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>
<g id="whiskers">
   <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>
   <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>
</g>
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/>
<!— ears -->
<polyline points="108 62,  90 10,  70 45,  50, 10,  32, 62"
   style="stroke: black; fill: none;" />
<!-- mouth -->
<polyline points="35 110, 45 120, 95 120, 105, 110"
    style="stroke: black; fill: none;" />
</svg>
Stage five -- ears and mouth

Figure 1-12. Stage five -- ears and mouth

Paths

All of the basic shapes are actually shortcuts for the more general <path> element, which Example 1-7 uses to add the cat’s nose. The result is in Figure 1-13. This element has been designed to make specifying a path, or sequence of lines and curves, as compact as possible. The path in Example 1-7 translates, in words, to: “Move to coordinate (75,90). Draw a line to coordinate (65,90). Draw an elliptical arc with an x-radius of 5 and a y-radius of 10, ending back at coordinate (75,90).”

Example 1-7. Paths

<svg width="140" height="170">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>

<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>
<g id="whiskers">
   <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>
   <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>
</g>
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/>
<!-- ears -->
<polyline points="108 62,  90 10,  70 45,  50, 10,  32, 62"
   style="stroke: black; fill: none;" />
<!-- mouth -->
<polyline points="35 110, 45 120, 95 120, 105, 110"
    style="stroke: black; fill: none;" />
<!-- nose -->
<path d="M 75 90 L 65 90 A 5 10 0  0 0 75 90"
   style="stroke: black; fill: #ffcccc"/>
</svg>
Stage six -- nose

Figure 1-13. Stage six -- nose

Text

Finally, since this picture is so crudely drawn, there’s a good chance that people will not know it is a cat. Hence, Example 1-8 adds text to the picture as a label. In the <text> element, the x and y attributes which specify the text’s location are part of the structure. The font family and font size are part of the presentation, and thus part of the style attribute. Unlike the other elements we’ve seen, <text> is a container element, and its content is the text we want to display. Figure 1-14 shows the final result.

Stage seven -- text and finished image

Figure 1-14. Stage seven -- text and finished image

Example 1-8. Text

<svg width="140" height="170">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>

<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>
<g id="whiskers">
   <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>
   <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>
</g>
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/>
<!-- ears -->
<polyline points="108 62,  90 10,  70 45,  50, 10,  32, 62"
   style="stroke: black; fill: none;" />
<!-- mouth -->
<polyline points="35 110, 45 120, 95 120, 105, 110"
    style="stroke: black; fill: none;" />

<!-- nose -->
<path d="M 75 90 L 65 90 A 5 10 0  0 0 75 90"
   style="stroke: black; fill: #ffcccc"/>
<text x="60" y="165" style="font-family: sans-serif; font-size: 14pt;
   stroke: none; fill: black;">Cat</text>
</svg>

That concludes our brief overview of SVG; in the following chapters we’ll examine these concepts in depth.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required