SVG for Web Developers

External Style Sheets

As we said, creating embedded style sheets is fine if you are going to use those styles for only one SVG file. However, if you want a style sheet to be referenced by more than one document, consider using an external CSS. An external style sheet looks like the internal style sheet, but it is saved as a separate CSS document, then referenced by the SVG document that uses the particular styles. To change the internal style sheet in Example 8-4 to an external style sheet, create a separate document and copy all of the style definitions into that document, like so:

.myStyle {
     fill:red;
     stroke:orange;
     stroke-width:2
     }

.yourStyle {
     fill:blue;
     stroke:black;
     fill-opacity:.5
     }

.ourStyle {
     fill:none;
     stroke:green
     }

The style code ...