Friday, May 27, 2016

Svg file size more than a png image


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.


enter image description here


The PNG file have this dimensions: 700x500px: enter image description here


The SVG file have similar dimensions: 755,245x485,663px: enter image description here


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


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



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.


Anchor points pattern


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


There are also certain characters that have squiggly lines when zoomed really 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 it manually (recommended) or tweak the Live Trace Options.




Of course you could just go with the PNG :)


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...