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
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
<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
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, ...