SVG Basics

Simple objects

According to the World Wide Web Consortium's Recommendations, the SVG graphics elements are "the element types that can cause graphics to be drawn onto the target canvas. Those are: 'path', 'text', 'rect', 'circle', 'ellipse', 'line', 'polyline', 'polygon', 'image' and 'use'."⁶

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.

Paths: Q — Quadratic Bézier curves.

I became aware of Bézier curves in the mid 1980s when I discovered that Adobe Illustrator had the ability to draw amazing curves quickly. I did not know what sort of crazy-fast mathematics would be able to solve all those equations so quickly. A good treatment of the subject may be found at Wikipedia⁸.

Here's basically how a quadratic Bézier works in SVG. We define an initial point (say 100,200) with a pen-down. From there, we set a course heading toward the next point. Instead of going to the next point, we just aim that direction. So, for example, while "M 100 200 L 200 400" actually arrives at the point "200,400", "M 100 200 Q 200 400 … " merely heads that way. Ultimately, in addition to a "heading" we also have a final "destination" and that is the final coordinate pair required of the quadratic Bézier. In the illustration we see that.

"M 100,200 L 200,400 300,200"

draws a red path between (and reaching each of) the three points indicated. Simply replacing the "L" with a "Q" to draw

"M 100,200 Q 200,400 300,200"

produces a curve passing through both endpoints, and becoming tangent to the associated lines of the allied line-path at the endpoints to the segments.

SVG Code Input:

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

    
<svg width='550' height='410' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <path d='M 100 200 Q 200,400 300,200' fill='none' stroke='blue' />
   <path d='M 100 200 L 200,400 300,200' fill='none' stroke='red'/>
</svg>

HTML Web Page Embedded Output:

While there is an infinite family of curves tangent both to the line "M 100 200 L 200 300" at (100, 200) and to "M 200 400 L 300 200" at (300,200), there is only one quadratic that shares these properties, even if we allow for rotations (in the sense of parametric equations) of the quadratic. That is, the curve is uniquely defined by those three points in the plane. Likewise, any three non-collinear points in the plane determine one quadratic Bézier curve.

Revisiting the earlier example in which the fill-rule was modified to produce an empty space in the middle of the curve, we may draw the same curve with quadratic splines instead of lines to see the effect.

SVG Code Input:

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

    
<svg width='550' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <path fill-rule='evenodd' d='M 70 140 L 150,0 200,100 L 40,100 100,0 L 170,140 70 140'/>
   <path fill='red' fill-rule='evenodd' d='M 70 140 Q 150,0 200,100 Q 40,100 100,0 Q 170,140 70 140'/>
</svg>

HTML Web Page Embedded Output:

Paths: C — Cubic Bézier curves.

We can imagine raising the degree of the polynomial to allow the satisfaction of increasingly more constraints on a curve. With a cubic Bézier, we are able to change the skewness and kurtosis of a curve tangent to the inscribing polygon at the specified endpoint, because instead of a single "control point" affecting the direction of the curve, we now have two control points.

SVG Code Input:

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

    
<svg width='550' height='400' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <path d='M 100 200 Q 200,400 300,200' fill='none' stroke='blue' />
   <path d='M 100 200 C 120,240 280,240 300,200' fill='none' stroke='Red' />
   <path d='M 100 200 C 150,300 250,300 300,200' fill='none' stroke='Green' />
   <path d='M 100 200 C 180,360 220,360 300,200' fill='none' stroke='Violet' />
   <path d='M 100 200 C 195,390 205,390 300,200' fill='none' stroke='Orange'/>
   <path d='M 100 200 L 200,400 300,200' fill='none' stroke='red'/>
</svg>

HTML Web Page Embedded Output:

In the above figure, we see the effect of allowing the two control points to move symmetrically along the edges of the triangle in the direction of the vertex at (200,400). All four cubic Béziers are like the quadratic Bézier (in blue) in that they have the same starting and end points and are all tangent to the same lines at those points. Each curve as we move down from the red curve to the sharp red angle has control points which are along the lines, but progressively closer to the vertex.

A sort of limiting case can be seen in the following diagram in which the two control points converge to either the end points of the curve or to the vertex. The lower of the two green curves never gets any lower than what is shown, though the higher green curve will be equivalent to the line when d="M 0,0 C 0,0 400,0 400,0". Effectively then the kurtosis, or peakedness, of the curve can be adjusted anywhere between the ranges shown.

