Chapter 7 ■ IntegratIng CSS3 anImatIonS wIth SVg and FIlterS
SVG Added As an Object or iframe
Adding SVG to a web page as an object or iframe is the oldest method, in which scripted interactivity is retained
inside the element (Listing 7-6).
Listing 7-6. SVG Applied As an Object or iframe to a Web Page
However, applied as an
Manipulating SVG with CSS
Just as you can place SVG on a web page in several different ways, so you can manipulate the appearance of an
SVG element using several different methods. This is made more complex by the fact that SVG has its own native
syntax for achieving some visual effects.
At the simplest level, you can resize an SVG element when it is placed on your page as an image, as shown in
Listing 7-7.
Listing 7-7. Inline CSS Used to Resize an SVG Element
You can also alter the appearance of the element from an embedded or linked style sheet, in the same way
that you write presentational rules for any other kind of image. (For this reason, SVG elements used on a page are
often given an id attribute.)
You can change the fill color of an SVG shape natively inside the SVG file, using fill (see Listing 7-8). (Note
that fill can take any color value used in CSS: keyword, hexadecimal, rgb, or hsl).
Listing 7-8. Fill Attribute Used to Color an SVG Polygon Element
You can also change the fill color using an embedded stylesheet in the SVG file (Listing 7-9).Listing 7-9. Modifying the Appearance of an SVG Element with an Embedded Stylesheet