SVG Basics

The coordinate system

Other than that, we can generally assume that when we refer to a point with coordinates (100,100), it will be a point diagonally downward (100√2 pixels) from the upper left corner of the browser's viewable window.

Simple objects

These are the primitives, so to speak, and form an appropriate starting point for our discussion. The <polyline> and <polygon> objects don't add anything that the more flexible path cannot do, so those will not be considered in this treatment. It makes sense to discuss <use> along with grouping and transformations (once we have something worth <use>-ing), so I will present the others starting with the simpler objects first.

• Don't just read this book; try the examples. You have my permission and the permission of the publishers to do so. This sort of subject does not enter a passive brain as well as it enters an active one. It will help if you engage yourself actively.
• Don't just copy these examples; experiment. Try changing an attribute here and there. Imagine some picture, and see if you can draw it.
• For those fairly comfortable with learning new technologies, skip ahead and read, at the same time, the chapter on SMIL animation. As you are experimenting with a tag and its attributes, try animating the attributes so you can see what they affect and to what degree. It can give you a quicker and clearer understanding.

Colors and drawing order

Before discussing the basic drawing objects, let's first consider the use of color values in SVG and the order in which drawn objects appear on the page.

Colors may be specified in much the same way that they are in HTML/CSS:

• color names: any of the HTML name space color terms, including such terms as "aqua", "lightgreen", "salmon", "tomato" and "papayawhip";
• 6-digit hex RGB values: "#ff0a8f";
• 3-digit hex RGB values: "#fd2"="#ffdd22";
• functional values: either decimal (in the range 0 to 255), such as rgb(255,12,560); or percentage, such as rgb(100%, 50%, 20%).

Accordingly, the color "red" may be defined alternately as "red", "#f00", "#ff0000", "rgb(255,0,0)", or as "rgb(100%,0%,0%)".

Objects appear from back to front in the order they are defined, with objects defined later appearing in front of or above (and occluding if they overlap) those defined earlier. More concerning overlaying objects will be found in the next section "operations: grouping, reusing, scaling, translation and rotation."

<line>

The <line> object draws a line between two specified points: (x1,y1) and (x2,y2). In order to see the line, it must have a stroke (i.e., a color).

The code <line x1="10" y1="10" x2="100" y2="100"> draws an invisible line in most browsers, while in ASV+Internet Explorer, a faint hint of a grey line might be seen (which, curiously, does not expand in size when we zoom in on it).

Hence, a sort of minimal line consists of code such as the following:

<line x1="5" y1="5" stroke="red" x2="90" y2="90" />

Another attribute known as "stroke-width" controls the thickness of the line and, by default, is assigned a value of 1.

The stroke and stroke-width attributes as well as the starting and ending points are varied in the following illustration:

<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <line x1='5' y1='10' x2='99' y2='30' stroke-width='.5' stroke='red'/>
   <line x1='5' y1='30' x2='99' y2='50' stroke-width='1' stroke='red'/>
   <line x1='5' y1='50' x2='99' y2='70' stroke-width='2.5' stroke='red'/>
   <line x1='5' y1='70' x2='99' y2='90' stroke-width='4' stroke='blue'/>
</svg>    

<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <line x1='15' y1='15' x2='140' y2='135' stroke-width='25' stroke='blue' stroke-linecap='round'/>
   <line x1='15' y1='15' x2='140' y2='135' stroke-width='25' stroke='aqua' stroke-dasharray='8,3,2,18'/>
   <line x1='15' y1='155' x2='160' y2='60' stroke-width='25' stroke='blue'/>
   <line x1='15' y1='155' x2='160' y2='60' stroke-width='25' stroke='orange' stroke-dasharray='8,3,2'/>
</svg>    

(8 orange, 3 clear, 2 orange, 8 clear, 3 orange, 2 clear, ...).

The first of the two pairs of lines has two lines; both use stroke-linecap, having stroke-linecap="round". This makes the end of the line rounded instead of flat, as in the second example which uses the default or flat value of stroke-linecap.

Another useful aspect of lines involves the <marker> tag which can be used to define arrow or other shapes appropriate for attaching to the beginning or ends of lines. The W3C gives a clear example⁷ for those so interested, though it is a bit verbose for our treatment here. Another example can be seen at http://srufaculty.sru.edu/david.dailey/svg/newstuff/simpleshapes.svg.

<rect>

The <line>, <rect>-angle, <circle> and <ellipse> elements can all be seen as special cases of what could instead be done with the <path> object. But these are such familiar geometric objects that it is natural to define them separately.

A rectangle is drawn using the <rect> tag, which, by default, produces a rectangle with sides parallel to the edges of the browser window. We will see how to rotate rectangles later on so that they might be parallel to something other than the ground, without having to lift and tilt our monitors. We may also skew them so that they cease to be rectangles at all, but rather become parallelograms.

