We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Lolu chungechunge lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

How to use sharp SVG Icons in Mozilla Firefox

  • 2 uphendule
  • 2 zinale nkinga
  • 1 view
  • Igcine ukuphendulwa ngu cor-el

FF_Rebecca
FF_Rebecca
more options

I'm currently developing a website and 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, the icon looks blurry.

It seems like Firefox renders this to a grid of half pixels. Please check the attached image for an example.

What is the best approach to get crisp svg icons in all browsers - including firefox? (On this website, we want to color the icons via the css attribute 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.

You can also check http://stackoverflow.com/questions/35579705/how-to-make-svgs-sharp-in-firefox-and-internet-explorer in order to see a code snippet + the attached image

I'm currently developing a website and 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, the icon looks blurry. It seems like Firefox renders this to a grid of half pixels. Please check the attached image for an example. What is the best approach to get crisp svg icons in all browsers - including firefox? (On this website, we want to color the icons via the css attribute 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. You can also check http://stackoverflow.com/questions/35579705/how-to-make-svgs-sharp-in-firefox-and-internet-explorer in order to see a code snippet + the attached image

All Replies (2)

guigs
guigs
more options

Please Could you file a new bug at 

https://bugzilla.mozilla.org/enter_bug.cgi?product=Core&component...

with a testcase (including the canvas) that reproduces it with reference to your stackoverflow link.

Thank you.

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

If I zoom the page with the SVG code then I notice a change with some zoom levels (lines get thicker). 

data:text/html;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE2IDE2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNiAxNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICA8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNMTYsMTZIMFYwaDYuOGwyLDNIMTZWMTZ6IE0xLDE1aDE0VjdIMVYxNXogTTEsNmgxNFY0SDguMmwtMi0zSDFWNnoiPjwvcGF0aD4KPC9zdmc+Cjxzdmcgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogICAgPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTE2LDE2SDBWMGg2LjhsMiwzSDE2VjE2eiBNMSwxNWgxNFY3SDFWMTV6IE0xLDZoMTRWNEg4LjJsLTItM0gxVjZ6Ij48L3BhdGg+Cjwvc3ZnPg==