SVG pixelation in chrome SVG pixelation in chrome google-chrome google-chrome

SVG pixelation in chrome


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.


After many researches, I finally found a working fix:
export the svg twice the needed dimensions (I therefore named it filename@2x.svg)
then in css, add transform: scale(0.5)

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


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;}