A <rect> receives a starting point (x,y) a width and a height attribute. If no fill color or pattern is specified, by default, the rectangle will be filled with black.

<rect x="60" y="95" height="30" width="50" />

Common attributes that are used in conjunction with the rectangle include the fill, which specifies its color (or pattern), its stroke and stroke-width (which determine aspects of its border or edge). Here are some rectangles that exemplify these attributes as well as the use of various color reference schemes and the partial overlay and occlusion of objects.

<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <rect x='62' y='25' height='110' width='16' fill='rgb(100%,50%,50%)' stroke='black' stroke-width='2'/>
   <rect x='35' y='35' height='30' width='50' fill='red' stroke='black' stroke-width='2'/>
   <rect x='5' y='60' height='30' width='50' fill='#f88' stroke='black' stroke-width='2'/>
   <rect x='25' y='70' height='30' width='50' fill='#ff8888' stroke='black' stroke-width='2'/>
   <rect x='65' y='60' height='30' width='50' fill='#eac' stroke='black' stroke-width='2'/>
   <rect x='85' y='70' height='30' width='50' fill='#eeaacc' stroke='black' stroke-width='2'/>
   <rect x='60' y='95' height='30' width='50' fill='rgb(255,0,0)' stroke='black' stroke-width='2'/>
</svg>    

Note in the above example that the first rectangle defined, the tall thin one, appears under all subsequent rectangles. Note also, that the colors "#f88" #ff8888" are equivalent and that "rgb(100%,50%,50%)" while visibly similar, is actually a bit darker since half of "ff" is actually "7f" rather than "88".

The fill of a <rect> can also be a more complex. Gradients, masks, patterns, and various filters are all available to alter the way a rectangle appears in SVG. These are more advanced topics and are dealt with later in this book. For something analogous to the stroke-dasharray seen above for the <line> element, consider the <gradient> as discussed in the next chapter.

<circle>

A circle is indeed a special case of an ellipse, so if you prefer parsimony in the amount of syntax you have to learn, please feel free to skip right ahead to the ellipse. The <circle> does have a slightly simpler syntax, so if you prefer keeping your keystrokes few, or if the ellipse's eccentricity troubles you in some fundamental way, then <circle> may be worth your while to learn.

The simplest circle requires only a center point (cx,cy) and a radius, r:

<circle cx="80" cy="50" r="40"/>

This produces a circle of radius 40 pixels filled (by default) with black.

Just as with rectangles, we might play with the stroke, the stroke-width and the stroke-dasharray to create various interesting effects. Note that if we wish a circle to appear to have an empty center, we define some stroke color and then set fill="none" to make it hollow. The illustration below shows the effects of adjusting several of these attributes.

<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <circle cx='80' cy='50' r='40'/>
   <circle cx='80' cy='110' r='40' fill='red'/>
   <circle cx='80' cy='170' r='40' fill='yellow' stroke='blue' />
   <circle cx='80' cy='160' r='20' fill='red' stroke='black' stroke-width='10'/>
   <circle cx='140' cy='110' r='60' fill='none' stroke='#579' stroke-width='30' stroke-dasharray='3,5,8,13'>
</svg>    

<ellipse>

The ellipse is just like the circle but has two radii instead of one. rx represents half the distance from the leftmost to the rightmost sides, while ry is the distance from top to center of the ellipse. The ellipse is always aligned with its horizontal axis parallel to the bottom of the window, unless one applies a rotation transform (as discussed later in this chapter). The ellipse can be a considerably more evocative shape than a circle, and given that it is a circle when rx=ry, it is more flexible as well.

<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <ellipse cx='80' cy='110' rx='75' ry='105' fill='#538'/>
   <ellipse cx='80' cy='110' rx='60' ry='40' fill='black' stroke='red' stroke-width='25'/>
   <ellipse cx='80' cy='110' rx='35' ry='20' fill='#538' stroke='yellow' stroke-width='25'/>
   <ellipse cx='80' cy='50' rx='40' ry='30' fill='red' stroke='black' stroke-width='25' stroke-dasharray='3,6'/>
   <ellipse cx='80' cy='50' rx='30' ry='20' fill='orange' stroke='red' stroke-width='10' stroke-dasharray='3,6'/>
   <ellipse cx='80' cy='170' rx='40' ry='30' fill='yellow' stroke='orange' stroke-width='25' stroke-dasharray='3,6' />
   <ellipse cx='80' cy='170' rx='30' ry='20' fill='red' stroke='black' stroke-width='10' stroke-dasharray='3,6'/>
</svg>    

