When should I save as svg?

SVG (Scaleable Vector Graphics) files are ideal for saving, as the name suggests, vector images (geometrically composed images based on points, lines, curves, polygons etc.) Advantages for this format are:

• Potentially smaller file sizes than their rasterized counterparts (jpg, png, gif)

• Infinitely scaleable; you can re-size them and they will never lose their crispness. This makes them great for generating content for the mobile experience, as you don't need multiple versions of an image for multiple densities of display (retina, retina HD, etc.)

• Can be manipulated on the page; alter the colour and alpha of strokes and fills and other fun stuff with CSS and Javascript, or even animate the SVG with javascript.

There are some downsides, or at the very least some considerations to make when evaluating the suitability of SVG for your needs:

• Requires a vector source; if you're using a photograph or other rasterized source, you cannot save directly as an SVG, and while you can use vector authoring tools to convert a rasterized image to vector art, if the source image is very complex (i.e. a photograph) you really wouldn't want to, as the resulting SVG would have far to large a filesize, and for potentially lesser image quality than a well-optimized raster file.

• Not fully-supported on all browsers as yet; check out "Can I use..." for more info. This can result in the image not displaying, or displaying at a different size than you'd like or otherwise behaving differently. At the very least you'd have to specify an alternate image for browsers not supporting SVG, and that can add to your workload

I use SVG for mobile-only designs (it's handy to have around when creating responsive sites) and I wouldn't want to discourage you from using it, but only when the potential benefits (performance, flexibility) outweigh the downsides (browser support) and when the artwork being saved is appropriate.

I hope this answers both your questions. If not, you might find what you're looking for in this excellent article which was of great use to me when I started using SVG.