u/Fenykepy

Image 1 — Svg rendering and Chrome
Image 2 — Svg rendering and Chrome
▲ 1 r/webdev

Svg rendering and Chrome

Any idea why Chrome doesn't render curvy svg image correctly ?

Upper logo is a png export from the svg in Inkscape (img tag with srcset for 1x, 2x and 3x screens). It renders beautifully on all tested browsers.

Lower logo is the svg directly inlined in the markdown. It looks aliased on Chrome (first screenshot), and as good as the png on Firefox (last screenshot). It also look good on Safari.

Screenshots where made on a 1x screen. Albeit lighter the aliasing persists on a 2x screen, and is unnoticeable on a 3x screen.

I use this logo a lot in my app, in different sizes and colors, so it's more convenient as a svg, but I can't accept this ugly aliasing.

Anything I can do ? I already set shape-rendering="geometricPrecision" on all my <path /> but it doesn't seem to have any effect.

u/Fenykepy — 31 minutes ago