SVG looking bad in small resolution?


I've cretaed a SVG image trying to solve the quality problem when re-sizing the element or scaling it through CSS.

To my surprise, my SVG image looks even worse than the reduced size of the GIF or JPG image.

Here's an image showing what I mean:

enter image description here

I thought SVG would show a better quality because it resizes without quality lost. Why is this happening then?

2/27/2015 12:14:00 PM

Accepted Answer

This is a common misconception. Scalable does not mean infinitely scalable. Not all svg renderers and files are created equal

What vector graphics bring to the table is rasterizing on demand. This means that the application showing them can redo the art. This is wonderfull at big sizes but requires special attention when images are small. This is why fonts are "hintted", in essence the font has bitmap versions for small sizes. Truth is at small scales your image needs to be designed to hit the pixels.

Second theres no particular guarantee that the renderer, that takes the vector data and makes bitmaps, does a good job. Each app does a different result, but here quite clearly the aa engine is antialiasing to black, which is wrong. This is quite typical with engines that do not supersample the graphic.

2/27/2015 12:45:00 PM