It is now standard practice for us to develop websites that work responsively. This means that the websites we develop must be functional and aesthetically pleasing regardless of the device used for viewing. One of the challenges of responsive web design (RWD) is displaying images, which must be resized dynamically in order to render correctly on various devices and ensure an optimal page load time.
From our experience developing responsive websites, we’ve learned that Scalable Vector Graphics (SVG) is one of the best file formats to use. Not only do SVG images scale well without becoming blurry, but they also offer a number of other benefits to developers, search engine optimisers and the end user.
Why now?
SVG has been around since 1999, so theoretically it’s been available for use for many years. So, why are we making the move to SVG now?
While several of the major web browsers began supporting SVG as early as 2006, it wasn’t until the release of IE9 in 2011 that Internet Explorer began supporting SVG, making it the last of the major web browsers to implement support of SVG. At Limelight Online, we support older versions of the major web browsers for a certain period of time based upon industry best practices. Until just a few weeks ago our support protocol extended through IE8, which prevented us from using SVG images despite the clear performance gains they offered.
We’ve known for a few years that using SVGs would allow us to deliver crisper images across a variety of devices. Display technology has evolved rapidly over the past few years, with Apple leading the way when they introduced Retina Displays in 2010. As display quality increases on monitors, laptops, tablets and mobile devices, the quality of the images used must also increase. So, while images may have looked fine in the past, today they may appear blurry. SVGs ensure that the images are future-proofed to look crisp regardless of display quality.
Having known about the advantages of using SVG for several years, the decision to begin using SVGs was greatly celebrated by our development team. We’re entering a new era of web design and leaving the days of blurry images behind us!
What is SVG?
So what exactly is SVG? SVG (Scalable Vector Graphics) is an XML-based vector image format for two dimensional graphics. SVG graphics offer a number of advantages:
- SVG is XML-based, which means it is perfect for lossless data compression algorithms. Basically this means that when we resize these images, an algorithm figures out what to display rather than just reducing every pixel in the image, which is what causes images to appear blurry. Bottom line, crisper images on all devices!
- SVGs tend to be smaller than other image formats such as PNG and GIF. This is a huge bonus because we strive to ensure optimal page load times on all devices, and especially on mobile devices where page load can be dictated by network speed.
- Because SVG images are defined in XML text files, they can be more easily understood by search engines. While the use of SVGs alone is unlikely to improve your rankings, there may be instances when the use of SVGs can provide an SEO boost (for example, in instances where you are displaying data as images).
When can SVGs be used?
We will use SVG images to create a variety of visual elements including logos, icons, badges and social media icons. SVGs are particularly useful when creating icons that contain short amounts of text, as this file format will keep the text crisp and clear regardless of display size.
SVGs won’t replace all other image formats. There are many instances when a JPG or PNG will be a better choice. For example, when we include photography supplied by our clients, we typically maintain the file format as supplied to maintain image integrity.
So, let’s see how this goes!
Using SVGs sounds pretty cool, huh? I feel like I’ve been waiting ages to start coding websites with SVG images and I’m so excited to finally get the green light. I’m about to undertake my very first website build using SVG, so I’ll let you know how it goes. Stay tuned for a follow up post about my experience!