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

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.

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

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

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."

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.