Images on websites traditionally use raster graphics such as GIF, JPEG, or PNG types. With high-density displays and responsive web design necessitating more flexibility, Scalable Vector Graphics (SVG) files offer a better way to decorate the user interface.
SVGs are vector graphics, which are images that are mathematically defined. They use coordinates, polygons, and paths to "draw" the image. In addition to drawing shapes and paths, attributes like the color to fill with and the width of the lines can be defined, and even adjusted and smoothly animated via CSS. In more advanced applications, SVGs can be used to clip or mask a solid color or another image to create interesting "cut-out" effects. In a responsive web design context, one of the major benefits of SVGs is that they can infinitely scale larger or smaller without losing any fidelity.
In comparison, raster images like GIF, JPEG, and PNG store color information for the pixels that comprise an image with specific dimensions. The larger the image, the larger the file will need to be. Also, scaling the image simply stretches the image, degrading the visual quality. Certain file types, like GIF, do allow for animations, which are stored as a series of frames that display in succession. However, the more complex and longer the animation, the larger the file size will be.
All modern browsers released since 2011 have at least basic support for using SVG graphics. Some require additional attributes to define the dimensions and size of the graphics, but SVG is generally safe to use. SVG graphics should be used whenever possible for visuals like logos, icons, and simple graphics. However, they are not appropriate to use in place of photographs or complicated images.
SVG graphics have many advantages over traditional raster graphics. The files are often significantly smaller and can be included directly in the HTML document as a “sprite sheet,” which both improve how quickly the website loads and displays the graphics.
As devices, particularly mobile phones, continue to increase the number of pixels per inch, it is increasingly more important to have crisp graphics. For example, the latest iPhones have resolutions greater than 1080p “HD” TVs with over 400 pixels per inch, but render webpages at just a third of that size. A small icon that is 40 pixels wide on a traditional desktop monitor would need to be 120 pixels wide to display with the same fidelity on an iPhone. Rather than having multiple sizes or a single large image scaled down with CSS for various displays, a single SVG graphic can scale up to any size without losing any quality.
Additionally, CSS can style SVG graphics to change their color, add a background, and match the size to the surrounding text size. When using SVG graphics for icons, color matching and making them a similar size to the font ensures a visual design consistency, reduces bloat by just needing one graphic for all uses, and allows for stock graphics to look custom made.
The easiest way to get started using SVG graphics is with a framework like Font Awesome. After including the framework and placing tags where icons should appear, JavaScript automatically inserts the appropriate SVG graphics. Additional CSS classes can be used to replace bulleted list dots, add borders, rotate, spin loading graphics, etc.
It is also possible to simply use the `src` or `url` attributes of images and backgrounds to point to an SVG file instead of a raster image. Either CSS or inline `width` and `height` attributes can be used to scale images, or `background-size` can be used to size the background SVG appropriately. The disadvantage of this approach is that CSS cannot be used to change the fill color, stroke width, etc. of the SVG graphics.
Placing the SVG directly into the HTML document enables those CSS properties, and then they are referenced in `src` and `url` attributes by their `id`. Build systems like gulp, grunt, or WebPack can automate this process to read a directory of SVG files and inject them into the HTML document, eliminating server requests for these graphics entirely.
SVGs offer flexibility for the user interface. Since the files are often significantly smaller, they can be included in an HTML document which improves website load time and overall graphic disply. Have you used SVG images on websites? Tell us about it below.