Inserting SVGs into your web pages

There are a number of things that you can do (browser dependent) with SVG images that you can't do with normal image formats (JPEG, GIF, PNG). The range of what's possible is largely dependent upon the way that the SVG is inserted into the page. So, before we get to what we can actually do with SVGs, we'll consider the various ways we can actually get them on the page in the first place.

Using an img tag

The most straightforward way to use an SVG graphic is exactly how you would insert any image into an HTML document. We just use a good ol' img tag:

<img src="mySconeVector.svg" alt="Amazing line art of a scone" />

This makes the SVG behave more or less like any other image. Not much more to say about that.

Using an ...

Get Responsive Web Design with HTML5 and CSS3 - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.