I'm using .svg images for a site I'm working on, the svg images look fantastic in Chrome, however it is very pixelated in Firefox and IE. How can I resolve this issue?
Firefox:
Chrome:
HTML code:
CSS code:
I had this problem. It had to do with my windows display scaling and the browsers zoom.
Zoom out the browser to about 80% and see if it clears up.
My DPI was 120% or something. (Work laptop)
Doesn't work, still jaggy
How's it look if you open the svg by itself?
This is another svg that I opened in Firefox (on the same site)
Original source opened in Google Chrome
You might run the svg through inkscape and see if theres a problem with the shapes/paths. Your first example is missing lines entirely.
I have confirmed with the designers that there is totally nothing wrong with the svg, it looks as if Firefox fails to render it properly and it wont scale well too.
I can't really test now (at work), but you're not the first with this issue:
Apparently the most common thing to do is setting a fixed size for the image so Firefox renders it at exactly this size. As I understand otherwise Firefox renders on a different canvas and scales the rasterized image afterwards.
There's also a still open Bug, but that seems to be a different issue (only happening after resize).