SVG Basic Shapes

SVG provides a number of basic graphic shapes. In earlier examples, you have seen some of these in use—but without any explanation. In this section, each of the basic SVG graphics shapes is introduced.

The <rect> Element

The SVG <rect> element, not surprisingly, creates a rectangular shape. A rectangle has a width and a height, which are described by the width and height attributes on the <rect> element. The rectangle also must have a defined position on the screen: Otherwise, the SVG rendering engine has no way of knowing where on the screen the rectangle should be displayed. The position of a rectangle is defined by the x and y attributes. With those four attributes defined, the SVG rendering engine can display a basic rectangle.

Typically, we might want to control the style to be applied to the rectangle. We can do this using style properties. SVG offers several ways of defining style properties. One option is to use a style attribute within which we list style properties separated by semicolons, using a syntax similar to that in a CSS style sheet.

The code in Listing 23.12 creates a simple rectangle with a blue outline, called the “stroke” in SVG jargon, and a pale blue semi-transparent fill. Behind that rectangle is a plain green rectangle that is partly covered by the blue one. You can see in Figure 23.8 that the blue rectangle is semi-transparent.

Listing 23.12. An Image Containing Two Rectangles (TwoRectangles.svg)

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="350">
<rect x="100" y="50" width="200" height="110"
 style="fill:#009900; stroke:none;"/>
<rect x="80" y="110" width="200" height="150"
 style="fill:#CCCCFF; fill-opacity:0.5; stroke:#000099; stroke-width:3"/>
</svg>
						

The <line> Element

The SVG <line> element is used to create straight lines. We can use <line> elements to create, for example, the axes for a graph, as well as including scale marks within the graph. The <line> element has x1 and y1 attributes that define the location of one end of the line and x2 and y2 attributes that indicate the location of the other end. A <line> element might take a style attribute within which you can define the stroke color and stroke width, for example. Listing 23.13 shows a simple skeleton for a graph in SVG, which was created using <line> elements.

Listing 23.13. A Skeleton for a Graph Created Using SVG <line> Elements (GraphSkeleton.svg)

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="750" height="500">
<style type="text/css">
<![CDATA[
.axes {stroke:black; stroke-width:2}
.faint {stroke:#CCCCCC; stroke-width:0.05; opacity:0.4;}
]]>
</style>
<rect x="0" y="0" width="750" height="500" style="fill:#DDDDDD"/>
<line x1="50" y1="100" x2="700" y2="100" class="faint"/>
<line x1="50" y1="200" x2="700" y2="200" class="faint"/>
<line x1="50" y1="300" x2="700" y2="300" class="faint"/>
<line x1="150" y1="50" x2="150" y2="400" class="faint"/>
<line x1="250" y1="50" x2="250" y2="400" class="faint"/>
<line x1="350" y1="50" x2="350" y2="400" class="faint"/>
<line x1="450" y1="50" x2="450" y2="400" class="faint"/>
<line x1="550" y1="50" x2="550" y2="400" class="faint"/>
<line x1="650" y1="50" x2="650" y2="400" class="faint"/>
<line x1="50" y1="50" x2="50" y2="400" class="axes"/>
<line x1="50" y1="400" x2="700" y2="400" class="axes"/>
</svg>

The visual appearance produced by the code is shown in Figure 23.9.

You probably have noticed that in Listing 23.13 we used a different way to express style—a <style> element within which we defined styles to be applied to certain classes of elements. Thus, the <line> elements in the code have a class attribute with a value of either "axes" or "faint". The use of the <style> element is more efficient when you want to alter some aspect of style that affects many elements. If you use a <style> element rather than a style attribute, you need only make any changes in one place, rather than in each separate style attribute.

The <circle> Element

The SVG <circle> element defines a circle. We need to know the position of the center of the circle and its radius. The x coordinate for the position of the center is contained in the cx attribute, and the y coordinate is contained in the cy attribute. The radius is defined by the r attribute. In addition, we might style both the fill and the stroke of the circle. Listing 23.14 shows a simple circle.

Listing 23.14. A Circle in SVG (Circle01.svg)

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="250">
<circle cx="200" cy="125" r="70"
style="fill:red; fill-opacity:0.3; stroke:red; stroke-width:3;"/>
</svg>
						

The <ellipse> Element

An <ellipse> element describes an ellipse shape. Like a circle, an ellipse has a center—the position of which is described by cx and cy attributes. An ellipse has two radii—an x radius described by an rx attribute and a y radius described by an ry attribute. Listing 23.15 shows two ellipses—one of which is white to match the background, showing how overlapping ellipses can create interesting curved graphic shapes.

Listing 23.15. Two Overlapping Ellipses—One of Which Is Animated (TwoEllipses.svg)

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="600" height="300">
<ellipse cx="300" cy="150" rx="130" ry="50" style="fill:red;"/>
<ellipse cx="300" cy="150" rx="110" ry="50" style="fill:white;">
<animate attributeName="rx" from="110" to="125"
 begin="0s" dur="5s" repeatCount="indefinite"/>
<animate attributeName="cx" values="300; 280; 300; 290"
 keyTimes="0s; 4s; 7s; 11s" begin="0s" dur="15s" repeatCount="indefinite"/>
</ellipse>
</svg>

Figure 23.10 shows the animation part way through its cycle with a curved shape, resulting from how the two ellipses overlap at that point in the animation.

The <polyline> Element

A <polyline> element is used to draw shapes that consist of more than one straight line. Listing 23.16 shows a <polyline> element used to create a shape similar to a letter “v”.

Listing 23.16. Using the <polyline> Element to Create a V Shape (Polyline.svg)

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300" height="200">
<polyline style="fill:red; fill-opacity:0.4; stroke:red; stroke-width:2"
  points="50,50 70,150 90,50"/>
</svg>

Figure 23.11 shows the appearance produced onscreen. Notice how the space between the two lines is filled by a fill specified in the style attribute. If you omit mention of the fill, the default is black. To create a polyline shape with no fill, include within the style attribute "fill:none;".

The <polygon> Element

A <polygon> element is used to produce regular shapes with straight sides. To produce a hexagon, for example, you could use code like that in Listing 23.17.

Listing 23.17. Using the SVG <polygon> Element to Produce a Hexagon Shape (Polygon01.svg)

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="500" height="300">
<polygon style="fill:#CCCCFF; stroke:#0000CC; stroke-width:3"
  points="175,75 300,75 375,137.5 300,200 175,200 100,137.5 175,75"/>
</svg>

The hexagon has a blue outline and a pale blue fill.