HTML and CSS Reference
In-Depth Information
style=”fill:yellow;
stroke:red;stroke-width:5”/>
</svg>
A POLYGON shape is similar to the POLYLINE element. Using
X and Y value pairs you can draw whole polygon shapes. The fol-
lowing is an example of a triangle. Figure 3.15 shows the results.
<?xml version=”1.0” standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg width=”100%” height=”100%” version=”1.1”
xmlns=”http://www.w3.org/2000/svg”>
<polygon points=”220,100 290,220 150,220”
style=”fill:yellow;
stroke:red;stroke-width:5”/>
</svg>
The most complex drawing element you will create using SVG
is the PATH element. Each drawing you create with the PATH ele-
ment is built using a series of special codes that explain where the
line is supposed to move to on the screen. Those codes are:
• M=moveto
• L =lineto
• H=horizontallineto
• V=verticallineto
• C=curveto
• S =smoothcurveto
• Q=quadraticBelziercurveto
• T=smoothquadraticBelziercurveto
• A=ellipticalarcto
• Z=closepathto
The following code creates a smiley face illustration using the
PATH element and the codes above to create the drawing. Figure
3.16 shows the results from the code.
<?xml version=”1.0” standalone=”yes”?>
<svg version=”1.1” viewBox=”0.0 0.0 1152.0 864.0”
fill=”none” stroke=”none” stroke-linecap=”square”
stroke-miterlimit=”10” xmlns=”http://www.
w3.org/2000/svg” xmlns:xlink=”http://www.
w3.org/1999/xlink”>
<path d=”M56 108L56 108C56 66 92 32 136 32C180
32 216 66 216 108C216 150 180 184 136 184C92
184 56 150 56 108Z” fill-rule=”nonzero”
fill=”#ffff00”></path>
Figure 3.15
A triangle is created
using the POLYGON element.
Figure 3.16
The POLYLINE element
allows you to create complex
images such as this smiley face.
