Implement and manipulate document structures and objects - Programming in HTML5 with JavaScript and CSS3 - page 57

In this example, the <rect> element was used to create the background rectangle, and a
series of <circle> elements were used to create the lights. Each SVG shape requires the same
types of parameters as their canvas counterpart, and the same rules apply. The <rect> ele-
ment needs an (x,y) coordinate to establish where it should be drawn, along with a width and
height to establish the size. The same is true for each circle, except that you specify the radius
for the size. The ill attribute sets the color to be used to fill the shape.
SVG also supports the same basic shape-drawing functions as the canvas context. The
following code segment shows the use of the polyline, polygon, line, and ellipse and produces
the output shown in Figure 1-43:
<svg>
<polygon points="10,15 30,35 10,85 100,85, 70,35,100,15" fill="purple"/>
<polyline points="10,150 30,170 50,132 62,196 78,165 96,170"
style="stroke:orange; fill:none; stroke-width:5;"/>
<line x1="150" y1="100" x2="150" y2="150" style="stroke:blue;stroke-width:3"/>
<ellipse cx="250" cy="150" rx="30" ry="55" fill="green"/>
<text x="10" y="10" style="stroke: black;stroke-width:1;">
Examples of SVG Shapes and Text</text>
</svg>
FIGURE 1-43 Text, a line, a polygon, an ellipse, and a polyline drawn in different colors
EXAM TIP
In some cases, using SVG graphics is simpler than using the <canvas> element. As the
examples have shown, you can create SVG images declaratively directly within the HTML
itself. However, as you increase the number of objects in an SVG rendering, performance
can become a concern. In cases where performance is a consideration, using the <canvas>
element is a preferable approach.