SVG Code Input:

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

    
<svg width='550' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <path d='M 0 0 L 200,200 400,0' fill='none' stroke='red'/>
   <path d='M 0 0 Q 200,200 400,0' fill='none' stroke='blue' />
   <path d='M 0 0 C 10,10 390,10 400,0' fill='none' stroke='Green' />
   <path d='M 0 0 C 200,200,200,200 400,0' fill='none' stroke='Green' />
</svg>

HTML Web Page Embedded Output:

While the above examples adjust the two control points symmetrically, we may adjust the skewness or asymmetry of the curve by adjusting the two control points asymmetrically.

Ultimately, the power of cubic Béziers can be seen in this ability to bend flexibly in 2D. Additionally, they may be stitched together piecewise and smoothly so as to make cubic splines that can approximate any 2D curve with what is usually acceptable accuracy.

The following illustrates a collection of curves each tangent to the same pair of lines at the same pair of endpoints:

SVG Code Input:

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

    
<svg style='border:1px solid black' width='580' height='450' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='526' height='426' viewBox='-25, -25, 526, 426' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
       <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
   </pattern>
   <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
       <rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
       <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
   </pattern>
   <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>

       <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
           <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
       </pattern>
       <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
           <rect width='10' height='10' fill='url(#pattern-halfgrid)'></rect>
           <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
       </pattern>
       <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)'></rect>
       <path d='M 0,100 C -50,50,350,250 300,200' fill='none' stroke-width='5' stroke='Cyan' />
       <path d='M 0,100 C 50,150,250,150 300,200' fill='none' stroke-width='5' stroke='Orange' />
       <path d='M 0,100 C 100,200,200,100 300,200' fill='none' stroke-width='5' stroke='Green' />
       <path d='M 0,100 C 150,250,150,50, 300,200' fill='none' stroke-width='5' stroke='Blue' />
       <path d='M 0,100 C 200,300,100,0, 300,200' fill='none' stroke-width='5' stroke='Violet' />
       <path d='M 0,100 l 200,200 M 100,0 l 250 250' fill='none' stroke='red'/>
</svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='495' y='17' font-size='20'>(500,0)</text>
<text x='5' y='445' font-size='20'>(0,400)</text>
<text x='495' y='445' font-size='20'>(500,400)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='525' cy='25' r='2' fill='black'/>
<circle cx='25' cy='425' r='2' fill='black'/>
<circle cx='525' cy='425' r='2' fill='black'/>
</svg>

HTML Web Page Embedded Output:

The following demonstrates how Bézier curves may be stitched together smoothly. For this to happen, it is necessary that the slopes of the lines at either side of a segment's endpoint be the same.

SVG Code Input:

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

    
<svg width='550' height='350' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <path d='M 0,200 C 50,200 100,100 150,200 C 200,300 250,200 300,200' stroke='blue' opacity='0.5' stroke-width ='3' fill='cyan' />
   <path d='M 0,200 C 50,200 100,300 150,200 C 200,100 250,200 300,200' stroke = 'black' opacity='0.5' stroke-width = '3'  fill = '#eec1c2' />
   <line x1='100' y1='100' x2='200' y2='300' stroke='#06a' stroke-width='2' />
   <line x1='100' y1='300' x2='200' y2='100' stroke='#840' stroke-width='2' />
</svg>

HTML Web Page Embedded Output:

Observe that the two paths "brown" and "blue" share beginning and end points, initial and final control points, as well as midpoints (150,200). They differ only in terms of the control points surrounding the midpoint. The blue path aims toward (100,100) and then changes direction toward (200,300) passing through the midpoint on its way and there tangent to the line as shown. Because the three relevant points (100,100), (150,200) and (200,300) are collinear, the slopes of both segments are the same at the point where they meet, implying that the curve is smooth (continuously differentiable) at that point. The principle is applied repeatedly in the following illustration in which each labeled endpoint of a cubic Bézier is surrounded by two points collinear with it.

SVG Code Input:

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

    
<svg width='550' height='350' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <path stroke='black' stroke-width='3' fill='#eec1c2' d='M 99 192 C 137 160 204 133 141 124 C 78 115 34 167 47 129 C 60 91 20 65 77 71 C 134 77 206 43 196 101 C 186 159 118 368 119 299 C 120 230 201 169 138 206 C 75 243 53 231 99 192' />
</svg>

HTML Web Page Embedded Output:

Paths: A — Elliptical arc.

