Bluehost: Web hosting from $3.95/month. Sign Up

Why I'm using SVG images instead of icon fonts

Posted on by Clive Walker in Web Development

I'm converting a few of my sites to use SVG images instead of icon fonts and here are the reasons.

  1. Seren Davies talked about the accessibility problems of icon fonts for dyslexics at the EpicFel conference. Check out this video of her presentation.
  2. It's clear that, with a few minor caveats, browser support for SVG is good. I'm no longer supporting Internet Explorer 8 which doesn't support SVG.
  3. I can manage SVG images (files) using Perch Layouts (on my Perch CMS sites) as mentioned here.
  4. I like the fact that I can manipulate SVG files with CSS and in my text editor. For example by adding aria-labelledby, role and title attributes for better accessibility. See tips for creating accessible SVG.
  5. I can save bytes in my CSS file if I am not using a big section for icon fonts.

In particular, I like having the ability to manage SVG files with Perch Layouts. You can also use PHP's file_get_contents function in a similar way.

So far, I've replaced icons fonts with SVG on this site. I'm doing the same on my CVW Web Design site next.

I'm liking my 'conversion' to SVG so far.

Leave a comment

A simple question that helps prevent automated form fillers.

© 2016 Clive Walker