3. SVG Drawing Elements

3: SVG Drawing Elements

• 3.1 Path and Text
• 3.2 Path
• 3.3 Text
• 3.4 Basic Shapes

3.1 Path and Text

The two main drawing elements in SVG are path and text. There is a set of basic shape drawing elements like rect that are essentially shorthand forms for the path element. We will discuss these later. SVG is designed as a transmission format for schematic diagrams in the widest sense. Thus it should be applicable to simple graphs and flow diagrams but also be efficient for CAD diagrams, maps, etc. This means that the main drawing elements must be efficient in quite a wide set of areas. Attention needs to be paid to efficient transmission of complex paths and demanding text.

3.2 Path

The path element defines a shape that can be open or closed. A path consists of a sequence of subpaths and in many cases there is just a single subpath in which case the path and subpath segments are synonymous. Each subpath consists of a sequence of commands where normally the first defines a new current position and the remainder define a line or curve from the current position to some new position which becomes the current position for the next part of the curve and so on. The form of the path element is as follows:

<path d="M 0 0 L 100 100" />

The d attribute defines the path. In the example above it defines a path that consists of establishing a current position at the origin (Move to 0,0) and the path goes from there to the point (100,100) as a straight Line. This would be the new current position if there were subsequent commands in the sequence. The following path is a triangle:

<path d="M 0 0 L 100 0 L50 100 Z" />

Here the first line is horizontal from the origin to the point (100,0) and then a straight line goes to the point (50,100). The command Z closes the path with a straight line from (50,100) back to (0,0), the starting position for the path segment.

A path with two path segments would have the form:

<path d="M 0 0 L 100 0 L50 100 Z M300,300 L400,300 L350,400 Z" />

White space has been used to separate the coordinates in the first subpath. Commas can also be used as is shown in the second subpath. For transmission efficiency, surplus separation can be removed. Some of the condensing rules are:

• The coordinate follows the command letter with no intervening space
• Negative coordinates need no separation from the previous coordinate
• Numbers starting with a decimal point need no white space if it is unambiguous
• If the next command is the same as the previous one, the command letter can be omitted
• The first command after a Move is assumed to be a Line if just coordinates appear

For example:

<path d="M0,0L.5.5.8.2Z" />

This is equivalent to:

<path d="M 0, 0 L 0.5, 0.5 L 0.8, 0.2 Z" />

The basic commands are:

If the path being specified consists of many short paths, it may well be more efficient to define the path as relative positions from the previous current position. If the command uses a lower case letter, this indicates that the coordinates defined for this command are relative to the previous current position. Figure 3.2 shows some more complex examples.

Figure 3.2: Path line commands

The path depicted at the top of the diagram could have been written:

<path d="M 150, 50 L 200, 100 L 250, 100  L 250, 50 L 300, 50 L 300, 10 L350, 60" />

Paths can also be defined as curves (quadratic and cubic bezier, and elliptical arcs). Probably the most useful is the cubic bezier. This has the initial letter C and has three coordinates as its parameters. A curved path is defined from the current position (either established by a Move command or a previous line or curve command) to the third point defined in the cubic bezier. The first two points define the bezier control points that give the shape of the curve (Figure 3.2). The positioning of the control points change the shape of the curve under the user's control as can be seen in Figure 3.3. The coordinates used position the curves as they appear on the diagram.

Figure 3.2: Path cubic bezier command

Figure 3.3: Path cubic bezier examples

A real world example is the creation of a duck as shown in Figure 3.4. In the top left the duck has been defined by a set of points and the path is a sequence of straight lines between those points (the points are marked by circles):

<path d="M    0  112
L   20  124 L   40  129 L   60  126 L   80  120 L  100  111 L  120  104
L  140  101 L  164  106 L  170  103 L  173   80 L  178   60 L  185   39
L  200   30 L  220   30 L  240   40 L  260   61 L  280   69 L  290   68
L  288   77 L  272   85 L  250   85 L  230   85 L  215   88 L  211   95
L  215  110 L  228  120 L  241  130 L  251  149 L  252  164 L  242  181
L  221  189 L  200  191 L  180  193 L  160  192 L  140  190 L  120  190
L  100  188 L   80  182 L   61  179 L   42  171 L   30  159 L   13  140
Z"/>

Figure 3.4: Path defined by lines and cubic beziers

The duck without point markers is shown in the top right. In the bottom left the duck has been defined by a set of cubic bezier curves (the control points are marked by aqua circles and the end points by yellow circles) and the duck without the point markers is shown bottom right. The duck defined by bezier curves is:

<path  d="M  0  312
C  40 360 120 280  160  306
C 160  306  165  310  170  303
C 180  200  220  220  260  261
C 260  261  280  273  290  268
C 288  280  272  285  250  285
C 195  283  210  310  230  320
C 260  340  265  385  200  391
C 150  395   30  395   0   312 Z"/>

