Pro CSS3 Animation

Chapter 7 ■ IntegratIng CSS3 anImatIonS wIth SVg and FIlterS

Note that the SVG polygon element uses points to describe shapes in a way similar to imagemaps. Ultimately,
SVG elements must be rendered as pixels by your display, and by default the points specified for the polygon will
map to pixels on the screen. (Your play button will be displayed in the browser as 400 pixels high and two hundred
pixels wide by default, and will be positioned in the extreme top-left corner of the screen.) Ultimately, the final
rendered dimensions of an SVG element are arbitrary: the button could be rendered a mile high (if your screen
was large enough) or two centimeters wide (for example, on a printed page) and, all other factors aside, the quality
would be the same.
Again, as with imagemaps, it’s usually not very efficient to write all of your code by hand for SVG. For many
tasks you’ll find it considerably easier to use a drawing application and export the result as an SVG file. (I’ll
discuss these tools shortly.)

Placing SVG on a Web Page

There are three primary methods used to place an SVG file on an HTML page: referenced as an image, inline on
your page (also called embedded SVG), and referenced as an object.

SVG As an Inline Image

The method for placing an SVG element into a web page most familiar to web developers is to use the tag.
Before you do so, your SVG code must contain a little more information as to its “natural” size (again, keeping the
code to an absolute minimum), as shown in Listing 7-2.

Listing 7-2. SVG Code Prepared for Insertion on a Web Page As an Image