6

Ask DN: Switching from icon fonts to SVG. What's your workflow?

5 years ago from , Designer. Developer. Product Maker.

After reading and watching Chris Coyier talk about using SVG icons instead of icon fonts I've no doubt that's the way to go. I'm interested how others have switched.

I'm a big fan of Font Awesome. Currently I include Font Awesome in each of my projects and use wherever I want an icon. CSS takes care of the rest.

What's the easiest way to transition from this to using SVG icons? Assuming I wanted to have the same Font Awesome icons (but as SVGs) at my disposal.

13 comments

  • Marc EdwardsMarc Edwards, 5 years ago (edited 5 years ago )

    Method 1: SVG sprite sheet

    1. Lay everything out as a sprite sheet using something that can save SVGs, like Illustrator.

    2. Use easy to work out sprite locations — starting at even offsets can mean you can use maths to work out positions (SCSS, LESS etc can make this even easier). Maybe one set of icons starts at 0,500, with each icon offset by 50px. Being SVG, pixel dimensions won’t affect the file size, but will affect memory usage, so don’t space things out too much.

    3. Use classes for each icon, with background-position to address them.

    Method 2: base64 encode

    If your SVGs are small enough, you might be able to base64 encode them directly into your CSS document. I’ve done this before for site headers and footers that weren’t going to change. It’s a really efficient way to go, if you can keep things small enough.

    And again, SCSS, LESS or some other CSS preprocessor can help, because you can keep your messy base64 encoded SVGs in a separate file, so you don’t have to scroll through it when you’re editing your normal CSS, then have it all merged into one CSS file and compacted by your preprocessor of choice.

    base64 encode

    Method 3: Just use separate files

    SVGs are typically pretty small and efficient. Depending on your needs, just using each file as a separate img or background-image is likely to be totally fine.

    Unless you’re doing something a bit crazy, I wouldn’t put much emphasis on those icon font vs SVG comparisons you may have seen — SVG can be GZIPped, and they’re probably only a fraction of the size of the bitmap images you’re using on your website.

    Photoshop and SVGs

    Depending what you’re after, Photoshop’s Generator can create SVGs from Photoshop shape layers. It might be worth investigating, if that sounds like what you’re after. It’s an experimental feature of Photoshop CC and Photoshop CC 2014, but it’s easy to enable.

    Automation!

    If you need to be able to crunch huge amounts of icons into one or many SVG files, there’s some decent options for doing so. Someone else may need to go into detail, but I believe there’s lots of ways to use something like Grunt for that task.

    11 points
  • Dave Yoon, 5 years ago

    I was a huge fan of Font Awesome until i came across Fontello which was soon replaced by Fontastic.

    Fontastic allows you to easily import SVG's and create your own rollups while mixing and matching additional sets. And they've just added in the ability to publish as SVG sprites. (I have no association with them, just get excited whenever I share this awesome service).

    1 point
  • Marcus ZanonaMarcus Zanona, 5 years ago

    Interesting. I suppose in this case, IE8 can already be forgotten? :) What do you guys think?

    0 points
    • Marc EdwardsMarc Edwards, 5 years ago

      That’s probably a decision you’ll have to make based on the project and site usage stats. For us, targeting IE 9 and above was easy, but for a government website or similar, you’d probably still have to support it.

      Mind you, you can quite easily fallback to PNGs if you want. If you create PNG versions of your SVGs, then place all your overrides in one CSS file, you can just optionally load that for IE 8 and below. This becomes even easier if you’re using a sprite sheet, because you’ll only have image to override in your CSS.

      Everyone can use SVGs in their projects! \o/

      1 point
  • Vince SpeelmanVince Speelman, 5 years ago

    If you're looking for something nice and easy, Grumpicon is the way to go. The Filament Group covers the workflow in detail here. The most important thing to remember (and biggest pain) is, that once you save your svg, you have to manually open it, remove the width and height from the container, and save again. Good luck!

    0 points
    • Zander MartineauZander Martineau, 5 years ago

      This is built into a grunt plugin called Grunticon, it is my recommended way to handle SVG's for the web. It also generates CSS files so icons can be used as background images as well as all the relevant fallbacks if that is not supported. For example, it converts SVGs to PNG for you. It is awesome and I suggest you all try it.

      0 points
  • Sagi ShrieberSagi Shrieber, 5 years ago

    Fontello and fontasric dont have shape editing capabilities. Icomoon does. I use my script "Psd layers to SVG". I wrote all about my workflow here: http://hackingui.com/design/my-workflow-to-export-svgs-out-of-my-photoshop-design-files/

    0 points