Join us and the lead editor of IRL, Mozilla's multi-award-winning podcast, for a behind-the-scenes look at the pod and to contribute your ideas for the next season, themed: "AI and ME." Mark your calendar and join our Community Call on Wednesday, Aug 7, 17:00–17:45 UTC. See you there!

Avatar for Username

Sykje yn Support

Mij stipescams. Wy sille jo nea freegje in telefoannûmer te beljen, der in sms nei ta te stjoeren of persoanlike gegevens te dielen. Meld fertochte aktiviteit mei de opsje ‘Misbrûk melde’.

Mear ynfo

Dizze konversaasje is argivearre. Stel in nije fraach as jo help nedich hawwe.

How to use sharp SVG Icons in Mozilla Firefox

  • 2 antwurd
  • 2 hawwe dit probleem
  • 1 werjefte
  • Lêste antwurd fan 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

Alle antwurden (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==