Closed Bug 1253193 Opened 4 years ago Closed 7 months ago

Normal SVGs are rendered to a blurry image in Firefox

Categories

(Core :: SVG, defect)

44 Branch
defect
Not set

Tracking

()

RESOLVED DUPLICATE of bug 608812

People

(Reporter: rebecca.wurster, Unassigned)

References

()

Details

Attachments

(1 file)

Attached image 7Swbc.png
User Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:44.0) Gecko/20100101 Firefox/44.0
Build ID: 20160210153822

Steps to reproduce:

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 


Actual results:

lines are rendered to half pixels (which makes the icon blurry)


Expected results:

lines stay the way that they were created (which would result in a crisp, sharp icon) - you can see this result in Google Chrome
Keywords: icon
Could you attach the SVG file (testcase) to the bug report, please.
Flags: needinfo?(rebecca.wurster)
Component: Untriaged → SVG
Product: Firefox → Core
Flags: needinfo?(rebecca.wurster)
Keywords: icon
Status: UNCONFIRMED → RESOLVED
Closed: 7 months ago
Resolution: --- → DUPLICATE
Duplicate of bug: 608812
You need to log in before you can comment on or make changes to this bug.