HTML and CSS Reference
In-Depth Information
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”
<svg width=”100%” height=”100%” version=”1.1”
<polygon points=”220,100 290,220 150,220”
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.” xmlns:xlink=”http://www.”>
<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”
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.
Search WWH ::

Custom Search