The number of points in the path defined by lines is 43 while the bezier definition uses 25. The path could also be defined using relative coordinates in which case it would be:

<path  d="M  0  312
c  40 48 120 -32  160  -6
c 0  0  5  4  10  -3
c 10  -103  50  -83  90  -42 
c 0  0  20  12  30  7
c -2  12  -18  17  -40  17
c -55  -2  -40  25  -20  35
c 30  20  35  65  -30  71
c -50  4   -170  4   -200   -79 z"/>

Note that it does not really make any difference whether you complete the closed curve with upper or lowercase Z as the effect is identical. Removing unnecessary spaces reduces the path definition to 160 characters compared with the 443 characters in the initial line path representation:

<path d="M 0 312c40 48 120-32 160-6c0 0 5 4 10-3c10-103 50-83 90-42c0 0 20 12 30 7c-2 12-18 17-40 17c-55-2-40 25-20 35c30 20 35 65-30 71c-50 4-170 4-200-79 z"/>

3.3 Text

The second most important drawing element is text. It has a large number of styling properties that we will discuss later. Here, we will just define the three main elements. Figure 3.5 shows the three main types of text that can be generated:

• Text defined just using the text element
• Text that uses the tspan element to vary the properties and attributes being used in the text presentation
• Text where the path is defined by the textPath element

Figure 3.5: Different text elements

<text x="20" y="50">Abracadabra</text>

<text x="220" y="20">
<tspan x="220" dy="30">This is multi-line</tspan>
<tspan x="220" dy="30">text or text</tspan>
<tspan x="220" dy="30" style="fill:white;stroke:green">with different properties</tspan>
<tspan x="220" dy="30"  rotate="30">that can be produced</tspan>
<tspan x="220" dy="30">using the tspan element</tspan>
</text>

<path  id="duck" d="M  0  312
C  40 360 120 280  160  306
C 160  306  165  310  170  303
C 180  200  220  220  260  261 
C 260  261  280  273  290  268
C 288  280  272  285  250  285
C 195  283  210  310  230  320
C 260  340  265  385  200  391
C 150  395   30  395   0   312 Z"/>

<text style="font-size:10">
<textPath xlink:href="#duck">
We go up, then we go down, then up again around his head. Now we are upside down as 
we go round his neck and along the bottom to the tail.
</textPath>
</text>

Note that the link to the duck path uses xlink:href. SVG defines its linkage using the xlink namespace. When this is used, the xlink namespace must also be specified:

<svg   xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" ...

The use of the text element by itself has attributes x and y that define the origin for the text. The origin is by default at the bottom left of the first character and the characters are displayed from left to right. Attributes associated with the text can change the start position, the characteristics of the text and the drawing direction. We will discuss these later.

If the position of parts of the text or the text's attributes need to change from that which is available using the text element, these can be adjusted by including within the text element a tspan element. The text within a tspan may have its origin specified either by absolute x and y attributes or relative dx and dy attributes. The current text position is incremented by the amount specified in the case of the relative attribute. For both dx and dy, the attribute can be a list in which case the first number defines the increment for the first character, the second defines the increment from that character for the second character and so on. The characters in the text string within the tspan element can each be rotated by a defined number of degrees by using the rotate attribute. Again, a list of numbers can be provided to define the orientation of each character in the text sequence. Some further examples of tspan usage are shown in Figure 3.6.

Figure 3.6: Uses for the tspan element

<text x="10" y="50" >THE<tspan style="font-size:40">REAL</tspan>DUCK</text>
<text x="10" y="100" >The duck 
  <tspan style="font-weight:bold; fill:firebrick">is not</tspan> correct</text>
<text x="300" y="100" >But it can <tspan dx="30" dy="-30" style="font-weight:bold; fill:firebrick">
    easily </tspan><tspan dy="30">be fixed</tspan></text>
<text>
<tspan x="40 80 120 160 200 240 280 320 360" y="150">Brown and</tspan>
<tspan x="60 100 140 180 220 260 300 340" y="200">feathery</tspan>
</text>
<text>
<tspan x="30 60 90 120 150 180 210 240 270 300 330 360 390 420 450 480 510"
rotate="0 10 30 50 70 90 110 130 150 170 190 210 240 270 300" y="300">Ducks and Drakes</tspan>
</text>

3.4 Basic Shapes

The six basic shape elements in SVG are shorthands for the path element. They are line, polyline, polygon, rect, circle and ellipse. The main attributes of each are given in this example (see Figure 3.7) and the meaning of the attributes in the following table.

<circle cx="70"  cy="100" r="50"  />
<rect x="150" y="50" rx="20" ry="20" width="135" height="100" />
<line x1="325" y1="150" x2="375" y2="50" />   
<polyline points="50, 250  75, 350  100, 250  125, 350  150, 250  175, 350" />
<polygon points=" 250, 250  297, 284  279, 340  220, 340  202, 284" />
<ellipse cx="400" cy="300" rx="72" ry="50" />

Figure 3.7: Basic elements