Does your site run on Perch CMS? Hire me to help. Perch CMS Development

Why I'm using SVG images instead of icon fonts

Posted on by Clive Walker in Web Development

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.

  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.

Does your site run on Perch CMS? Hire me to help. Perch CMS Development
Leave a comment

A simple question that helps prevent automated form fillers.

© 2021 Clive Walker