SVG – The New Web Design Graphic Standard
February 22, 2016
Something big and wonderful happened recently; something that website designers and web developers have been dreaming about for as long as I’ve been a professional Toronto web designer at Parachute Design. Care to wager a guess? Never mind, I’ll just say it… Microsoft is killing Internet Explorer!
This wonderful news carries with it some big changes for web design in the coming years as I believe the previous wide spread adoption of Internet Explorer will begin to slowly come to an end, along with its frustrating lackluster support; for whatever is the latest and greatest in web technology will no longer hinder the future of web design. I don’t expect these changes to happen overnight as so much of the population still uses Internet Explorer simply because it came preinstalled on their computer devices, and they don’t realize it’s limiting their browsing experience.
One of the most frustrating limitations for most versions of IE has been its lack of SVG support. The SVG Scalable Vector Graphics format was developed nearly 20 years ago – yes, you heard me, nearly 20 years ago – by the World Wide Web Consortium, with a singular goal to offer better two-dimensional graphics for the web. Until just now, we’ve had to forego the use of SVG graphics in most website design projects given that SVG browser support on IE was negligible and such a large portion of the web population was dragging the rest of us down by their decision (or lack-thereof) to rely on Internet Explorer to deliver their web content.
SVG Design Allows for a Faster Website
One of the many beautiful characteristics of SVG is their relatively tiny file size. When it comes to SVG vs raster graphics, SVG images are more than 50% smaller. What impact does this have on web design for the future? Page load speed will dramatically improve, which has been a huge factor for Google and other SEs, plus performance and improved search engine optimization will now be possible. Site speed and performance are now considered one of the cornerstones of Google’s SERP criteria. Just imagine how much we can speed up our websites (and the Internet on a whole) simply by using SVG graphics instead of raster images.
If you’re interested in learning more about how page load speed and website performance can impact your search engine ranking, have a look at our recent blog article on Website Speed and Performance Optimization.
SVG Improves Responsive Web Design
My favourite advantage to using SVG versus traditional raster graphics is made most obvious with the rise of responsive website design and the technology that caused this web design revolution. In the responsive web design environment we ask graphics to become flexible, adaptable, and responsive. A graphics file on a website needs to seamlessly scale from desktop to tablet to mobile and back again, without losing image quality or becoming too taxing on the browser resources. As if this wasn’t enough, the popularity of high resolution displays and a need for Retina graphics requires web designers to create two versions of every image on your website; a standard resolution image and a Retina image version. In many cases, the Retina version of the graphic is quite heavy when it comes to file size and results in the need for extra time and bandwidth to load high resolution interfaces. With SVG design, we only need one tiny, lightweight graphic that can scale up and down with ease. This is going to change the way we design for the web a great deal!
SVG Offers Consistency
One of the most fundamental components of great branding is consistency. This is something that many web designers struggle with (outside of client pressure to give their latest idea a shot, or the urge to design something new and exciting). Creating a consistent experience in responsive web design is tough, as we have to consider so many different devices with varying viewports and resolutions. With SVG design, consistency becomes that much more attainable as we no longer need to worry about how our graphics will behave on every single device. This “one size fits all” characteristic of scalable vector graphics ensures a beautiful web design is consistent across the board.
While it may not be time to start using SVG across the board overnight, I suspect in the coming months we will start seeing the IE drop off, allowing for more reliance on SVG graphics to create faster, more responsive websites that offer the world a more consistent experience, no matter what browser they use to visit our websites.