Embedded Stylesheets and CDATA

---

Using External Stylesheets

The SVG document in Listing 2.10 uses an external stylesheet in order to render a pair of nested rectangles as listed in Figure 2.6.

Listing 2.10 style3.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="externalStyle1.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.11 contains three SVG style-related attributes that are applied to SVG rect elements.

Listing 2.11 externalStyle1.svg

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

Remarks

The external stylesheet in Listing 2.11 contains the same information as the internal stylesheet in Listing 2.9. You can specify attribute name/value pairs in an external stylesheet and then include the external stylesheet in your SVG documents. This feature allows you to centralize definitions in an external file and then include the external file in multiple SVG documents. You can edit the external file and the new contents will be automatically applied to all the SVG documents that include the external file. Since you do not need to modify the SVG documents themselves, this approach can simplify your maintenance chores.

---