4.2. Using Styles with SVG

SVG lets you specify presentational aspects of a graphic in four ways; with inline styles, internal stylesheets, external stylesheets, and presentation attributes. Let's examine each of these in turn.

4.2.1. Inline Styles

Example 4-1 uses inline styles. This is exactly the way we've been using presentation information so far; we set the value of the style attribute to a series of visual properties and their values as described in Appendix B, in Section B.1.

Example 4-1. Use of inline styles

<circle cx="20" cy="20" r="10"
    style="stroke: black; stroke-width: 1.5; fill: blue; fill-opacity: 0.6"/>

					  

4.2.2. Internal Stylesheets

You don't need to place your styles inside each SVG element; you can create an internal stylesheet to collect commonly-used styles that you can apply to all occurrences of a particular element, or use as named classes to apply to individual elements. Example 4-2 sets up an internal stylesheet that will draw all circles in a blue double-thick dashed line with a light yellow interior. We have placed the stylesheet within a <defs> element, which we will discuss later in this chapter.

The example then draws several circles. The circles in the second row of Figure 4-2 have inline styles that override the specification in the internal stylesheet.

Example 4-2. Use of internal stylesheet

<svg width="200px" height="200px" viewBox="0 0 200 200">
<defs>
<style type="text/css"><![CDATA[
    circle {
        fill: #ffc;
        stroke: blue;
        stroke-width: 2;
        stroke-dasharray: 5 3
    }     
    ]]></style>
</defs>

<circle cx="20" cy="20" r="10"/>
<circle cx="60" cy="20" r="15"/>
<circle cx="20" cy="60" r="10" style="fill: #cfc"/>
<circle cx="60" cy="60" r="15" style="stroke-width: 1; 
    stroke-dasharray: none;"/>
</svg>

4.2.3. External Stylesheets

If you want to apply a set of styles to multiple SVG documents, you could copy and paste the internal stylesheet into each of them. This, of course, is impractical for a large volume of documents if you ever need to make a global change to all the documents. Instead, you should take all the information between the beginning and ending <style> tags (excluding the <![CDATA[ and ]]>) and save it in an external file, which becomes an external stylesheet. Example 4-3 shows an external stylesheet that has been saved in a file named ext_style.css This stylesheet uses a variety of selectors, including *, which sets a default for all elements that don't have any other style, and it, together with the SVG, produces Figure 4-3.

Example 4-3. External stylesheet

* { fill:none; stroke: black; } /* default for all elements */

rect { stroke-dasharray: 7 3; }

circle.yellow { fill: yellow; }

.thick { stroke-width: 5; }

.semiblue { fill:blue; fill-opacity: 0.5; }

Example 4-4 shows a complete SVG document (including <?xml ...?>, <?xml-stylesheet ...?>, and the <!DOCTYPE>) that references the external stylesheet.

Example 4-4. SVG file that references an external stylesheet

<?xml version="1.0"?>
<?xml-stylesheet href="ext_style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200px" height="200px" viewBox="0 0 200 200"
    preserveAspectRatio="xMinYMin meet">

<line x1="10" y1="10" x2="40" y2="10"/>
<rect x="10" y="20" width="40" height="30"/>
<circle class="yellow" cx="70" cy="20" r="10"/>
<polygon class="thick" points="60 50, 60 80,  90 80"/>
<polygon class="thick semiblue"
    points="100 30, 150 30, 150 50, 130 50"/>
</svg>

Inline styles will almost always render more quickly than styles in an internal or external stylesheet; stylesheets and classes add rendering time due to look up and parsing.

4.2.4. Presentation Attributes

Although the overwhelming majority of your SVG documents will use styles for presentation information, SVG does permit you to specify this information in the form of presentation attributes. Instead of saying:

<circle cx="10" cy="10" r="5"
    style="fill: red; stroke:black; stroke-width: 2;"/>

You may write each of the properties as an attribute:

<circle cx="10" cy="10" r="5"
    fill="red" stroke="black" stroke-width="2"/>

If you are thinking that this is mixing structure and presentation, you are right. Presentation attributes do come in handy, though, when you are creating SVG documents by converting an XML data source to SVG, as you will see in Chapter 12. In these cases it can be easier to create individual attributes for each presentation property than to create the contents of a single style attribute. You may also need to use presentation attributes if the environment in which you will be placing your SVG cannot support stylesheets.

Presentation attributes are at the very bottom of the priority list. Any style specification coming from an inline, internal, or external stylesheet will override a presentation attribute. In the following SVG document, the circle will be filled in red, not green.

<svg width="200" height="200">
    <defs>
    <style type="text/css"><![CDATA[
        circle { fill: red; }
    ]]></style>
    </defs>
    <circle cx="20" cy="20" r="15" fill="green"/>
</svg>

Again, we emphasize that using style attributes or stylesheets should always be your first choice. Stylesheets let you apply a complex series of fill and stroke characteristics to all occurrences of certain elements within a document without having to duplicate the information into each element, as presentation attributes would require. The power and flexibility of stylesheets allow you to make significant changes in the look and feel of multiple documents with a minimum of effort.