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