10

When I use a <svg> in order to display an icon, it looks perfectly crisp and sharp in Google Chrome. However, as soon as I open the svg in Firefox or Internet Explorer, the icon looks blurry.

It seems like those Browsers render the icon to half pixels. Only Google Chrome is doing a good job here.

enter image description here

What is the best approach to get crisp svg icons in all browsers? (We want to color the icons via fill:... so using a background-image or pixel graphics are no options)

What I have tried so far: I have applied the CSS attribute shape-rendering. but this one is too crisp and edgy.

<svg width="16px" height="16px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
    <path fill="#231F20" d="M16,16H0V0h6.8l2,3H16V16z M1,15h14V7H1V15z M1,6h14V4H8.2l-2-3H1V6z"></path>
</svg>
<svg width="32px" height="32px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
    <path fill="#231F20" d="M16,16H0V0h6.8l2,3H16V16z M1,15h14V7H1V15z M1,6h14V4H8.2l-2-3H1V6z"></path>
</svg>

<button type="button" style="width: 42px; height: 42px;"><i style="background-image: none; pointer-events: none;">
<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
 <rect y="19" fill="#231F20" width="24" height="2"></rect>
 <rect y="3" fill="#231F20" width="24" height="2"></rect>
 <rect y="11" fill="#231F20" width="24" height="2"></rect>
</svg>
</i></button>


<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
 <rect y="19" fill="#231F20" width="24" height="2"></rect>
 <rect y="3" fill="#231F20" width="24" height="2"></rect>
 <rect y="11" fill="#231F20" width="24" height="2"></rect>
</svg>
Rebecca
  • 439
  • 5
  • 20
  • Add 0.5 to each co-ordinate http://cairographics.org/FAQ/#sharp_lines – Robert Longson Feb 23 '16 at 14:25
  • The snippet you have included in your question doesn't match your screenshot. – Paul LeBeau Feb 23 '16 at 16:45
  • @RobertLongson These "file" icons in the snippet *are* pixel aligned correctly, so they should be sharp. – Paul LeBeau Feb 23 '16 at 16:49
  • If so that's as good as it's going to get without crispEdges. However if crispEdges does have an effect as the OP suggests then it means the shapes are not pixel aligned. – Robert Longson Feb 23 '16 at 16:56
  • 1
    @PaulLeBeau: Actually I wanted to add another example by doing so. I have now added both icons in both examples :) – Rebecca Feb 24 '16 at 08:18
  • 1
    @RobertLongson: These 0.5 pixels are meant to be added on the viewBox (and maybe enable-background), right? When I tried this, I noticed that the icon changed... but it did not get sharper. All of these icons were created by using the pixel preview in illustrator and with the correct size that they will be used at. So the icons themself are pretty sharp. And Google Chrome displays them exactly the way I created those. However, I don't get why Firefox and Internet Explorer are rendering those by increasing the size and making them blurry... – Rebecca Feb 24 '16 at 08:22
  • No, on the path co-ordinates. – Robert Longson Feb 24 '16 at 09:19
  • 1
    @Rebecca I believe Robert was referring to the half-coordinate issue, which you can see explained here: http://stackoverflow.com/questions/23376308/avoiding-lines-between-adjecent-svg-rectangles That is perfectly normal and expected, but that really only applies to paths drawn with stroke widths. Your icons are filled shapes that lie on pixel boundaries, and don't use strokes. So your icons should be okay. I'm not sure why FF is rendering your paths that way. – Paul LeBeau Feb 24 '16 at 13:00
  • It may depend not only on the browser, but also operating system. In Firefox on Ubuntu (Linux) the SVG graphic is sharp, except for skew lines. – pkalinow Feb 26 '16 at 16:24
  • Silly question: have you made sure you haven't accidentally zoomed? Cmd-0 or ctrl-0 depending on your OS. Your Firefox image looks artificially zoomed, and I can't imagine another reason for the blur. – denmch Feb 27 '16 at 03:56
  • The other way round this is to make the strokeWidth very small, like 0.01 – Arif Burhan Feb 27 '16 at 21:48

2 Answers2

8

Hack for Firefox:

svg {
 transform: translateZ(0);
}

What about IE: possible reason when svg container positioned in coordinates like 31.5 (not exactly on pixel line), IE will draw svg in this container the same way, a bit off pixel line.

ada
  • 648
  • 6
  • 11
  • You are welcome) If only I completely understand why is that so. If I understand how it works, I will clarify my answer – ada Mar 04 '16 at 10:27
  • Worked for me too. Was pulling my hair out trying to sharpen my SVGs on Firefox. – MarsAndBack Oct 02 '18 at 22:33
  • Looks like this hack no longer works for latest versions of Firefox. 9+ old bug, claimed to be "FIXED" yet still happening. https://bugzilla.mozilla.org/show_bug.cgi?id=608812 – Shadow Nov 02 '19 at 02:42
  • This hack didn't work for me, but it gave me an idea, which worked. For some svg dimensions say `width: 24px` and `height: 24px`, `transform: translateX(0.5px)` fixed the issue, while for `width: 32px` and `height: 32px`, `transform: translateY(0.5px)` fixed blurry svg... ¯\_(ツ)_/¯ – ado387 Dec 23 '20 at 22:41
1

Use much larger values for width and height.

What you are doing at the moment is essentially specifying a 24 x 16 pixel image, and expanding it to full screen size. SVG should be infinitely scalable, hence the name, but some Browsers, like some TVs are better at pixel interpolation than others.

Arif Burhan
  • 505
  • 4
  • 12