SVG vs. PNG vs. JPEG

comparing image quality and size

This is a simple experiement that takes a look at the performance (quality/size) of flat, jpg & png images vs SVG’s. In this case, SVG’s are inline. Flat images are exported from illustrator, Save for web with the following settings to maximize quality.

Jpg’s, and Png’s, are then run through CodeKit for additional optimization. SVG’s are exported from Illustrator as SVG 1.1, then optimized with SVGO.

First Test, large gradient

Jpeg


optimized size: 51.1KB

Png


optimized size:47.6KB

SVG, inline

optimized size: 912 bytes
The winner here, is clearly the SVG, but things are just getting started. There is still really only ONE svg shape. Even so, the svg gradient is so beatifully smooth, where as the JPEG & PNG’s have clear banding.

Second Test, more shapes!

Jpeg


optimized size: 81.4KB

Png


optimized size: 85.1KB

SVG, inline

optimized size:6.1KB

Even after adding a number of shapes, points, gradients, etc. to the svg, it still remains to be significantly smaller. Of course, there is still the added benifit of being able to zoom in withouth degrading quality.

A true test

Jpeg


optimized size: 259KB

Png


optimized size: 228KB

Svg

Optimized, images embeded: 515KB

This is where it has gotten interesting. Adding a ton of details to the illustration started to bring the size up considerably. At 1280 x 535, the sizes between the SVG (non-ebbeded images) and flat images aren’t too far off.

The major bummer

SVG’s don’t work with Illustrator gradient meshes; The final SVG (above) uses “embed images” to unclude tiny png’s of the areas which I’m using gradient meshes. Unfortunately, this doesn’t seem to be quite consistent. If you noticed, the SVG version is missing the sun rays.

This is what it looks like whithout embeded images.

Sadly, the boat looks as though it has sank, and the light from the sun is missing.

Summary

I created this image specifically to push the limits of (in this case, inline) SVG’s as much as possible. There are 16,669 anchor points, 765 circles, and a whole lot of other paths/shapes. This is atypical of common graphics, but not uncommon for some high-end vector pieces. There are of course compatibility issues to be aware of but those limitations are slowly disapearing and work arounds are available if necessary.

Even with the size, and absence of gradient meshes, I can think of a number of great use cases for this technique of using SVG’s; any time you want to showcase some fine detail, this is a great way to go (if you have compatibility fallbacks in place, of course)

The flat images crush a lot of the small details in the distant mountains, and clouds. If these were something you wanted to show, you would either need to render out small, zoomed-in versions of your artwork, or export a much larger, higher resolution image.

If we render a high-res version, enough to see the small details(for this image) we would need to have a at least 4000px wide, and even then, details are pixely.


4000 x 1650 px, Optimized: 908.1KB

I would love to for this to be expanded on more and see some of my favorite vector art online, in SVG form!