O'Reilly logo

Sams Teach Yourself SVG in 24 Hours by Micah Laaker

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a Resizable Document

In certain instances, it may be desirable to create an SVG file that can stretch to fill your browser's screen. As SVG is made of vector graphics, your images will scale quite beautifully in most instances (unless you've embedded raster images, which will be covered in Hour 11, “Images”).

To create scaling content, you will need to do two things:

1.
Modify your SVG document data
2.
Modify your HTML embed element data

In order to specify the method in which your content will scale, you must include the preserveAspectRatio attribute in your svg element. This attribute determines how your content distorts in accordance with the shape of the viewBox. There are dozens of possible values for this attribute, each offering ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required