May 26, 2018 · SVG · Web · PNG

Comparing SVG and PNG File Sizes

You may have heard that SVG have the lowest size while offering the best quality. Is it true? Why are developers still using srcset and generating PNG @ 1x, 2x and 3x resolution? Can you save any bandwidth with using SVG instead of PNG?

Depending on your use cases, SVG can offer anything from 60% to 80% bandwidth savings, higher image quality, faster loading and a simplified workflow.

Why are file sizes important?

We all know that page speed affects SEO (Search Engine Optimization) ranking, and one of the easiest way to ensure our pages load faster, is to optimize our images.

With the proliferation of high resolution devices like retina displays, developers need to ensure images are displayed clearly and as sharp as possible across all devices, and therefore the usage of srcset attribute on an <img> tag, to ensure browsers load high resolution images only when necessary to save bandwidth.

If you are inserting a photo from a camera or using srcset for art direction, then this post is not for you, as using srcset is the only option. But, if you have control on the production of the image, and can convert it to SVG or PNG, then selecting the right format may save you a lot of bandwidth and your users will thank you for it!

Image selection

For the purpose of this comparison, we shall be looking at using <img> tag to embed our SVG. It would'nt be fair to use <object> or other tags that allow our SVG to reference external CSS and fonts to save file size, where PNG images cannot do so. Therefore, all image formats must be able to be displayed correctly, on its own without external references, see The best way to embed SVG on HTML (2018).

A total of 3 images will be used, a simple and a complex image without text, and also a general image with text and fonts. These images are chosen more by convenience rather then by selection (more about this later), so your results may vary.

All images including SVG and PNG are optimized with industry leading optimizers to squeeze further reduction in file size. Especially for PNG, these optimizations can result in about 70% reduction.

Simple image without text

Simple penrose triangle with no text
Simple penrose triangle with no text
3rd party
Nano (svgz)
PNG @ 1x
PNG @ 2x
PNG @ 3x

All PNG files are optimized using tinypng

It is clear for simple images, SVG has a clear advantage. Straight out of the editor, SVG already has one of the lowest file size at 4.75KB (we used, your results may vary).

After passing through SVG optimizers, Nano offers the lowest file size at 2.72KB for savings of 42.7%. What's even more amazing is the 621B file size when using GZip compression, resulting in a whopping 86.9% savings. While we are not advocating content encoding, you could easily setup your servers for transfer encoding and still save 86.9% bandwidth!

Before optimization, PNG images are about 70% larger in size. Even after optimization, PNG images are way bigger than SVG, so the winner is clear in this case. Since PNG is already a compressed format, using GZip compression on PNG images does not yield much savings, if any (6.33KB unzipped, 6.38KB zipped).

SVG (1) vs PNG (0)

Clearly, SVG with GZip at 621B versus 6.33KB for PNG, results in 90.2% bandwidth savings. Therefore, for simple images, there's a ton of bandwidth to be saved when using SVG compared to PNG. Just ensure your SVG images passes through an optimizer (we recommend Nano).

Complex image without text

Complex image with no text
Complex image with no text
3rd party
Nano (svgz)
PNG @ 1x
PNG @ 2x
PNG @ 3x

The complex image was chosen to ensure we have a SVG file that is bigger than its equivalent PNG @1x image, as complex patterns can sometimes have a larger file size compared to its equivalent raster image format. Coming in at 191KB straight off the editor, it is about 3.5 times bigger than PNG at 56.3KB.

After optimization, again Nano has the smallest file size at 82.7KB, while still bigger than PNG @1x, one could argue that a single SVG image renders beautifully on all resolution, while PNG would require 3 files, @1x, @2x and @3x to cover the same, resulting in a more complicated workflow and penalizing users with high resolution.

Amazingly, GZip compression reduces the SVG to 13.6KB, for an unbelievable file size savings of 92.9%. This single file renders sharply on devices of all resolutions, reducing bandwidth and rewarding users using high resolution displays with fast rendering.

SVG (2) vs PNG (0)

With compressed SVG with GZip coming in at 13.6KB vs 56.3KB for PNG, for a 75.8% reduction in size, the advantage is incomparable. If you have not turned on transfer encoding on your servers, then you should, because even for a complex SVG, the file size and bandwidth savings are substantial when using SVG compared to using PNG, in addition to a reduction in workflow complexity.

General image with text and fonts

