HTML and CSS Reference
gon> elements are closed shapes where the last point is automatically connected back to the first while
<polyline> elements have only strokes and aren't filled.
<polygon points="75,50 100,50 75,0"
fill="#CCC" stroke="black" stroke-width="2"/>
As you can see, each point is defined as a comma-separated x and y value, and the points are separated by
You can also embed images in your SVG, but be aware that your bitmap-based images won't magically become
vector-based and will show their roots if scaled too large. As shown in the previous example, <image> tags
are written as follows:
<image xlink:href='images/penguin.png' width='32' height='32' />
<image> tags require an xlink:href attribute to define the equivalent of the DOM <img> tag src and
then an explicit width and height . If you don't provide a width and height, the element defaults to 0 by 0.
As you might expect, you can also draw text inside of SVG. You can set the font and size using the same names
as CSS— font-family and font-size —as well as position the text with x and y or transforms. The actual
text goes inside the text tag, as shown in the following example:
<text x="75" y="125" text-anchor="middle"
font-family="Verdana" font-size="10" fill="black" >
A tilted birdhouse
You can control the position of the text relative to the x and y location provided by using the text-anchor
attribute with possible values of start , middle , or end . This corresponds to left-aligned, centered-aligned
or right-aligned text.
Inside of the <text> element, you can use the <tspan> tag to mark up various pieces of text with different
styles and positions, for example:
<text x="75" y="125" font-family="Verdana" font-size="10" fill="black" >
A tilted <tspan fill="red">birdhouse</tspan>
This would result in the word birdhouse being colored red.
If you want dynamic multiline text, SVG is not the place to do it. You need to explicitly break up your text
using <tspan> elements with modified x and y locations or use multiple <text> elements. Consider placing
DOM elements over the SVG and using zIndex to control the layering order.
The final tag this section covers, <g> , is used to group elements together so that they can be styled and trans-
formed as a unit. From the preceding example: