Why I'm using SVG images instead of icon fonts
I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.
I'm converting a few of my sites to use SVG images instead of icon fonts and here are the reasons.
- Seren Davies talked about the accessibility problems of icon fonts for dyslexics at the EpicFel conference. Check out this video of her presentation.
- 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.
- I can manage SVG images (files) using Perch Layouts (on my Perch CMS sites) as mentioned here.
- I like the fact that I can manipulate SVG files with CSS and in my text editor. For example by adding
aria-labelledby,roleandtitleattributes for better accessibility. See tips for creating accessible SVG. - 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.
Comments are OFF for this post.