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

Could you attach the SVG file (testcase) to the bug report, please.