SVG Icons

how-to-svg.md

Basics

1. Have an /icons folder with SVGs in it.
2. Saving SVGs on a common artboard size isn’t required, but recommended for consistency (I use 512 × 512 px artboards for most SVGs)
3. Run SVGO (brew install svgo) on the SVGs to minimize them. This just keeps file size really low. It works perfect for simple icons but can be skipped if it messes up more complicated icons.

svgo icons/twitter.svg

4. Open up a new document in your editor, save it as icons.svg (or whatever).
5. Also open up all the SVGs from /icons in your text editor.
6. In icons.svg, paste the content for all of your SVGs inside their own <symbol> tags. Copy the viewbox attribute over to <symbol>, but otherwise omit any <svg> tags (you can only have 1 <svg> in this document).

<svg xmlns="http://www.w3.org/2000/svg">

  <symbol id="facebook" viewBox="0 0 512 512">
    <title>Facebook</tile>
    <!-- contents of icons/facebook.svg -->
    <path d="M214.1 433.6V268.1h-43.8v-59.6h43.8v-50.9c0-40 25.8-76.7 85.4-76.7 24.1 0 41.9 2.3 41.9 2.3l-1.4 55.6s-18.2-.2-38-.2c-21.5 0-24.9 9.9-24.9 26.3v43.5h64.7L339 268h-61.8v165.5h-63.1z"/>
  </symbol>

  <symbol id="twitter" viewBox="0 0 512 512">
    <title>Twitter</tile>
    <!-- contents of icons/twitter.svg -->
    <path d="M472.6 121.7c-15.9 7.1-33.1 11.8-51 14 18.3-11 32.4-28.4 39.1-49.2-17.2 10.2-36.2 17.6-56.4 21.6C388 90.8 364.9 80 339.3 80c-49.1 0-88.9 39.8-88.9 88.9 0 7 .8 13.7 2.3 20.3-73.9-3.7-139.3-39.1-183.2-92.8-7.6 13.1-12 28.4-12 44.7 0 30.8 15.7 58 39.5 74-14.6-.5-28.3-4.5-40.2-11.1v1.1c0 43.1 30.6 79 71.3 87.1-7.5 2-15.3 3.1-23.4 3.1-5.7 0-11.3-.6-16.7-1.6 11.3 35.3 44.1 61 83 61.7-30.4 23.8-68.7 38-110.4 38-7.2 0-14.2-.4-21.2-1.2 39.3 25.2 86 39.9 136.2 39.9 163.5 0 252.8-135.4 252.8-252.8 0-3.9-.1-7.7-.3-11.5 17.5-12.7 32.6-28.3 44.5-46.1z"/>
  </symbol>
  
  <!-- add more SVG symbols here -->
  
</svg>

7. Keep making new <symbols> with IDs, one per SVG.
8. To place them on the page:

%svg
  %use{ 'xlink:href': "#{ asset_path( 'icons.svg' ) }#twitter" }

9. Replace the #twitter with the ID of the symbol you want to use.

Cross Browser Support

Include the very tiny svg4everybody.js in your project, and run svg4everybody(); to automatically support older browsers (IE10 and below). It just makes an AJAX call to the file and renders it on the page if it needs to. Inline SVGs have been supported for a while but <use> hasn’t.

Advantages

• This method is better than simply using an img tag because you can animate all the SVG properties.
• This method is also better than using icon fonts because the SVG can be fully manipulated and animated, and it allows for multi-colored icons as well.
• You get the benefit of caching as well, so like an icon font, icons.svg is loaded only once and works for the entire site. And gzip compression also works to make an SVG file even smaller than a font file.

Tips

• Use any classes on the svg element itself to take advantage of CSS styling.
• Like a font file, you can’t load this from a remote domain; it has to be served locally (which makes it hard to use a CDN when trying to deliver this).
• Just as inline style attributes trump CSS in general, likewise any hard-coded attributes in the icons.svg file will take priority over any CSS you try to apply. E.g., if you want to animate stroke in CSS, you can only do so if stroke="" isn’t declared anywhere within that symbol.
• It’s always a good practice to remove fill="", stroke="", and all attributes from icons.svg, and set them in CSS. That way you can style and animate all properties dynamically.
• You are allowed to use CSS within icons.svg itself in a <style></style> tag, but this introduces CSS architecture problems that may or may not be desired.
• IE and Edge usually display SVG as block elements; for this reason it’s good practice to set a reasonable width: and height: on your icons.
• viewBox is definitely case-sensitive. Definitely.