SVG Guidelines¶
Pros and cons of SVG for images¶
When used as a document format there is usually a compelling reason that makes SVG the only solution. When used as an image format, it is sometimes less obvious whether it would be best to use SVG or a raster image format for any given image. The vector format SVG and raster formats like PNG both have their place. When choosing whether or not to use SVG it is best to understand the advantages and disadvantages of both.
- File size
Whether SVG or a raster format will produce a smaller file for a given image depends very much on the image. For example, consider an image of a path with a gradient fill. The size of an SVG of this image will be the same regardless of the dimensions of the image. On the other hand the size of a raster file of the same image will likely vary tremendously depending on the dimensions of the image since the larger the dimensions the more pixel data the file needs to store. At very small dimensions (the extreme case being 1px x 1px) the raster file will likely be much smaller than the SVG file since it only needs to store one pixel of data. At large dimensions the raster file may be much larger than the SVG file.
- Scalability, with caveats
One of the primary advantages of SVG is that as it is scaled it does not pixelate. However, this is not to say that it always does away with the need to have a collection of raster images for display at different scales. This can be particularly true for icons. While SVG may scale well enough for flat-ish icons without a lot of detail, for icons that try to pack in a lot of detail graphic artists generally want to be able to pixel tweak.
- Performance
While SVG provides a lot of flexibility in terms of scaling, themability, etc. this flexibility depends on doing computations for SVG images at the time they’re displayed, rather than at the time the author creates them. Consider an image that involves some complex gradients and filters. If saved as a raster image then the work to rasterize the gradients and filters takes place on the authors computer before the result is stored in the raster file. This work doesn’t need to be redone when the image is displayed on someone else’s computer. On the other hand, if the image is saved as an SVG image then all this work needs to be done each time the SVG is displayed on someone else’s computer. This isn’t to say that SVG images are always slower than raster equivalents. In fact it can be faster to send vector information from an SVG to a user’s GPU than it is to extract raster data from an equivalent raster image. And even when an SVG image is slower than a raster equivalent, the difference is usually not noticeable. However, just don’t fall into the trap of thinking that SVGs are faster than equivalent raster images, or vice versa. Once again, “it depends”.