What is SVG?
SVG stands for Scalable Vector Graphic. The key word here is “vector.” To understand SVG and vector graphics, it helps to look at its counterpart, raster images. In the world of graphics, you can separate images into two types: vector and raster. Raster images are usually photos, and until recently simple icons saved in raster form. Raster images, in terms of computer graphics, are graphics based on pixels. They have a set pixel per inch (ppi), such as 72 ppi, and a set width/height. Monitors for the most part currently read at 72 ppi, though the new retina display Apple computers can handle images between 220 and 326 ppi depending on the device. So what does this mean for your website? It means that the images/graphics that are raster have a finite resolution. It means that you have to worry about how crisp your icons look with different devices.
This brings us to SVG icons. Unlike raster images, vector graphics are built using math based on paths that are generated through control points. That means the icon no longer has a resolution because its resolution is infinite. The icon can be scaled up or down, but the math that was used to build it does not change, so its file size and resolution do not change. The sprite used in the example is now irrelevant. It can be replaced with an SVG graphic that will work in any device type. It can be scaled with CSS so the different sized devices are no problem, and since it has infinite resolution it will look just as sharp on a retina display as it does on any other monitor.
As said before, no need to worry about resolution anymore. This is clearly the biggest benefit to SVGs, but there are a few other advantages SVG graphics have over raster images.
Colors can easily be changed with CSS. Before, if an icon color needed to be changed, the sprite/icon/graphic would have to be reopened in Photoshop and each instance would need to be corrected. Then the file would need to get saved and uploaded to the site. With an SVG graphic, the fill color of the graphic can be changed with CSS. This saves a lot of time.
Using SVG cuts down on site requests as well. For every image on a site, the site must make an HTTP request to load that image. Caching can help with this. However, for users loading the site for the first time, the more HTTP requests made, the slower the site will load. SVG graphics are generated by the browser processing rather than having to load an image. This will increase a site’s performance.
Not surprisingly, IE8 does not support SVG format. There are a couple of options to overcome this. There are some jQuery plugins such as jVectorMap that give an okay but not perfect fix. The plugin Modernizr can also be used to detect if SVGs are being used and swap to different image fallbacks if necessary. It is important to note that IE8 is being used less and less every day, so this won’t be a problem for too much longer.
SVGs are best for fairly simple objects. Photos cannot be used in SVG form. If an SVG is very complex, it defeats its benefit of being vector-driven because then the browser has to calculate a lot of math to generate the graphic. However, SVGs are usually used for icons anyways so their shapes are almost always simple and easy to generate.
With responsive design becoming more of the norm, sites need to cater to the different view states of their user base. This means keeping images looking crisp no matter if the user is on a site with their mobile device or a 1920x1080 monitor. SVG graphics are a valuable tool to enrich this experience as well as save development time by being versatile and easier to manage. As browsers progress, they will be a valuable option to those wishing to keep a user’s experience consistent no matter the platform.