- Styling SVG
- The style Attribute
- Inline CSS Property Declarations
- Creating a Style Sheet
- Grouping Styles
- Organizing Your Style Sheet
- Storing and Accessing Style Sheets
- Summary
- Q&A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Storing and Accessing Style Sheets
In many cases, you will be designing multiple SVG files that all use the same style sheet information. Rather than duplicating your style sheet information in each SVG file, you can use the third CSS style sheet option: referencing your external CSS style sheet. To try this out, create a file named style.css in the same directory as your index.html and SVG files. Then, copy the style sheet information (just the rules, not the CDATA and style elements) from the previous example and paste it into this new document. When you are finished, the "style.css" document will appear just as Listing 6.9.
Listing 6.9 Creating an External Style Sheet
01: .StrokeGreen{stroke:green;}
02: .StrokeYellow{stroke:yellow;}
03: .StrokePurple{stroke:purple;}
04: .StrokeOrange{stroke:orange;}
05:
06: .FillGreen{fill:green;}
07: .FillYellow{fill:yellow;}
08: .FillPurple{fill:purple;}
09: .FillOrange{fill:orange;}
10: .FillBlue{fill:blue;}
11: .FillPink{fill:pink;}
12: .FillBrown{fill:brown;}
13: .FillRed{fill:red;}
14: .FillBlack{fill:black;}
15: .FillWhite{fill:white;}
16:
17: .DisplayInline{display:inline;}
18: .DisplayNone{display:none;}
Now you will need your SVG document to be able to reference this external style sheet. Linking your SVG file to this external style sheet is quite easy. First, using Listing 6.6 as a starting point, remove the style element and its contents (lines 7 through 12). Then, add the line <?xml-stylesheet href="style.css" type="text/css"?> to the document header information (see line 2 in Listing 6.10).
NOTE
Should you have moved the style.css file outside of the directory where you've been saving your SVG and HTML files, you could set the directory path information accordingly. In such a case, keep in mind that the href attribute for this element operates in a similar manner to HTML's href attribute.
Listing 6.10 Referencing an External Style Sheet
01: <?xml version="1.0" standalone="no"?>
02: <?xml-stylesheet href="style.css" type="text/css"?>
03: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
04: "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
05:
06: <svg width="500" height="300">
07:
08: <g class="StrokeGreen FillYellow DisplayInline">
09:
10: <path d="M150,140
c 0,0 -16,24 -16,33
c 0,9 7,15 16,15
c 9,0 16,-7 16,-15
c 0,-9 -16,-33 -16,-33"/>
11:
12: <path d="M250,140
c 0,0 -16,24 -16,33
c 0,9 7,15 16,15
c 9,0 16,-7 16,-15
c 0,-9 -16,-33 -16,-33"/>
13:
14: <path d="M350,140
c 0,0 -16,24 -16,33
c 0,9 7,15 16,15
c 9,0 16,-7 16,-15
c 0,-9 -16,-33 -16,-33"/>
15:
16: </g>
17:
18: </svg>
For convenience's sake, you'll continue to keep your style sheet within your document for the remainder of this book's examples (minus the final example). You can place your style element (and its subsequent style sheet content) in a variety of places in your document but not within other artwork elements (such as the rect, circle, and so on). As a general rule of thumb, you should keep your style sheet at either the top or bottom of your document, away from your content code, to make it easy to find for other developers.
The examples in the remainder of this book will keep the style sheets at the top of the files, making things easier when you edit your code (as their position will be familiar).