One other aspect of the <path> deserves mention. That is the elliptical arc. It might seem that an arc would be a very simple topic, but when we realize that given any two points in the plane and two elliptical radii, there often are two ellipses that traverse those points with specified radii and those points specify two different arcs for each ellipse. The arc subcommand of the <path> has the following syntax: A rx ry XAR large-arc-flag sweep-flag x y. The arc begins at the current point (determined by the last coordinate specified, e.g. by the M subcommand), and ends at (x,y). The ellipse will have radii of rx and ry, with the x-axis of the ellipse being rotated by XAR degrees. The particular ellipse (of the two possible) is specified by the large-arc-flag (0 or 1) and the particular segment of the ellipse is specified by the sweep-flag. (0 or 1). The following illustration shows two different ellipses passing through (100,100) and (200,150) each with different choices for its sweep-flag. The yellow arc is identical to the red one, and the blue to the green, except for the sweep-flag. Both ellipses have had zero rotation applied.

SVG Code Input:

<?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 A 30,50 0 0,1 200,150 z' stroke='cyan' fill-opacity='0.5' stroke-width ='6' fill='cyan' />
   <path d='M 100,100 A 300,30 0 0,0 200,150' stroke='green' fill-opacity='0.5' stroke-width ='4' fill='green' />
   <path d='M 100,100 A 300,30 0 0,1 200,150' stroke='orange' fill-opacity='0.5' stroke-width ='2' fill='orange' />
   <path d='M 100,100 A 30,50 0 0,0 200,150 z' stroke='blue' fill-opacity='0.5' stroke-width ='1' fill='blue' />
</svg>

HTML Web Page Embedded Output:

Opacity

Ordinarily all of our drawn objects are completely opaque. That is, opacity is, by default, 100%. If we wish to make things partly transparent, it is very easy: we simply add opacity=p for some number 0<p<1 as an (attribute, value) pair into the tag we wish to modify. A simple example is the preceding illustration of arc segments in which each of the four arc segments is given an opacity of 0.5, allowing any underlying objects to shine through:

<image>

The <image> tag in SVG is much like the <img> tag in HTML: a way of putting the contents of an image file (PNG, JPEG, or SVG formats) into a rectangle on a page. I am not quite sure why a vector graphics language came to have methods for inserting bitmaps. It makes sense, though, since most vector drawing packages give ready access to bitmaps. It certainly expands our graphics repertoire. Additionally, numerous interesting filters exist within SVG which give us considerable power at manipulating bitmapped as well as vector graphics.

Generally we include a tag much like a <rect>. We specify the upper left corner of the rectangle (x,y) we specify its width and height, and we specify the file or URL from which the material will be loaded.

SVG Code Input:

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

    
<svg style='border:1px solid black' width='580' height='450' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='526' height='426' viewBox='-25, -25, 526, 426' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
       <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
   </pattern>
   <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
       <rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
       <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
   </pattern>
   <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>

   <rect width='75' height='75' fill='green' />
   <image href='http://sideway.hk/images/sideway.jpg' xlink:href='http://www.sideway.hk/images/sideway.jpg' src='http://www.sideway.hk/images/sideway.jpg' width='75' height='75'  preserveAspectRatio='none' />
   <rect width='40' height='100' y='80' fill='green' />
   <image href='http://sideway.hk/images/sideway.jpg' width='40' height='100' y='80'/>
   <rect width='100' height='100' y='200' fill='green' />
   <image href='http://sideway.hk/images/sideway.jpg' height='100' width='40'  y='200'/>
   <rect width='40' height='100' x='100' y='80' fill='green' />
   <image href='http://sideway.hk/images/sideway.jpg' width='40' height='100' x='100' y='80' preserveAspectRatio='xMidYMin slice'/>
   <rect width='100' height='100' x='100' y='200' fill='green' />
   <image href='http://sideway.hk/images/sideway.jpg' height='100' width='100' x='100' y='200' preserveAspectRatio='xMaxYMid slice'/>
   <rect width='40' height='100' x='200' y='80' fill='green' />
   <image href='http://sideway.hk/images/sideway.jpg' width='40' height='100' x='200' y='80' preserveAspectRatio='xMidYMax slice'/>
   <rect width='100' height='100' x='200' y='200' fill='green' />
   <image href='http://sideway.hk/images/sideway.jpg' height='100' width='100' x='200' y='200' preserveAspectRatio='xMinYMid slice'/>
   <rect width='40' height='100' x='300' y='80' fill='green' />
   <image href='http://sideway.hk/images/sideway.jpg' width='40' height='100' x='300' y='80' preserveAspectRatio='xMidYMin meet'/>
   <rect width='100' height='100' x='300' y='200' fill='green' />
   <image href='http://sideway.hk/images/sideway.jpg' height='100' width='100' x='300' y='200' preserveAspectRatio='xMaxYMid meet'/>
   <rect width='40' height='100' x='400' y='80' fill='green' />
   <image href='http://sideway.hk/images/sideway.jpg' width='40' height='100' x='400' y='80' preserveAspectRatio='xMidYMax meet'/>
   <rect width='100' height='100' x='400' y='200' fill='green' />
   <image href='http://sideway.hk/images/sideway.jpg' height='100' width='100' x='400' y='200' preserveAspectRatio='xMinYMid meet'/>
</svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='495' y='17' font-size='20'>(500,0)</text>
<text x='5' y='445' font-size='20'>(0,400)</text>
<text x='495' y='445' font-size='20'>(500,400)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='525' cy='25' r='2' fill='black'/>
<circle cx='25' cy='425' r='2' fill='black'/>
<circle cx='525' cy='425' r='2' fill='black'/>
</svg>

HTML Web Page Embedded Output:

We observe that:

Images may overlap. Each of the instances of the "path6b.svg" file overlaps with other images.
Transparency, if it exists in the file, is preserved.
By default a bitmapped image stretches to fill the rectangle provided.
We may preserve the aspect ratio of an image.

It is also important to note that as of this writing, Firefox does not appear to support .svg file types in the <image> tag and both Chrome and Safari seem to have some oddities associated with aspect ratios in this context. (Similar issues can be observed vis á vis browser support for the <img> tag in HTML.) SMIL animation (discussed later) does not seem to be supported by content in the <image> tag — that is, a .svg file containing SMIL will not currently be animated when imported via <image>. It is also worth noting that if and when the other browsers do offer support for .svg file types, syntax of the following sort may be preferred since it is namespace-aware:

Alternatively, we will frequently include an attribute assignment which reads

xmlns:xlink=http://www.w3.org/1999/xlink

in the opening <svg> tag. This allows the XML definition of all such compound attributes beginning with "xlink" as in xlink:href="url(#r)" to be interpreted properly throughout the document.

<text>

Putting text on a page is a natural thing to do. Future versions of SVG are likely to offer more possibilities than we have at the moment and browser support for text seems to be poised for improvement. Right now one should be aware that there are some problems associated with the appearance of text across browsers.

Nevertheless a few simpler things may be done reliably, simply and consistently. Here's a sort of simplest case:

SVG Code Input:

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

    
<svg width='550' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <text x='0' y='100' font-size='80' fill='red'> Doing text</text>
</svg>

HTML Web Page Embedded Output:

The dimensions of the text (obtained by using the method getBBox(), discussed in later chapters) varies a bit between browsers as shown in table 2 below. Interestingly, similar differences remain in effect even when font-family="monospace" is specified (which was unsupported in FF1.5).

Table 2: Results returned by different browsers for the `getBBox()` function
Browser	Left	Top	Bottom	Right
ASV+IE	6.15	42.72	115.79	359.48
FF1.5	6	42	117	358
Opera 9	-0.14	28.47	118.53	337.37

Similar results would be observed for HTML since a fundamental premise of the web has been that font support and layout is a choice left to the browser software.

The W3C SVG specification reveals that SVG fonts should be equivalent to those of CSS-2, but it may be important to specify generic font families (specifically serif, sans-serif, cursive, fantasy or monospace) to increase the probability that your visitors' browsers can see them. Even so, as the following illustrates, current browser support for font-families is lagging behind the specifications.

