Sams Teach Yourself SVG in 24 Hours

Creating a Style Sheet

With an understanding of what a style sheet is fresh in your memory, you can actually begin the process of making one for your SVG content. You can start by creating an internal CSS style sheet.

To make sense of all this style information, you can modify the raindrop example from last hour, shown in Figure 6.1. Using Listing 5.10 as a foundation, you'll need to insert a style element into your new document (line 6 in Listing 6.1). Within this element, you will need to insert a CDATA section (line 7), which alerts the SVG viewer not to parse its contents.

Figure 6.1. An internal style sheet can provide the information to paint this raindrop.

Now it's time to create a rule. First take the two style declarations used to create ...