Example 1-6. Demonstration of the rectangle element

<svg width="200px" height="200px" viewBox="0 0 200 200">
   <!-- black interior, no outline -->
   <rect x="10" y="10" width="30" height="50"/>

   <!-- no interior, black outline -->
   <rect x="50" y="10" width="20" height="40"
      style="fill: none; stroke: black;"/>

   <!-- blue interior, thick semi-transparent red outline -->
   <rect x="10" y="70" width="25" height="30"
      style="fill: #0000ff;
         stroke: red; stroke-width: 7; stroke-opacity: 0.5;"/>

   <!-- semi-transparent yellow interior, dashed green outline -->
   <rect x="50" y="70" width="35" height="20"
       style="fill: yellow; fill-opacity: 0.5;
          stroke: green; stroke-width: 2; stroke-dasharray: 5 2"/>
</svg>

Figure 1-6. Demonstration of the rect element

NOTE: Since the strokes that form the outline "straddle" the abstract grid lines, the strokes will be half inside the shape and half outside the shape. Figure 1-7 (see additional color insert), a closeup of the semi-transparent red outline drawn in Example 1-6, shows this clearly.

Figure 1-7. Closeup of transparent border

If you do not specify a starting x or y value, it is presumed to be zero. If you specify a width or height of zero, then the rectangle is not displayed. It is an error to provide negative values for either width or height.

Rounded Rectangles

Example 1-7. Demonstration of rounded rectangles

<svg width="200px" height="200px" viewBox="0 0 200 200">
   <!-- rx and ry equal, increasing -->
   <rect x="10" y="10" width="20" height="40" rx="2" ry="2"
       style="stroke: black; fill: none;"/>

   <rect x="40" y="10" width="20" height="40" rx="5"
       style="stroke: black; fill: none;"/>

   <rect x="70" y="10" width="20" height="40" ry="10"
       style="stroke: black; fill: none;"/>

   <!-- rx and ry unequal -->
   <rect x="10" y="60" width="20" height="40" rx="10" ry="5"
       style="stroke: black; fill: none;"/>

   <rect x="40" y="60" width="20" height="40" rx="5" ry="10"
       style="stroke: black; fill: none;"/>
</svg>

Figure 1-8 shows the result, with a grid in the background for reference.

Figure 1-8. Demonstration of rounded rectangles

To draw a circle, use the <circle> element and specify the center x-coordinate, center y-coordinate, and radius with the cx, cy, and r attributes. As with a rectangle, the default is to fill the circle with black and draw no outline unless you specify some other combination of fill and stroke.

An ellipse also needs an x-radius and a y-radius in addition to a center x- and y-coordinate. The attributes for these radii are named rx and ry.

In both circles and ellipses, if the cx or cy is omitted, it is presumed to be zero. If the radius is zero, no shape will be displayed; it is an error to provide a negative radius. Example 1-8 draws some circles and ellipses which are shown in Figure 1-9.

Example 1-8. Demonstration of circles and ellipses

<svg width="200px" height="200px" viewBox="0 0 200 200">
   <circle cx="30" cy="30" r="20" style="stroke: black; fill: none;"/>
   <circle cx="80" cy="30" r="20"
      style="stroke-width: 5; stroke: black; fill: none;"/>

   <ellipse cx="30" cy="80" rx="10" ry="20" 
      style="stroke: black; fill: none;"/>
   <ellipse cx="80" cy="80" rx="20" ry="10" 
      style="stroke: black; fill: none;"/>
</svg>

Figure 1-9. Demonstration of circle and ellipse elements

In addition to rectangles, circles, and ellipses, you may want to draw hexagons, octagons, stars, or arbitrary closed shapes. The <polygon> element lets you specify a series of points that describe a geometric area to be filled and outlined as described earlier. The points attribute consists of a series of x- and y-coordinate pairs separated by commas or whitespace. You must give an even number of entries in the series of numbers. You don't have to return to the starting point; the shape will automatically be closed. Example 1-9 uses the <polygon> element to draw a parallelogram, a star, and an irregular shape.

Example 1-9. Demonstration of the polygon element

<svg width="200px" height="200px" viewBox="0 0 200 200">
    <!-- parallelogram -->
    <polygon points="15,10  55, 10  45, 20  5, 20"
        style="fill: red; stroke: black;"/>

    <!-- star -->
    <polygon
        points="35,37.5  37.9,46.1 46.9,46.1  39.7,51.5
            42.3,60.1  35,55  27.7,60.1  30.3,51.5
            23.1,46.1  32.1,46.1"
        style="fill: #ccffcc; stroke: green;"/>

    <!-- weird shape -->
    <polygon 
        points="60 60,  65 72,  80 60,  90 90, 72 80, 72 85, 50 95"
        style="fill: yellow; fill-opacity: 0.5; stroke: black;
            stroke-width: 2;"/> 
</svg>

The results, with a grid in the background for reference, are displayed in Figure 1-10.

Figure 1-10. Demonstration of the polygon element

Filling Polygons That Have Intersecting Lines

For the polygons shown so far, it's been easy to fill the shape. Since none of the lines forming the polygon cross over one another, the interior is easily distinguished from the exterior of the shape. However, when lines cross over one another, the determination of what is inside the polygon is not as easy. The SVG in Example 1-10 draws such a polygon. In Figure 1-11, is the middle section of the star considered to be inside or outside?

