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 [email protected])
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;
}