Last Updated: February 25, 2016
· f055

How to make SVGs on your website look razor-sharp?

Turns out, only webkit-based browsers can display SVGs properly in high-quality without jagging. All other browsers don't bother unless the SVG is set to be displayed in its actual size. So, if you prepare and SVG image that is 30px wide and 20px high, you have show it on your website in these exact measures. Any upscale or downscale will result in loss of quality.

Say Thanks

3 Responses
Add your response

Cartoony brian

There's also this tip, which suggest setting the viewport for your SVG to very large values. According to the author, scaling down has fewer jagginess issues than scaling up.

over 1 year ago ·

Interesting idea, thanks (btw it also applies to Opera, it suffers the same svg-scaling problems), could be enough for a workaround.

over 1 year ago ·
Profileimage b w 500

This is dumb! I thought that was exactly the problem SVG tried to solve...

over 1 year ago ·