SVG (Scaleable Vector Graphics) is a web-based vector graphic format that can scale to any size without losing clarity. It’s still a surprisingly underutilized file format despite now being supported on the majority of web browsers (including mobile devices). There’s just no excuse anymore for not using this format for your next responsive website. Why are SVGs so great? Well, there are a few big reasons.
SVG files are infinitely scalable.
SVG provides a truly resolution-independent technique for presenting graphics on the Web. This means you can now create the file once and use it anywhere, at any scale and resolution. Now that most browsers successfully render SVG files, this resolution independence can now be realized—and is a definite plus side over your standard image file formats.
SVG files are malleable.
An SVG file can be displayed through the use of CSS Backgrounds, object tags, img tags, or inlined directly into your HTML. It can have classes and ids, supports multiple colors and gradients, and can be manipulated with CSS. You just can’t do that with PNGs. The SVG can contain its own CSS within the SVG file, or can use an external stylesheet if it is inline or loaded within an object tag.
SVG files are relatively lightweight.
Compared to your standard image file formats (JPG, PNG, and GIF), SVG files are generally a lot smaller and therefore won’t slow down your site’s load time. Another huge plus? You only need to use one file for all screen sizes. If you can, use inline SVG for icon systems since it allows for multiple icons in a single file, eliminating the need for additional HTTP requests. This can also help to speed things up a bit.
Some practical applications for SVG include icons, infographics, graphs, illustrations, and animations. I wonder—what will it be used for next?