საიტის გასაუმჯობესებელი სამუშაოების მიმდინარეობისას, შესაძლებლობების ნაწილი შეიზღუდება. თუ სტატიით ვერ მოახერხებ ხარვეზის გამოსწორება და შეკითხვის დასმა გსურთ, ჩვენი მხარდაჭერის გუნდი დაგეხმარებათ @FirefoxSupport გვერდის მეშვეობით Twitter-ზე და /r/firefox განყოფილებაში Reddit-ზე.

Avatar for Username

ძიება მხარდაჭერაში

ნუ გაებმებით თაღლითების მახეში მხარდაჭერის საიტზე. აქ არასდროს მოგთხოვენ სატელეფონო ნომერზე დარეკვას, შეტყობინების გამოგზავნას ან პირადი მონაცემების გაზიარებას. გთხოვთ, გვაცნობოთ რამე საეჭვოს შემჩნევისას „დარღვევაზე მოხსენების“ მეშვეობით.

ვრცლად

ეს თემა დაარქივებულია. დასვით ახალი კითხვა, თუ დახმარება გესაჭიროებათ.

How to use sharp SVG Icons in Mozilla Firefox

  • 2 პასუხი
  • 2 მომხმარებელი წააწყდა მსგავს სიძნელეს
  • 1 ნახვა
  • ბოლოს გამოეხმაურა 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

ყველა პასუხი (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==