The code of the two illustrations is identical except that the figure on the left has had the attribute-value pair stroke-dasharray="3,6"added to four of its seven ellipses.

<path>

If one wanted to learn only one drawing primitive, then the <path> would probably be it. It can be used to replace <rect>, <ellipse>, and <circle>, though it would not be advised unless your mental arithmetic skills are quite good (e.g. simultaneous differential equations). <path> is a very flexible drawing option. It renders the movement of a stylus through two dimensions, with both pen-up and pen-down options, including straight and curved segments joined together at vertices which are either smooth or sharp.

There are many aspects of the <path> that we will not discuss here. Fortunately, the W3C's chapter on paths is thorough and has plenty of illustrations of most of its numerous facets. Here, we cover only absolute rather than relative coordinates, and only the raw path elements rather than their simplified forms (such as "S" as a special case of "C"). We will deal with pen-down, linear, quadratic and cubic forms, and arcs.

Like <rect>, <line> and the other elements, we've seen, <path> has attributes like stroke, stroke-width, stroke-dasharray, and fill. But while the other elements we've looked at have special meanings given to particular coordinates (like "rx" or "x2"), the path has a sequence of such coordinates held in an attribute named "d". This string of coordinates can be of arbitrary length.

Paths: M and L

We begin by specifying where the drawing will begin by inserting as the first element of "d" a notation such as "M x y" for numbers x and y. We might think of "M x y" as meaning "move pen to the coordinate x y." From there, we have options of moving (with pen still down on the canvas) linearly (L), quadratically (Q), cubically (C) or through an elliptic arc (A). For example, d="M 100 100 L 200 200" would succeed in drawing a diagonal line from the point (100,100) to the point (200,200), as shown.

<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <path stroke='black' d='M 100 100 L 200 200'/>
</svg>    

The pen-down and line modes stay in effect until turned off, so we might concatenate yet other pairs of coordinates into the path.

<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <path d='M 100 100 L 200 200 100 150'/>
</svg>    

A couple of things should be noted. First, in the above example, we did not specify a stroke since, by default, the figure is filled with black. Second, if we specify that a path has no fill (using fill="none") then the path will not appear to loop back to the beginning. Third, we might, for sake of legibility, be tempted to add commas, between pairs of coordinates. This is just fine, in the general case, though a few cases have been reported in which certain browsers seem to be troubled by large numbers of commas as coordinate delimiters. Fourth, we may assume that L (or line) is the default way of moving to the next point, and it need not be specifed. That is d="M 100 100 L 200 200 100 150" should be equivalent to d="M 100,100 200,200 100,150" . These observations are illustrated as follows. Note that once we specify fill="none" the figure will be invisible, unless we specify a stroke.

<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <path d='M 50,100 150,200 50,150'/>
   <path d='M 100 50 L 200 150 100 100' fill='none' stroke='black'/>
</svg>    

The path will also be unclosed — that is, the two endpoints will not be connected unless we specify that they should be. If we wish a path to be closed, we modify it with the z flag at the end of the path as follows:

open:

<path d="M 100,50 200,150 100,100" fill="none" stroke="black"/>

closed:

<path d="M 100,50 200,150 100,100 z" fill="none" stroke="black"/>

Since paths are, by default, filled with black, it is natural to wonder what happens when the path crosses itself. By default, the union of the regions traversed by the path is filled, unless we specify otherwise.

<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='300' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <path d='M 70,290 L 150,150 200,250 40,250 100,150 170,290'/>
   <path d='M 270,290 L 350,150 400,250 240,250 300,150 370,290' fill-rule='evenodd'/>
</svg>    

Here we show the default fill technique as well as the "even-odd" fill rule on a shape which intersects itself on more than one occasion. The points are labeled just to make it easier to read what might seem a long list of six coordinate pairs.

Another interesting aspect of <path> is that we might combine multiple path segments into a common path definition. That is, a path may have multiple components by having more than one pen-down operation. Note in the figure below that the two path segments are indeed treated as one since the orange fill is applied to the entire figure rather than to the two separate triangular components. The interior of the figure is also transparent, as illustrated by the rotated and reduced version of the image appearing partly inside and partly outside the foreground figure.

<?xml version="1.0" standalone="no"?>

    
<svg width='550' height='300' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <g transform='scale(0.8) translate(27.5 39.25) rotate(30 110 157)'>
   <path fill='green' d='M 10,215 210,215 110, 42 z M 10,100 210,100 110,273 z' stroke='purple' stroke-width='3'/>
   </g>
   <path fill='orange' d='M 10,215 210,215 110, 42 z M 10,100 210,100 110,273 z' stroke='purple' stroke-width='3'/>
</svg>    

Sources and References