SVG: responsive in-browser graphics - HTML5 in Action - page 285

ers require multiple points plotted out on a Cartesian graph. Each shape accepts attributes
for fill, stroke colors/width, and even gradients. Table7.2 offers an overview on how to use
these tags.

Table 7.2. Shapes you can create with SVG and corresponding examples

Shape Formatting example

Rectangle <rect x="5" y="20" width="80" height="20" fill="#c00" />

Circle <circle cx="130" cy="43" r="20" fill="black" stroke="#aaa" stroke-width="5" />

Ellipse <ellipse cx="45" cy="130" rx="40" ry="20" fill="#00f" />

Line <line x1="110" x2="160" y1="110" y2="150" fill="#000" />

<polyline points="5 200 20 220 30 230 40 210 50 240 60 200 80 210 90 190 60 300 5 200"
fill="transparent" stroke="orange" stroke-width="5" />

Polyline

<polygon points="110 200 110 240 130 280 150 240 150 200" stroke="#0f0" fill="#000" stroke-
width="5" />

Polygon

You can combine XML tags from table 7.2 into a group as follows: <g>content</g> .
Think of groups as <div> s for storing complex shape creations. You can easily target
groups with JavaScript and CSS selectors instead of individually selecting every element
inside. Create your first group and a gradient by integrating the following listing inside
your <svg> tag.