General image with text and fonts
General image with text and fonts
3rd party
Nano (svgz)
PNG @ 1x
PNG @ 2x
PNG @ 3x

For an SVG image with text, when used on an <img> tag, all web fonts will fail to render on ALL browsers due to security reasons. In order to display text with its intended fonts, we have to go through a complicated manual process to embed fonts into the SVG file.

For our test image, we used Roboto and bold + normal, so we embedded these 2 fonts (minus italics and bold + italics) into the SVG, and the file size came up to 70.3KB, a whopping 6 times the equivalent PNG at 12.0KB. As expected, 3rd party SVG optimizer produces very little savings at 6.4%.

Easily embedding fonts with Nano

In addition to optimizing SVG, Nano also optimizes fonts, in a single automated step. All that is needed is dragging and dropping an SVG, and Nano will scan the SVG, detect any fonts beind used, and selectively insert only the required fonts. Compared to manually embedding fonts, Nano offers a much simpler automated workflow.

Nano is able to compress embedded fonts to 22.0KB, substantially smaller compared to embedding fonts manually. With GZip compression, the SVG size is brought down to only 11.7KB, a savings of 83.4%, slightly smaller then equivalent PNG @1x size.

SVG (3) vs PNG (0)

At the time of this writing, Nano is the only SVG optimizer able to compress, embed and optimize fonts. What this means is that you can have a single SVG file that will render beautifully on all resolutions, without resorting to multiple PNG and a complicated workflow, and still have a file size that is arguably smaller than equivalent PNG size, saving substantial bandwidth and resulting in speedy loading of your images.

In addition, because fonts were embedded, your images will appear incomparably sharper and clearer on all devices compared to raster images (PNG). For example, on windows, ClearType will automatically apply to these SVG images with embedded fonts.

SVG images with embedded text appear much sharper compared with rasterized PNG
SVG images with embedded text appear much sharper compared with rasterized PNG
Because of rasterization, PNG text will not enjoy font system optimizations
Because of rasterization, PNG text will not enjoy font system optimizations


With or without text, SVG images trumps PNG images on all counts. With Nano SVG optimizer, file sizes are very small and yet allow users to have a simplified workflow that will render extremely well under all resolutions.

Assuming you have the 3 images above on your site, and you have 10,000 hits on each image, with 50% of them normal resolution, 40% 2X and 10% 3x resolution. If you use PNG:

  • Simple image: 5000 * 6.33KB + 4000 * 11.5KB + 1000 * 16.9KB = 94.5KB
  • Complex image: 5000 * 56.3KB + 4000 * 146KB + 1000 * 249KB = 1114.5KB
  • Image with text: 5000 * 12.0KB + 4000 * 26.5KB + 1000 * 42.6KB = 208.6KB

Your total bandwidth will be: 1417.65KB

If you use Nano compressed SVG with GZip compression:

  • Simple image: 10000 * 621B = 6.21KB
  • Complex image: 10000 * 13.6KB = 136KB
  • Image with text: 10000 * 11.7KB = 117KB

Your total bandwidth will be: 259.21KB

Your total savings will be 1158.4KB, or a whopping 81.7% bandwidth reduction, a significant amount by any measure. If you have a highly trafficked site, these small images offer your users much better image quality, faster loading speed even on high resolution displays and substantial workflow and bandwidth savings for you. What's not to like?

Like this article? Share it with your friends!

Thomas Yip

Founder at, created Electra, engineering nerd.


July 20, 2018 · SVG · Web · Diagramming

You can now use Google Fonts in Vecta

When you’re drawing diagrams or illustrations in Vecta, sometimes you find yourself wanting to use some of your favorite fonts in your drawings. Now you can. Google fonts is now available in Vecta, and you have more than 800 font families to choos...

May 27, 2018 · SVG · Web · PNG

Making SVG easier to use (Why we build Nano)

There are a multitude of ways to embed SVG, each of them fraught with gotchas and compromises. In our quest to make SVG easier to use, we looked at different approaches and this is the story on why we build Nano.

May 25, 2018 · SVG · Web

The best way to embed SVG on HTML (2018)

You've probably came across various ways to embed SVG in HTML, but with the latest browser and technology updates, do we still need an <object> tag or can we use <img> instead? What are their pros and cons and how do they compare?

Sign up for a FREE Vecta account and start
creating your diagram online.

Create a Free Account