CODEWITHSUNDEEP
google-chromewebkitsvg
Fresheyeball
Fresheyeball

Reputation: 30015

SVG pixelation in chrome

This is very strange. I am using SVG images, because of the low file size, sharp rendering, and scalability ( the objects animate quite a bit ). Its working perfect in FF, ie9, Safari and iPad, but in chrome certain SVG images are rendering very poorly.

SVG in chrome

SVG in safari

Any ideas why this might be happening? The svg files themselves are very small.

Here is some a sample svg

Upvotes: 31

Views: 38662

Answers (4)

Bugs Bunny
Bugs Bunny

Reputation: 2674

None of the workarounds (opacity: 0.99, transform: scale(0.5), …) worked for me, so I went with this instead:

PNG@2x (twice the size PNG)

I simply removed SVGs and went with PNGs instead. To make sure they look nice even on Retina and other high resolution displays I exported them twice the size as actually needed.

This works well in all browsers.

Upvotes: 3

Koonga
Koonga

Reputation: 238

I've run into this bug too with an element wit an SVG background. The workaround was to reduce the opacity by .01, i.e.:

.thing {
    background: url('my-image.svg');
    opacity: 0.99;
}

Upvotes: 2

François O
François O

Reputation: 99

After many researches, I finally found a working fix:
export the svg twice the needed dimensions (I therefore named it [email protected])
then in css, add transform: scale(0.5)

The result in Chrome will look the same as in Firefox.

Upvotes: 9

Fresheyeball
Fresheyeball

Reputation: 30015

So anyway, this is a legit chrome bug. And there is a fix, make the svg 'larger', svg files that internally report as too small cause this bug.

Upvotes: 26

Related Questions