Why is my SVG file so big?

Question

I've just got a designer to convert our old .PNG logo to a .SVG logo as our new Wordpress theme uses a .SVG logo.

The .SVG logo the theme comes with is 3kb and the .SVG logo the designer has created us is 33kb. I've tried optimising the new logo but the best I can get it down to is 14kb.

Original .SVG Logo that came with the theme: https://svgur.com/s/H9u Our new .SVG logo: http://svgur.com/s/HAx

Is there anyway my new logo can be made this small or anywhere as near as small? I'm not sure why our new one is so much bigger in size when they're both .SVG logos. I'd appreciate some advice! :)

Thanks!

Answer 1

The SVG file is bigger because it contains more data (in the form of paths and nodes) in comparison to the data contained in the PNG.

SVGs aren't really comparable to PNG images. One is vector, the other is raster, and never the twain shall meet! It's as if you are making an assumption that SVGs should be as small as a PNG, and that isn't always the case. It could be the case if there were less paths and nodes in the SVG, compared to the number of pixels in a PNG.

One solution is to rasterize the logo at the required size, and export as PNG (or JPEG even). Ask yourself if your logo really needs to be an SVG.

Another solution might be to simplify the paths (by removing unnecessary nodes), as long as you don't go so far as to adversely affect the outlines of the text. You can do this using software such as Adobe Illustrator or Inkscape (which is free).

Answer 2

I would look at the number of anchor points you have in the SVG file. More anchors points can typically increase the file size as there is more information to be rendered.

I opened the two SVG files in Illustrator and screen shot them in outline mode. (It's easier to see the actual paths this way)

This one has 156 anchors points

This one has 686 anchors points

I reduced the 686 down to 149 anchor points, saved it as a new SVG and I got a file size of 4kb which is 1 kb more than the original. There may be other factors at play but I would say this would be a contributing factor and you should look at how you can reduce the amount of anchors

Answer 3

SVG files use uncompressed, human-readable text to describe an image so that it can be recreated with a render engine, such as the one included in your browser.

PNG files use compressed binary data to store exact binary information.

Human-readable text will always have some size overhead compared to vague binary dataflags that only need to be a few bytes (sometimes even bits) in length. Throw in the compression, and well - yeah. It's going to be smaller. But this is the price you pay for endlessly scalable images.

A workaround for this would be to use an SVGZ file, which is just a gzip compressed SVG file. The size reduction depends on the nature of the SVG itself, so it may or may not get as small as the PNG. This is supported in all browsers as far as I'm aware - though from some cursory googling it appears that there's some issues with it in Microsoft Edge.