Ce site disposera de fonctionnalités limitées pendant que nous effectuons des opérations de maintenance en vue de vous proposer un meilleur service. Si un article ne règle pas votre problème et que vous souhaitez poser une question, notre communauté d’assistance est prête à vous répondre via @FirefoxSupport sur Twitter, et /r/firefox sur Reddit.

Avatar for Username

Rechercher dans l’assistance

Évitez les escroqueries à l’assistance. Nous ne vous demanderons jamais d’appeler ou d’envoyer un SMS à un numéro de téléphone ou de partager des informations personnelles. Veuillez signaler toute activité suspecte en utilisant l’option « Signaler un abus ».

En savoir plus

Ce sujet de discussion a été archivé. Veuillez poser une nouvelle question si vous avez besoin d’aide.

How to use sharp SVG Icons in Mozilla Firefox

  • 2 réponses
  • 2 ont ce problème
  • 1 vue
  • Dernière réponse par 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

Toutes les réponses (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==