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