Adding the SVG as a regular ol' <img>

You can also use an SVG as a regular <img>. We happen to have a couple of images in the middle of our site—the different ocean species that will make perfect candidates for implementing SVG with this approach:

I've already saved a copy of the octopus, crab, and whale as an .svg file. So let's go over to the HTML and simply change the octopus, crab, and whale images from .png to .svg:

<!-- ===============Secondary Sections===============--><section class="secondary-section grouping">  <div class="wrapper">    <div class="column">      <figure>        <img src="images/octopus-icon.svg" alt="Octopus">      </figure> <h2>The Octopus</h2> ...

Get Mastering CSS 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.