Example 1-10. Unfilled polygon with intersecting lines

<svg width="200px" height="200px" viewBox="0 0 200 200">

<polygon  points="48,16  16,96  96,48  0,48  80,96"
    style="stroke: black; fill: none;"/>

</svg>

Figure 1-11. Unfilled polygon with intersecting lines

Example 1-11. Effect of different fill-rules

<svg width="200px" height="200px" viewBox="0 0 200 200">

<polygon style="fill-rule: nonzero; fill: yellow; stroke: black;"
    points="48,16  16,96  96,48  0,48  80,96" />

<polygon style="fill-rule: evenodd;  fill: #00ff00; stroke: black;"
    points="148,16  116,96  196,48  100,48  180,96" />

</svg>

Figure 1-12. Effect of different fill-rules

Explanation of the Fill Rules For the sake of completeness, we are describing how these fill-rules work, but you don't need to know the details in order to use them. The "nonzero" rule determines whether a point is inside or outside a polygon by drawing a line from the point in question to infinity. It counts how many times that line crosses the polygon's lines, adding one if the polygon line is going right to left, and subtracting one if the polygon line is going left to right. If the total comes out to zero, the point is outside the polygon. If the total is nonzero (hence the name) the point is inside the polygon. The "evenodd" rule also draws a line from the point in question to infinity, but it simply counts how many times that line crosses your polygon's lines. If the total number of crossings is odd, then the point is inside; if even, then the point is outside.

Example 1-12. Example of the polyline element

<svg width="200px" height="200px" viewBox="0 0 200 200">

<polyline
    points="5 20, 20 20, 25 10, 35 30, 45 10,
        55 30, 65 10, 75 30, 80 20, 95 20"
    style="stroke: black; stroke-width: 3; fill: none;"/> 

</svg>

Figure 1-13. Example of the polyline element

CAUTION: It's best to set the fill property to "none" when using <polyline>; otherwise, the SVG viewer attempts to fill the shape, sometimes with startling results like those in Figure 1-14.

Figure 1-14. Example of filled polyline

Example 1-13. Values of the stroke-linecap property

<line x1="10" y1="15" x2="50" y2="15"
    style="stroke-linecap: butt; stroke-width: 15;"/>

<line x1="10" y1="45" x2="50" y2="45"
    style="stroke-linecap: round; stroke-width: 15;"/> 

<line x1="10" y1="75" x2="50" y2="75"
    style="stroke-linecap: square; stroke-width: 15;"/> 

<!-- guide lines -->
<line x1="10" y1="0" x2="10" y2="100" style="stroke: #999;"/>
<line x1="50" y1="0" x2="50" y2="100" style="stroke: #999;"/>

Figure 1-15. Values of the stroke-linecap attribute

Example 1-14. Values of the stroke-linejoin attribute

<polyline
    style="stroke-linejoin: miter; stroke: black; stroke-width: 12;
    fill: none;"
    points="30 30, 45 15, 60 30"/> 

<polyline
    style="stroke-linejoin: round; stroke: black; stroke-width: 12;
    fill: none;"
    points="90 30, 105 15, 120 30"/> 

<polyline
    style="stroke-linejoin: bevel; stroke-width: 12; stroke: black;
    fill: none;"
    points="150 30, 165 15, 180 30"/> 

Figure 1-16. Values of the stroke-linejoin attribute

NOTE: If your lines meet at a sharp angle and have a mitered join, it's possible for the pointed part to extend beyond the lines' thickness. You may set the ratio of the miter to the thickness of the lines being joined with the "stroke-miterlimit" style property; its default value is 4.

Shape Elements

Table 1-1 summarizes the basic shapes available in SVG.

Table 1-1. Table of shape elements

In all but the last two elements of Table 1-1, you may specify the attributes as simple numbers, in which case they will be presumed to be measured in user coordinates, or you may add a length unit specifier such as mm, pt, etc. For example:

<line x1="1cm" y1="30" width="50" height="10pt"/>

Specifying Colors

• "none", indicating that no outline is to be drawn or that the shape is not to be filled.

• A color name, which is one of "aqua", "black", "blue", "fuchsia", "gray", "green", "lime", "maroon", "navy", "olive", "purple", "red", "silver", "teal", "white", or "yellow".

• Six hexadecimal digits #rrggbb, each pair describing red, green, and blue values.

• Three hexadecimal digits #rgb, describing the red, green, and blue values. This is a shorthand for the previous method; digits are replicated so that #rgb is equivalent to #rrggbb.

• rgb(r, g, b), each value ranging from 0-255 or from 0% to 100%.

Stroke and Fill Characteristics

In order to see a line or the outline of a shape, you must specify the stroke characteristics, using the following attributes. A shape's outline is drawn after its interior is filled. All of these characteristics, summarized in Table 1-2, are presentation properties, and go in a style attribute.

Table 1-2. Stroke characteristics

You can control the way in which the interior of a shape is to be filled by using one of the fill attributes shown in Table 1-3. A shape is filled before its outline is drawn.

Table 1-3. Fill characteristics