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?


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.

| improve this answer | |
  • But then why is there this tendency of using SVGs for small icons? – Alvaro Feb 27 '15 at 12:51
  • Because you can easily change components of the logo designs for different sizes. For example, for the smallest size, do you really need all lines or the truck and the substructure of the cargo area? Wouldn't a simplified truck model and cargo of the same color, but less subdivisions do just fine? It's not "one design fits all sizes", but rather "one design is easily adaptable to all sizes". See tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css for one example of how CSS can be used to make a logo simple if less space is available. (Maybe this should be an answer...) – Michael Schumacher Feb 27 '15 at 13:33
  • Love the concept "rasterizing on demand". (+1) – cockypup Feb 27 '15 at 17:07
  • css-tricks.com/scale-svg – Adam Sep 10 '17 at 9:47

Totally wrong idea, I disagree with you. SVG image better than PNG lot. It never lose quality while you reducing size. And easier way to changing Design control, compress well and support to all devices well.

| improve this answer | |
  • "easier way to changing Design control" is the crucial point, the remainder of you answer are not that helpful. For example, a carefully designed PNG icon will look vastly better at a small than an arbitrary SVG icon that has merely been scaled down. SVGs advantage there is that it can be designed carefully as well, has the added charm that it can e.g. be controlled via SVG, and can be the source for those carefully desinged PNG icons - which you might still need just because SVG is not supported by the device you are using. – Michael Schumacher Feb 27 '15 at 14:03
  • Mr.Michael am using SVG image for my client I can do the all type of work (resize, design control and all devices). If you have more doubt can you please check the link given below css-tricks.com/using-svg – Senthilkumar Feb 27 '15 at 14:11
  • Have looked at it. I still maintain that you got the most important part of SVG in your answer, but the remainder is less helpful (note that I didn't write "bad" or "wrong"). The question here is effectively "Why does the scaled down SVG file look (subjectively) worse than a scaled down PNG file; somebody told me that SVG files scale perfectly?". – Michael Schumacher Feb 27 '15 at 14:19
  • Did you tried before SVG image is not perfectly scale? – Senthilkumar Feb 27 '15 at 15:24
  • I have told you already "am using SVG image for my client I can do the all type of work (resize, design control and all devices)" – Senthilkumar Feb 27 '15 at 15:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.