6

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?

0

2 Answers 2

10

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.

4
  • But then why is there this tendency of using SVGs for small icons?
    – Alvaro
    Feb 27, 2015 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...) Feb 27, 2015 at 13:33
  • Love the concept "rasterizing on demand". (+1)
    – cockypup
    Feb 27, 2015 at 17:07
  • css-tricks.com/scale-svg
    – Adam
    Sep 10, 2017 at 9:47
-2

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.

7
  • "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. Feb 27, 2015 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 Feb 27, 2015 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?". Feb 27, 2015 at 14:19
  • Did you tried before SVG image is not perfectly scale? Feb 27, 2015 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)" Feb 27, 2015 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.