CODEWITHSUNDEEP
htmlcanvassvg
sixtysticks
sixtysticks

Reputation: 826

SVG rendering badly in Firefox

I am working on an infographic with sliding carousel <li>s, but the SVG is showing up pixelated in Firefox, even though the bug with SVGs in FF has been resolved, I thought. Can anyone see a fix for this?

URL: http://weaver-wp.weavertest.com/radiation-infographic/

Upvotes: 3

Views: 5408

Answers (2)

Joseph Lust
Joseph Lust

Reputation: 20015

Use the viewbox property of the element when panning/zoooming. It is much higher performance and simpler to use.

Upvotes: 0

Phrogz
Phrogz

Reputation: 303490

You are zooming your SVG file to a very large size:

background-size: 9730px 30000px;
background-position: -7310px -29250px;

Most browsers will not antialias very large SVG shapes, as it requires too much graphics memory. (This is what we see in Safari and Chrome.) It looks like Firefox is actually rendering the SVG to the size of the canvas and then blowing it up with image interpolation to your cropped region.

The fix for both is the same:
Crop your SVG first and use just the cropped portion as a background.

Upvotes: 5

Related Questions