SVG Code Input:

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

    
<svg width='550' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <text x='0' y='20' font-size='12'>Default: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789~!@#$%^&*()_+-=[]\{}|;':,./<>?</text>
   <text x='0' y='40' font-size='12' font-family='serif'>serif: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789~!@#$%^&*()_+-=[]\{}|;':,./<>?</text>
   <text x='0' y='60' font-size='12' font-family='sans-serif'>sans-serif: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789~!@#$%^&*()_+-=[]\{}|;':,./<>?</text>
   <text x='0' y='80' font-size='12' font-family='cursive'>cursive: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789~!@#$%^&*()_+-=[]\{}|;':,./<>?</text>
   <text x='0' y='100' font-size='12' font-family='fantasy'>fantasy: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789~!@#$%^&*()_+-=[]\{}|;':,./<>?</text>
   <text x='0' y='120' font-size='12' font-family='monospace'>monospace: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789~!@#$%^&*()_+-=[]\{}|;':,./<>?</text>
   <text x='0' y='140' font-size='12' font-family='times'>times: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789~!@#$%^&*()_+-=[]\{}|;':,./<>?</text>
   <text x='0' y='160' font-size='12' font-family='arial'>arial: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789~!@#$%^&*()_+-=[]\{}|;':,./<>?</text>
   <text x='0' y='180' font-size='12' font-family='courier'>courier: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789~!@#$%^&*()_+-=[]\{}|;':,./<>?</text>
   <text x='0' y='200' font-size='12' font-family='emoji'>emoji: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789~!@#$%^&*()_+-=[]\{}|;':,./<>?</text>
   <text x='0' y='220' font-size='12' font-family='math'>math: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789~!@#$%^&*()_+-=[]\{}|;':,./<>?</text>
   <text x='0' y='240' font-size='12' font-family='fangsong'>fangsong: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789~!@#$%^&*()_+-=[]\{}|;':,./<>?</text>
</svg>

HTML Web Page Embedded Output:

The specification also provides dozens of other ways of controlling the appearance of text, some of which have been implemented in existing browsers. Below is a sampling of some effects that are possible in at least some browsers already:

SVG Code Input:

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

    
<svg width='550' height='250' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <text x='0' y='20' font-size='15' fill='green' >Default font-size='15' fill='green' : ABC is abc</text>
   <text x='0' y='40' font-size='15' fill='green'  font-style='oblique'>font-style='oblique': ABC is abc</text>
   <text x='0' y='60' font-size='15' fill='green'  font-style='italic'>font-style='italic': ABC is abc</text>
   <text x='0' y='80' font-size='15' fill='green'  font-weight='bold'>font-weight='bold': ABC is abc</text>
   <text x='0' y='100' font-size='15' fill='green'  letter-spacing='2'>letter-spacing ='2.0': ABC is abc</text>
   <text x='0' y='115' font-size='15' fill='green'  letter-spacing='-0.5'>letter-spacing='-0.5': ABC is abc</text>
   <text x='0' y='140' font-size='15' fill='green'  text-decoration='overline'>text-decoration='overline': ABC is abc</text>
   <text x='0' y='160' font-size='15' fill='green'  text-decoration='line-through'>text-decoration='line-through: ABC is abc</text>
   <text x='0' y='180' font-size='15' fill='green'  text-decoration='underline'>text-decoration='underline': ABC is abc</text>
   <text x='0' y='200' font-size='15' fill='green' word-spacing='-0.5'>word-spacing='-0.5': ABC is abc</text>
   <text x='0' y='215' font-size='15' fill='green' word-spacing='2'>word-spacing ='2.0':  ABC is abc</text>
   <text x='0' y='245' font-size='34' fill='green'  stroke='red'>font-size='34'stroke='red': ABC is abc</text>
</svg>

HTML Web Page Embedded Output:

As of Spring 2009 all five of the primary browsers now support text effects such as shown below.

SVG Code Input:

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

    
<svg width='550' height='200' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <defs>
       <path id='curve' d='M 10 100 C 200 30 300 250 350 50' fill='none' stroke-width='0.5' />
   </defs>
   <text style='font-family:ariel;font-size:16'>
       <textPath href='#curve'>Hello, here is some text lying along a bezier curve................abcdef</textPath>
   </text>
       <use href='#curve' stroke='red'/>
</svg>

HTML Web Page Embedded Output:

The path above is defined inside a <defs> tag which serves to define the path but without rendering it. Various flags exist which adjust the positioning of the text along the path, many of which seem not yet to be supported by browsers. One exception is the startOffset attribute of the <textPath> which provides a distance in pixels from the beginning of the curve, where the text will actually begin. When animated with SMIL (see Chapter 4), this attribute makes the text appear to crawl along the curve with speed determined by the SMIL.

The rate at which browser improvement is bringing new features forward would render quite out-of-date any attempt to state a list of currently supported features, but suffice it to say, there are major browser differences here at the current time.

Sources and References

https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#read_book

Content

SVG Basics

Simple objects

Paths: Q — Quadratic Bézier curves.

Paths: C — Cubic Bézier curves.

Paths: A — Elliptical arc.

Opacity

<image>

<text>

Sources and References