Using SVG in Websites

I recently had to change the icons on a site from fonts to SVGs. Here are options you can use with SVG icons, their pros and cons and the solution I went with.

Options

Here are the options you have implementing SVGs in as icons on a website.

  • Using <img> and SVG as src
    • - no control with CSS (change color etc.)
    • - one icon, one request
    • + cacheable
  • Using the image with inline SVG
    • - bloats HTML
    • - not cacheable
    • + controllable by CSS
  • Using inline sprite in HTML
    • +- not too much bloat; icons are reused
    • + CSS support
    • - not cacheable
  • Using external sprite
    • + no bloat
    • + CSS control
    • + cacheable
  • Using sprites in CSS
    • + no bloat
    • - no CSS control
  • Using data URIs in CSS
    • - bloats the CSS
    • - no CSS control

In this list it seems, that using an external sprite and referencing the icons with <use> is the best possibility. But Internet Explorer up to version 11 doesn't support referencing an icon from an external file. So the following isn't working with IE:

<svg>
    <use xlink:href="path/to/sprite.svg#icon-phone" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Solution

Luckily there is a fabulous polyfill to use IE with this method. It can be found under the name svg4everybody. Only downside is, that users without Javascript on IE can't see any icons. So we have to make sure the page looks ok even without Javascript. With a working solution for IE you could now implement a little example. This is the icon of an envelope, we want to show on a page.

Create a file with the following contents:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon-phone" viewBox="0 0 160 160">
    <path fill="currentColor" d="M26.8 37.4v85.3h106.4V37.4H26.8zm92.5 8.6L81.7 88c-.7.9-2 1.1-2.9.4-.1-.1-.3-.2-.4-.4L40.7 46h78.6zm5.3 68H35.4V52.9L59.7 80 72 93.7c2 2.3 5 3.7 8.1 3.7 3.1 0 6-1.4 8.1-3.7l6.5-7.3 30-33.5-.1 61.1z"/>
  </symbol>
</svg>

I f you want more than one icon in there, add another <symbol>.

Then in a html file, where you want to use the icon you would put the following (be sure to set the closing </use> to support IE)

<svg class="my-phone-icon">
  <use xlink:href="path/to/sprite.svg#icon-phone" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

And that is it. You should see an envelope on the screen. See how the svg above has a class of my-phone-icon? We can use this to reference in CSS and change the color for example (be sure to set fill in the SVG to currentColor like seen above)

.my-phone-icon {
  color: crimson;
}

This will color the icon in crimson red.

Final

According to caniuse SVG support in browsers is at 96%. If you want to care about the other 4%, a fallback can be implemented. One argument for SVG icons and against icon fonts is, that IE has the option to block font downloading. I recently had this with a client in a big company and they had no control over these options. This is not uncommon in big companies in my experience. With SVG you are on the safe side and your icons will be seen - even by this particular client.

blog comments powered by Disqus