O'Reilly logo

Practical SVG by Chris Coyier

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

Chapter 1. The Basics of Using SVG

I WANT TO COVER all of the different ways we can use SVG on the web right away so that it doesn’t feel so mysterious. There are three primary ways, each of which can be useful.

SVG AS HTML img

We already covered this one. You can use SVG images in HTML like this:

<img src="leaf-maple.svg" alt="Five-lobed sugar maple leaf">

Here we’re using img with SVG just as we would with any other appropriate image format (like JPG, GIF, or PNG): to display an image within content.

In FIG 1.1, the leaf itself is part of the content of the article. A content management system (CMS) could conceivably produce leaf pages like this, the leaf image being part ...

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