It’s time for designers and developers to adopt Scalable Vector Graphics (SVG) for websites and digital projects! Images have been part of the web from very early in it’s development. The inclusion of visuals helped fuel its growth and recently become a focal point for the most popular services on the web. Facebook, Google+, Instagram, Vine, Flickr, the list of website that focus on our visual lives continues to grow. That growth is accompanied be a need for faster computers, increased bandwidth, and larger displays to consume our digital lives. Even entry-level phones provide resolutions that rival those used when the internet’s popularity entered most people’s homes.
What is SVG?
Scalable Vector Graphics or SVG is a format for digital graphics that allows images to be rendered using XML as opposed to bitmap data. This has several advantages over pixel data and formats like GIF, JPG, or PNG: lessened file weight, it’s parsable and searchable, and, most importantly, the files can be scaled without a loss in quality.
Many designers and developers are already using vector data on the web without hesitation as Adobe Acrobat (PDF) files. Although PDFs require a plug-in to work, there is increasing support built into browsers. Google’s Chrome and Mozilla’s Firefox both support PDFs natively in recent releases. The same advantage of highly detailed and lightweight files are available even more widely in the form of SVG images and graphics.
Vector graphics are nothing new to visual artists. The format has been around for many years, originally supported by PostScript at the dawn of desktop publishing. Among it’s most notable advantages is its ability to scale without any degradation is quality. It does so by rendering points and lines from mathematical data. It’s lightweight and efficient. It lacks some of the subtle details to capture photography, but is ideal for many styles of graphics and illustrations.
A barrier to vector graphic’s adoption for viewing on the web was wide support from browser manufacturers. For many years, Adobe Flash Player provided ubiquitous support for vector art, but it was largely used for animation and as a video player. With the wide adoption of tablets and smartphones, Flash has lost some of it’s luster as a vehicle for vector graphics with designers and developers.
The Problem SVG Solves
What should drive designers and developers to SVG is the need for graphics that are scalable and responsive to support the vast variety of devices we consume the web from. Many designers have already taken to the trend of responsive web design to answer a growing mobile market and avoid creating multiple websites. Doing so requires creating multiple images for the variety of screens and resolutions. Even those designers who create dedicated mobile and desktop experiences still require a library of images in multiple resolutions for various clients. A single SVG can be used at multiple sizes from a single hosted file.
Those mobile users will also benefit from SVG’s compact size. Being able to deploy images that can be full-screen and larger over cellular networks mean not having to compromise on aesthetics when creating designs and interfaces.
SVG images are also an ideal response to new ultra high-resolution displays being sold with new tablets and laptops from Apple, Microsoft, Asus, and several other manufacturers. These displays simply scale images that are not large enough to populate the screens resulting in blurry or lackluster experiences. Vector images, being resolution agnostic, look perfect regardless of the display’s resolution or technology.
SVG Has Some Challenges
Although SVG has the genetics for an ideal image format, it does have several challenges that may impede wildfire-like adoption. The biggest barrier for SVG is legacy support. Although open source browsers like Firefox and Chrome and mobile browser for iOS and Android have supported SVG since their early builds, Microsoft has been slow to adopt the format. Internet Explorer 9, with wide support for HTML5, is the first IE release to provide rendering for SVG. There is a work around available that substitutes bitmap images for those older browsers-making it ideal for those who need to support older operating systems or minimum business requirements for client work.
For artists used to working with vector images, one of the side-effects from working outside of the constraints of bitmap art is the loss of pixel-perfect image management. Because vector art uses math to render art “at runtime” for each presentation, every computer renders the lines slightly different based on how big it is drawn, how it is scaled, etc. This is most evident in fine-line work and how the computer will “alias” high-contrast edges. I believe the benefits far outweigh this small drawback, but it is an important component in the exchange for a lightweight illustrative file format.
SVG files are often noted for the performance they provide for the size and impact. Because this file format uses plotted points to render the artwork and that work is done real-time by the viewer’s computer, there is a point at which the art’s complexity may have a pixel image be the better solution. These situations are not typical and I would put a well prepared SVG file against the same image as pixel data any day.
Like any other decision for a website’s design and coding, there are many different ways to the same or similar outcome. The solutions are as varied as there are ways to experience them. SVG images are simply another tool in the designer and developer toolkit and one that is more widely supported than ever before.
Making a change like this is a barrier for web developers. It introduces questions about compatibility, work-flow, consistency of quality. A web designer or developer is likely to ask themselves what advantages they hope to achieve as a result of using SVG. The response (and decision to move forward), should be informed by the type of content you create.
I work for a healthcare communications agency. Much of the visual content we plan for and build contains charts, graphs, and infographics. This style of imagery, usually originating as vector artwork is an ideal candidate to deploy as SVG. I say so not only because the line art and graphic style will be more crisp and allow for indexed files, but because the power of SVG images is the ability to provide much greater detail to otherwise illegible graphics.
More efficiency can be gained from an SVG workflow can be gained by using various javascript libraries and extensions to allow for zooming in, and expanding images to reveal small print, additional details, or provide enhanced views. For many agencies and content creators this provides a great advantage with less files to manage and a much more responsive user experience.
Bringing SVG To Your Next (Or Current) Project
Obviously, I am a proponent of scalable vectors. I believe they provide a better solutions many graphics online (or any digital project) and also answer a need within the responsive web design workflow. If you are not familar with vector images, you should be aware that SVGs are not a solve-all solution. One disadvantage to the SVG format is that you are storing all of the various points you’ve used to draw an image. If you have a particularly complicated images, the size of the file is going to grow as well. For some very complex image with many lines and points, it may be much more efficient to convert that image into a bitmap for digital sharing and viewing. When in doubt, test and then test again.
There is little reason to delay in adoption of SVG for your web design projects. The support is in place and from almost every major platform-from mobile to desktop to televisions. If you still have questions, post a comment or visit some of the references I’ve included below.
References:
http://caniuse.com/#feat=svg
http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/
http://dbushell.com/2012/04/03/svg-use-it-already/
http://alistapart.com/article/using-svg-for-flexible-scalable-and-fun-backgrounds-part-i
http://alistapart.com/article/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii
http://en.wikipedia.org/wiki/Scalable_Vector_Graphics