Home > Articles

Basic SVG Elements and Shapes

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

In This Chapter

  • The line Element

  • The rect Element

  • The circle Element

  • The ellipse Element

  • The polyline Element

  • The polygon Element

  • Color in SVG

  • Gradients in SVG

  • SVG Patterns

  • SVG DOM Interfaces for the SVG Basic Shapes

  • Other SVG DOM Interfaces

SVG provides several elements that describe commonly used graphic shapes.

In this chapter, we will examine six of the SVG elements that provide basic graphic shapes we can use, and reuse, as visual components. In particular, we will examine in detail the following elements and many of their attributes that SVG provides for a developer to modify the visual appearance produced by an SVG rendering engine:

  • The line element, which describes a straight line

  • The rect element, which describes a rectangle or square

  • The circle element, which describes a circle

  • The ellipse element, which describes an ellipse

  • The polyline element, which describes a shape created by a number of straight lines

  • The polygon element, which describes a closed multisided shape with straight edges

Each basic graphic shape will be described in this chapter. We will describe and demonstrate the ways in which each shape can be used and explore the techniques to use the permitted attributes to alter the visual appearance of each shape. In addition, we will also describe the interfaces in the Document Object Model that relate to each shape.

Not all SVG shapes can be described using the graphic shapes discussed in this chapter. The path element can express any arbitrary shape and is described in Chapter 6, "Paths in SVG." In this chapter, the focus is on static graphic shapes. The techniques to animate SVG graphic shapes are described in Chapter 11, "SVG Animation Elements." In addition, each of the SVG basic graphic shapes may be used in clipping paths, which are described in Chapter 9, "Clipping, Masking, Compositing."

In addition to the basic graphic shapes, the syntax for use of gradients and patterns in SVG will be described. SVG DOM interfaces relevant to the SVG basic graphic shapes, gradients, and patterns will also be described.

The line Element

The line element describes a single straight line. To draw a straight line in a coordinate system, you need to know the coordinates of each end of the line. In SVG, the coordinates of one end of the line are defined by the x1 and y1 attributes. The coordinates of the other end of the line are defined by x2 and y2 attributes.

Listing 3.1 shows four straight lines, each being created using a line element.

Listing 3.1 FourLines.svg—Creating Straight Lines Using the line Element

<?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="400px" height="250px">
<line x1="50px" y1="100px" x2="350px" y2="100px" stroke="black"/>
<line x1="20px" y1="50px" x2="20px" y2="350px" stroke="black"/>
<line x1="0px" y1="0px" x2="400px" y2="250px" stroke="black"/>
<line x1="300px" y1="30px" x2="200px" y2="50px" stroke="black"/>
</svg>

Figure 3.1 shows the onscreen appearance of Listing 3.1. Recall that when the value of the x attribute and the value of the y attribute equal 0, the top-left corner of the viewport is being referred to. The viewport is the area (of the potentially infinite SVG canvas) which is rendered onscreen.

Figure 3.1 Four lines created using the SVG line element.

The onscreen appearance of these lines is dull. No style information is present on the line elements in Listing 3.1. Listing 3.2 shows some possible ways in which we can style line elements.

Listing 3.2 FourLinesStyled.svg—Applying Style Information to line Elements

<?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="400px" height="250px">
<line x1="50px" y1="100px" x2="350px" y2="100px"
 style="stroke:red; stroke-width:5" />
<line x1="20px" y1="50px" x2="20px" y2="350px"
 stroke="green" stroke-width="2" />
<line x1="0px" y1="0px" x2="400px" y2="250px"
 style="stroke:blue; fill:none; stroke-dasharray:9,9;"/>
<line x1="300px" y1="30px" x2="200px" y2="50px"
 style="stroke:blue; fill:none; stroke-dasharray:3,3;"/>
</svg>

The appearance produced by Listing 3.2 is shown in Figure 3.2.

Figure 3.2 Styling applied to the four lines.

You may wonder why it is necessary to specify fill:none; for the third and fourth line elements in Listing 3.2. If you don't do so, as in Listing 3.3, a faint gray line will appear onscreen in Adobe SVG Viewer 3.

Listing 3.3 TwoLinesStyled.svg—The Need for Specifying No Fill on Dashed line Elements

<?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="400px" height="250px">
<line x1="0px" y1="0px" x2="400px" y2="250px"
 style="stroke:blue; stroke-width:5; fill:none; stroke-dasharray:9,9;"/>
<line x1="0px" y1="20px" x2="400px" y2="270px"
 style="stroke:blue; stroke-width:5; stroke-dasharray:9,9;"/>
</svg>

Figure 3.3 shows the two lines zoomed in the Adobe SVG Viewer.

Figure 3.3 The effect of the presence and absence of fill:none on a dashed line element.

We don't need to specify fill:none on a solid line—the color of the stroke will completely cover the faint gray default line produced in the Adobe Viewer.

You can specify opacity for the line element either by adding an opacity attribute or specifying an opacity property within a style attribute. The latter technique is used in Listing 3.4.

Listing 3.4 ThreeSimpleLines.svg—Opacity of Three Lines

<?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="300">
<line x1="20" y1="20" x2="220" y2="20"
 style="stroke:#FF0000; stroke-width:4; opacity:0.1"/>
<line x1="20" y1="120" x2="220" y2="120"
 style="stroke:#FF0000; stroke-width:4; opacity:0.4"/>
<line x1="20" y1="220" x2="220" y2="220"
 style="stroke:#FF0000; stroke-width:4; opacity:1"/>
