Using SVG with CSS3 and HTML5

Chapter 9. A New Point of View

Chapter 9. Cropping Embedded SVG Files

This chapter discusses ways to control the coordinate system when you embed the SVG in a web page, changing the graphic’s scale or crop, without editing the SVG file. These SVG view options allow you to override the SVG file’s viewBox or preserveAspectRatio by modifying the URL you use to access the SVG file.

There are two ways to apply views:

• by using a target fragment (the part of the URL after the # or hash character) to reference the id of a <view> element in the SVG file, or

• by using the SVG view fragment syntax to directly set the view information in the URL.

The chapter also covers a related technique, known as SVG stacks, which also uses URL fragments to activate different versions of the same SVG file.

These techniques only apply to embedded SVG: a separate .svg file that is included as an image or object in the HTML, or an image in the CSS. They cannot be used with inline SVG markup that is part of the main HTML document, since inline SVG does not have its own URL. To change the view of an inline SVG, you need to directly edit the viewBox and preserveAspectRatio attributes, either in the markup or with JavaScript.

Warning

Use of these features is currently limited by a number of bugs and restrictions in WebKit/Safari. Even in other browsers, support for views arrived later than other SVG features; older browsers may not adjust the SVG to the view, particularly when embedding images via CSS. Finally, ...