Using External Stylesheets

---

Using External Stylesheets and Classes

Consider the nested rectangles in Figure 2.7.

Figure 2.7: Rendering nested rectangles with an external stylesheet.

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

Listing 2.12 style4.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"> <?xml-stylesheet type="text/css" href="externalStyle2.css" ?> <svg width="800" height="500">   <rect   x="50"  y="50"                         width="200" height="200"/>   <rect  x="100" y="100"                         width="100" height="100"/> </svg>

Listing 2.13 defines two classes and the style-related attributes in those two classes.

Listing 2.13 externalStyle2.svg

.Larger {  stroke-width:4;   stroke:blue;   fill:red; } .Smaller {   stroke-width:8;   stroke:yellow;   fill:green; }

Remarks

The use of classes in a stylesheet gives you finer granularity in terms of how you want to apply a set of attributes to an SVG element. For example, you can specify the class Larger for one SVG rect element and then specify the class Smaller for a second SVG rect element. Compare this functionality with that of the following stylesheet:

rect {  stroke-width:4;   stroke:blue;   fill:red; }

The stylesheet definition in Listing 2.12 is applied to all SVG rect elements in your SVG document. If this definition is sufficient for your needs, then feel free to use it. On the other hand, if it's likely that you'll need a finer degree of granularity for your stylesheet, then it might be advisable to start with class definitions rather than retro-fitting them at a later stage.

---