Svg file size more than a png image

Question

I have two files with same dimensions and I want to save my vector file to web SVG. Problem is that this file size is more than generate the same file to PNG for web.

I think that I'm exporting settings of the SVG correctly.

The PNG file have this dimensions: 700x500px:

The SVG file have similar dimensions: 755,245x485,663px:

I´m saving the SVG files with this settings (only spanish, sorry):

Why the SVG file size is more than PNG file size?

LINK TO PNG FILE: https://www.dropbox.com/s/wmncderyprnablk/sample.png?dl=0

LINK TO SVG FILE: https://www.dropbox.com/s/bfp5mpjgyuwibf7/sample.svg?dl=0

Answer 1

Can you post the original SVG image and link it here? Really it seems that you've done everything right in the SVG, all your shapes have anchor points.

PNGs are not necessarily larger than SVG!

It could also be the case that the PNG export actually has a lesser file size than SVG. Its really not that uncommon!

Case in point from here -> https://en.wikipedia.org/wiki/File:India-locator-map-blank.svg

SVG File = 421KB

PNG File = 51 KB

SVG File size depends on paths / points.

When the number of paths / anchor points increase, the mathematical information to store them also increases! In these cases a bitmapped version of the file can be more suited for a lesser file size.

For example Try live tracing a photograph and export it as JPEG and then as SVG. The SVG will be far far far larger than the JPEG.

Having said that...

Make sure you have no bitmaps in your SVG, and that complex paths are reduced in size. If you can link the original file, and there is an issue with the export options, I'll edit this answer.

EDIT

After looking at your files,

It is indeed a case of complex SVG instructions. By looking at the shapes and their nature, It seems you've used live trace of Adobe Illustrator to create these vectors. Live Trace can be inefficient, and tweaking the controls can give better results.

Eg: Compare the anchor points on an r in one of your logos and an r I've made myself.

Though the font is not the same, you can see the one below needs far fewer anchor points to be constructed than the one above.

There are also certain characters that have squiggly lines when really zoomed in when they should actually be straight!

If you want to reduce filesize

You have 2 options:

1. Go through the entire document, remove Anchor Points you don't need and modify the ones you do so you can delete other points.

2. Re vectorize the bitmaps you used. Either trace them manually (recommended) or tweak the Live Trace Options.

Of course you could just go with the PNG :)

Answer 2

Hum. Size is relative. You don't really have an SVG file of the same size as your png. In reality, you have a vector file that under this specific conditions match the dimensions of the PNG.

Check this graph.

You can make your SVG small or big in dimensions. If the the data is the same, the file size (weight) is the same.

You can export a png (or whatever bitmap file format) if it is small, it is. If it is not, the file will be bigger.

Probably the proportion is not linear, but it is the basic idea.

So, if file weight is the priority, on some dimensions a PNG will be better, but at some point, the SVG can be a better option.

Answer 3

Beyond file size, there is another factor to consider in the file format choice.

SVG The Graphics processor has to work to compute the paths of an SVG file. The more paths, the more computational power is required.

Bitmaps on the other hand are dependant on filesize. Most screen images are already bitmaps (a map to which color each pixel is assigned to) SVG files have to be converted into bitmap data.

The Tradeoff

So, there is a further tradeoff... BIG SIMPLE SVG files are MUCH more efficient that even relatively small Bitmpas, BUT Complex Vector art expressed as SVG files will take a lot of computing power on the client's side...

Keep this in mind. Choose SVG images where its critical that the image is clear (brand) and where the file is relatively simple.

The image of multiple logos you show in your question is VERY complex. Not only is the file size smaller with the PNG/ Bitmap format, but it will also load faster and more consistently.

SVG is a brilliant format - but its not best for every image - they are better for larger less complex elements that have hard edges.

Answer 4

It is not terribly surprising that a SVG file is bigger than a PNG file. Lets look at the features of the formats.

• PNG is:
  • A Binary format.
  • PNG is compressed with run length compression
• SVG is:
  • a text format
  • XML tagged
  • May or may not be compressed (SVGZ)

Even a pretty simple SVG file is quite large because of the way it is constructed. In reality you should probably compare the size of a SVGZ file to a PNG for a more apples to apples compression.

If a PNG file would be constructed like a SVG file it would be m much bigger than most uncompressed image formats. A color is minimally 4-7 bytes long in a text format while it is allays 3 bytes in binary to make a full color image with a text file under these conditions would make a 1024*1024 image would be 3 megabytes if binary while it would be 7 megabytes in a textual notation. So you see even before compression the SVG is losing out a lot.

Now the fact that the svg is only 2.5 times the size is a testament to how much less data it contains. Try gzipping up the svg and changing the ending to SVGZ and see how much closer the results are after that. Then you have a much more apples to apples comparison. NAd likely your server will do this anyway.