</svg>

Figure 3.4 shows the visual effect, slightly zoomed, of three levels of opacity on otherwise identical lines.

Figure 3.4 Three lines of different opacity values.

In Figure 3.4, you will notice that the topmost of the three lines is fairly faint, due to its opacity being only 0.1. The bottom line is fully opaque, having an opacity of 1, and the middle line is semitransparent, having an opacity of 0.4.

We can use line elements to create the axes of a graph, as well as the scale marks for each axis. Listing 3.5 shows the use of line elements to create the skeleton of a graph. The comments within the code indicate the purpose of each line element.

Listing 3.5 GraphAxes.svg—A Skeleton for a Graph Created with line Elements

<?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="400">
<!-- The vertical axis -->
<line x1="40" y1="360" x2="40" y2="40"
 style="stroke:#000000; stroke-width:0.5;"/>

<!-- The scale marks on the vertical axis -->
<line x1="40" y1="110" x2="48" y2="110"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="40" y1="160" x2="48" y2="160"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="40" y1="210" x2="48" y2="210"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="40" y1="260" x2="48" y2="260"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="40" y1="310" x2="48" y2="310"
 style="stroke:#000000; stroke-width:0.5;"/>

<!-- The horizontal axis -->
<line x1="40" y1="360" x2="550" y2="360"
 style="stroke:#000000; stroke-width:0.5;"/>

<!-- The scale marks on the horizontal axis -->
<line x1="80" y1="360" x2="80" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="120" y1="360" x2="120" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="160" y1="360" x2="160" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="200" y1="360" x2="200" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="240" y1="360" x2="240" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="280" y1="360" x2="280" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="320" y1="360" x2="320" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="360" y1="360" x2="360" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="400" y1="360" x2="400" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="440" y1="360" x2="440" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="480" y1="360" x2="480" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="520" y1="360" x2="520" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
</svg>

As you can see in Figure 3.5, using only the line element, we can create the basis of a graph in SVG. Clearly, to create a more respectable graph, we will need to learn how to control the display of text in SVG, which is described in Chapter 8, "Laying Out Text in SVG."

Figure 3.5 Creating the framework for a graph using line elements.

It is straightforward to add further line elements to produce a bar chart, which might indicate monthly sales for a particular product or division of a corporation. This procedure is shown in Listing 3.6.

Listing 3.6 GraphAxes02.svg—Adding Bars to the Graph

<?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="400">
<!-- The vertical axis -->
<line x1="40" y1="360" x2="40" y2="40"
 style="stroke:#000000; stroke-width:0.5;"/>

<!-- The scale marks on the vertical axis -->
<line x1="40" y1="110" x2="48" y2="110"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="40" y1="160" x2="48" y2="160"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="40" y1="210" x2="48" y2="210"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="40" y1="260" x2="48" y2="260"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="40" y1="310" x2="48" y2="310"
 style="stroke:#000000; stroke-width:0.5;"/>

<!-- The horizontal axis -->
<line x1="40" y1="360" x2="550" y2="360"
 style="stroke:#000000; stroke-width:0.5;"/>

<!-- The scale marks on the horizontal axis -->
<line x1="80" y1="360" x2="80" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="120" y1="360" x2="120" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="160" y1="360" x2="160" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="200" y1="360" x2="200" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="240" y1="360" x2="240" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="280" y1="360" x2="280" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="320" y1="360" x2="320" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="360" y1="360" x2="360" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="400" y1="360" x2="400" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="440" y1="360" x2="440" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="480" y1="360" x2="480" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>
<line x1="520" y1="360" x2="520" y2="352"
 style="stroke:#000000; stroke-width:0.5;"/>

<!-- The lines representing monthly sales -->
<line x1="83" y1="360" x2="83" y2="250"
 style="stroke:#FF0000; stroke-width:4;"/>
<line x1="123" y1="360" x2="123" y2="240"
 style="stroke:#FF0000; stroke-width:4;"/>
<line x1="163" y1="360" x2="163" y2="230"
 style="stroke:#FF0000; stroke-width:4;"/>
<line x1="203" y1="360" x2="203" y2="240"
 style="stroke:#FF0000; stroke-width:4;"/>
<line x1="243" y1="360" x2="243" y2="210"
 style="stroke:#FF0000; stroke-width:4;"/>
<line x1="283" y1="360" x2="283" y2="220"
 style="stroke:#FF0000; stroke-width:4;"/>
<line x1="323" y1="360" x2="323" y2="230"
 style="stroke:#FF0000; stroke-width:4;"/>
<line x1="363" y1="360" x2="363" y2="220"
 style="stroke:#FF0000; stroke-width:4;"/>
<line x1="403" y1="360" x2="403" y2="240"
 style="stroke:#FF0000; stroke-width:4;"/>
<line x1="443" y1="360" x2="443" y2="190"
 style="stroke:#FF0000; stroke-width:4;"/>
<line x1="483" y1="360" x2="483" y2="210"
 style="stroke:#FF0000; stroke-width:4;"/>
<line x1="523" y1="360" x2="523" y2="200"
 style="stroke:#FF0000; stroke-width:4;"/>
</svg>

Figure 3.6 shows the bars added to the skeleton of the graph.

Figure 3.6 Creating bars of a bar graph using line elements.

The line element, in common with many other SVG elements, can be animated using declarative SVG animations. SVG declarative animations are discussed in Chapter 11.

  • + Share This
  • 🔖 Save To Your Account