Overview

SVGs (Scalable Vector Graphics) are very powerful and have many advantages over raster-based images. Chiefly, that they are vector-based and can rescale to any size with no change in quality. Additionally, the properties of an SVG can be altered with CSS, meaning that a single image can be used in many different sizes and colors (with caveats). One often overlooked benefit of SVGs is that the file is plaintext and can be versioned controlled, searched and edited just like any other code. It’s best to think of SVG as an image format that can be opened in either a vector image editor or a text code editor.

With all of the vectory goodness there are certainly some limitations to consider. SVG isn’t for every type of image. Photographs should almost always be JPG, and screenshots are usually best as PNG. The most typical use for SVGs are as icons and simple design elements. SVG images can be used on any modern browser and are supported by older browsers including IE9.

From a usage standpoint the most significant limitation is the complexity of the format. JPGs and PNGs don’t have many settings are easy to export and implement. A PNG either works or doesn’t. An SVG on the other hand has numerous export options and may work only partially, seeming to work at first.

Depending on how an SVG image is exported it may be more or less useful for certain applications. For example, an SVG can be exported in such a way that it automatically scales to the largest size possible. Though note that just because an SVG image can be scaled infinitely without loss of quality, the artwork itself may not work well at certain sizes.