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: ...

Get Sams Teach Yourself SVG in 24 Hours now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.