1

Problem

I've spent most of today reading and learning about the SVG format and the application of Icon Fonts for webdevelopment. I've converted (part of) my existing icon set to icons aligned to a 32 * 32 grid in Adobe Illustrator, exported these to SVG files and converted those to an Icon Font using IcoMoon.

The icon font renders great on Google Chrome, Edge and Internet Explorer, but refuses to render correctly on FireFox.

Possible Solutions

I've scoured the internet for a solution as to why this might happen, and I've come across the following potential causes:

  1. Lack of hinting in Icon Fonts.
  2. Incorrect Vertical Matrices.
  3. Issues stemming from the use of ClearType.

The first and second cause can (presumably) be ruled out by the proper alignment to the 32 * 32 grid. The third cause is something that I can't do much about because I can't turn ClearType on or off for a user as he or she must do so him- or herself. Yet all over the web I encounter Icon Fonts that render crisp and correct for all browsers and all platforms.

Almost all of the StackOverflow and blog posts I encountered never really seemed to go in to this problem with sufficient detail, which surprises me as it is a considerable problem (at least for me).

Question

I am looking for someone who is able to explain to me in sufficient depth why I am encountering this problem and what I can do to fix it. I am more than willing to accept blog posts or other reading material as a means of understanding the problem better, as I don't even have a lead now.

Quality Difference

I've supplied two screenshots comparing the quality in FireFox to that in Google Chrome:

FireFox

Quality in FireFox

Google Chrome

Quality in Google Chrome

Illustrator Artboard

This is what the Adobe Illustrator artboard looks like:

enter image description here

EDIT: Closeup of Icons:

Firefox

Closeup FireFox

Google Chrome

Closeup Google Chrome

EDIT 2: SVG of Summary Icon:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px"
     height="64px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
<![CDATA[
    .st0{fill:#444444;}
    .st1{fill:#444445;}
]]>
</style>
<g id="summary">
    <g>
        <path class="st0" d="M54,4h-6V1.827C48,0.817,47.105,0,46.002,0C44.896,0,44,0.817,44,1.827V4H34V1.827
            C34,0.817,33.105,0,32.002,0C30.896,0,30,0.817,30,1.827V4H20V1.827C20,0.817,19.105,0,18.001,0C16.896,0,16,0.817,16,1.827V4h-6
            C8.896,4,8,4.896,8,6v56c0,1.104,0.896,2,2,2h44c1.104,0,2-0.896,2-2V6C56,4.896,55.104,4,54,4z M52,60H12V8h4v2.174
            C16,11.183,16.896,12,18.001,12C19.105,12,20,11.183,20,10.174V8h10v2.174C30,11.183,30.896,12,32.002,12
            C33.105,12,34,11.183,34,10.174V8h10v2.174C44,11.183,44.896,12,46.002,12C47.105,12,48,11.183,48,10.174V8h4V60z"/>
        <path class="st0" d="M45.859,46H18.141C16.959,46,16,46.896,16,48c0,1.104,0.959,2,2.141,2h27.719C47.042,50,48,49.104,48,48
            C48,46.896,47.042,46,45.859,46z"/>
        <path class="st0" d="M45.859,34H18.141C16.959,34,16,34.896,16,36c0,1.104,0.959,2,2.141,2h27.719C47.042,38,48,37.104,48,36
            C48,34.896,47.042,34,45.859,34z"/>
        <path class="st0" d="M45.859,22H18.141C16.959,22,16,22.896,16,24c0,1.104,0.959,2,2.141,2h27.719C47.042,26,48,25.104,48,24
            C48,22.896,47.042,22,45.859,22z"/>
    </g>
</g>
<g id="login">
</g>
<g id="mail">
</g>
<g id="download">
</g>
<g id="check_x5F_enabled">
</g>
</svg>
Community
  • 1
  • 1
Teun Kooijman
  • 1,132
  • 2
  • 10
  • 23

0 Answers0