Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
I'm using Adobe Ilustrator CS3.
I have a bunch of small images (200x200 px) which I originally created as ".ai". I saved them as ".svg" using option Save for Web & Devices but to my surprise the output file is about 3 times bigger than the ".png" version of the same image.
Why is the ".svg" file bigger than the ".png" file?
I thought that vector graphics are always lighter. Am I choosing wrong options for saving?
What would be the best way to save these graphics for the web?
Vectors will not always be a lighter file size it depends mainly on the information being carried in the svg. For example, I can make a vector shape with a 1000 anchor points in a 200px x 200px file that will most certainly be a larger file size than an equivalently sized png. Similarly, I could shrink an entire magazine illustration to fit into the same 200px x 200px dimensions without losing any information.
I only use these as examples because it helps me answer your question. In all likelihood you are using the right options when saving; however, the complexity of the vectors in the file could be causing the difference in file size.
Since you are using svgs on the web, it might not make sense to have extremely detailed vectors because most users won't ever zoom into the point at which that type of detail matters. There is a simple operation with an object selected in Illustrator: Object → Path → Simplify that you can use as a poor man's technique of removing anchor points in your shape. Hopefully this will allow your object to carry less information without noticeable differences in quality. If that doesn't work you might have to manually rebuild your vector file or accept the increase in file size.
The .svg file is best used for web development. i'll explain were exactly svg are used for example in your website if you want to animate some object, If u want to scale an image that time svg file are best used. Svg wont pixilate as png does
