: Best way to save AI/SVG graphics for website purposes? 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"

@Kevin459

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

Vote Up Vote Down

@Kaufman565

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.

Vote Up Vote Down