Chapter 7 ■ IntegratIng CSS3 anImatIonS wIth SVg and FIlterSThe viewBox attribute specifies a “canvas” of 400 by 400 pixels. With no width or height specified for the
image element in the CSS, the SVG element reserves a “space” of 400 × 400 pixels for itself when it is placed on
your page as an image with standard HTML, shown in Listing 7-3.
Listing 7-3. An SVG Element Inserted on a Web Page As an Image
You can also reference SVG as an image anywhere you would normally use an image in your CSS—for
example, as a background for an element (Listing 7-4).
Listing 7-4. SVG Applied As a Background Image in CSS
h1 { background: url(svg/wave.svg); }
While referencing an external SVG file in this way is the simplest and most common method, it does carry
several drawbacks:
• The SVG file is treated solely as an image; any interactivity or scripts written within the
code are ignored.• You can’t “reach inside” the SVG code to directly alter the appearance of elements using
CSS with the same degree of freedom you have with inline SVG.Inline SVG
If you embed SVG data directly on your page, you need to include a little more information to the SVG code. You
will need to provide the element’s width and height either as attributes (viewBox, width, or height attributes) or
as a style (see Listing 7-5).
Listing 7-5. SVG Applied Inline with HTML
<!DOCTYPE html>
Standard content
Inline SVG saves an extra HTTP request, making it particularly important for mobile pages, where lag is
prevalent. Other advantages over simply referencing the file as an image are the ability to directly influence the
appearance of SVG with CSS. Scripted interactivity with the SVG is also supported.
The primary drawback to inline SVG is the simple fact that it adds more code to your HTML page.