Include an SVG with an Image Tag

Since an SVG is really just an image, it can be included on a page just like any other image, using an img tag. This is simple to implement, easy to resize and has the benefit of being cacheable.

There are a couple downsides to this approach, however. You can’t modify the SVG attributes such as fill or stroke; once the icon is included, there isn’t much you can do to change its appearance. Also, each icon you include creates an HTTP request, potentially impacting page load speed.

If you’re looking for an easy way to implement just a couple of icons that don’t need to change, this is a viable option.