Using the SVG marker Element

Remarks

Listing 2.7 contains an SVG defs element that specifies the two end points of a line segment. Notice the four SVG use elements, each of which references the same line segment by the value of its id attribute (which is lineDefinition1 ) in order to render four parallel line segments. The start point for each of the four line segments is specified by the value of the x attribute and the y attribute that is listed inside each SVG use element. This technique is convenient when there are multiple objects with the same dimensions. The code is compact because you specify the definition of the object once; moreover, it's much easier to update the defined object instead of making the same change in multiple locations (imagine updating the width of several thousand rectangles!).

By the way, if nothing is rendered in your browser, make sure that you did not inadvertently forget the '#' symbol (that can easily happen when you're in a hurry). Each line segment contains a different left end point that is determined by the value of the x attribute and the y attribute. The attribute stroke-dasharray determines the dot and dash pattern. Usually this attribute consists of one or more pairs of numbers, where each pair specifies the length of a line segment followed by the length of white space. (Can you guess what will happen with an odd number of numbers ? Try it and see if you were right!)

You can also specify values for the stroke , stroke-width , and stroke-dasharray attributes when using SVG elements such as rect and ellipse . The judicious choice of values for these attributes can add vividness to histograms, line graphs, and pie charts .

Using SVG Embedded Stylesheets

Consider the pair of nested rectangles in Figure 2.6.

Figure 2.6: A pair of nested rectangles.

The SVG document in Listing 2.8 uses a stylesheet in order to render a nested pair of rectangles.

Listing 2.8 style1.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="800" height="500"> <style type="text/css"> rect { stroke-width:4; stroke:blue; fill:red; } </style> <rect x="50" y="50" width="200" height="200"/> <rect x="100" y="100" width="100" height="100"/> </svg>

Remarks

The stylesheet in Listing 2.8 specifies a set of name /value pairs that are applied to every occurrence of the SVG rect element. As a result, the SVG rect elements do not need to specify the attributes defined in the stylesheet. Moreover, the process of adding, removing, or modifying attribute values becomes very straightforward; simply make the necessary change in the stylesheet and those modifications will be applied to the corresponding elements. The stylesheet in Listing 2.8 can easily be extended to other SVG elements. For example, you could add the following snippet that would affect all the SVG ellipse elements:

ellipse { stroke-width:8; stroke:green; fill:yellow; }

---