Skip to content

Instantly share code, notes, and snippets.

@BillClinton

BillClinton/icon-fonts-vs-svg.md

Last active November 4, 2019 03:03
Show Gist options
  • Save BillClinton/3ec78e516b920e0c7855b70b96f5b72a to your computer and use it in GitHub Desktop.
Save BillClinton/3ec78e516b920e0c7855b70b96f5b72a to your computer and use it in GitHub Desktop.
Download ZIP
Icon Fonts vs SVGs
Raw
icon-fonts-vs-svg.md

Issues with icon fonts

  • usually requires an additional request
  • can be missing from page while loading
  • if fonts don't load or browser can't interpret fonts pu may get strange characters

Advantages of SVG icons

  • superior scaling
  • render more quickly and reliably
  • don't need to be imported from external files
  • smaller in size than image formats and most icon libraries

Using SVGs

Note: You can put them in <img> tags, and adjust dimensions with height and width attributes but inlining SVGs will give you more flexibility.

<svg aria-hidden="true"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg>

Color inheritance

content: url(...) makes the url part into an image, in other words the svg becomes its own separate document. Styles don't apply across documents, so it's not possible to get color to affect the svg in this scenario.

When the svg is inline it is OTOH part of the document, so styles can be applied to it.

You could make (or dynamically generate) multiple versions of the checkmark svg and tune the stylerules such that the appropriate "pre-colored" one is selected.

SVG Resources

  • IcoMoon - Free and Paid options. App allows you to generate SVGs from their free gallery
  • Convertio - allows you to convert other image formats to SVG files.

sources:

to read:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment