Skip to main content

The Little Code That Could: SVGs and You

An SVG helps speed up website load times

The world is quickly becoming powered by pixels. As the digital age threatens to envelop even the furthest reaches of country living, one thing is for certain: a brand’s web presence is the defacto entry point for the majority of your users. Whether you’re a local artist selling handmade handbags or the global megalomaniac pushing hotel chains out faster than Gordon Ramsay yells at an incompetent chef, you’re practically required to have some form of digital storefront if you want to make it in this new-fangled age of bleeps and bloops. But with a great site comes great responsibility, and you owe it to your customers to deliver a speedy experience that keeps them interested.

In fact, if the studies are right, your business will thank you, too.

Slow and Steady Doesn’t Win The Digital Race

A study by Skilled, a web development group that studies digital trends, stated that a one-second delay in page loading times can lead to an 11% decrease in page views and a 7% loss in conversions. And improvements can net you some big bucks, as much as $7,000/day on sites that generate daily revenues upwards of $100,000.

Even search giant Google realizes that speed is of the essence and states that two seconds should be the maximum-allowable threshold for a site’s loading time. Google itself? They aim for 500 milliseconds, only 100 or so milliseconds faster than the blink of an eye.

But, we don’t all have Google money (if you do, we should be friends) and can’t afford a team of network ninjas poised to strike at the heart of the beast that we call “Site Slowdown.” So, what can you do to put your best foot forward and hone your website into a fit, fighting machine ready for everything a customer throws its way?

Enter the SVG: Math’s Prettier Cousin

While there are a myriad of reasons your site may be sluggish, one of the biggest culprits of slower load times typically falls on poorly optimized images. From inefficient file types to bloated resolutions, every additional pixel can add weight to your site and cost you users for something that could easily be avoided.

We could talk for hours, days even, on the different aspects of image quality and best-practices. But, let’s focus on an image format that many people have either forgotten or, for one reason or another, decided not to use when planning out websites: Scalable Vector Graphics.

Shorthanded as SVG, this file type is a bit different from its JPEG and PNG brethren for one simple reason: it’s made completely from code. This means that, just like you can fully manipulate a website and bend it to your will, so too can you morph and mold an SVG to animate, change colors and even change images as needed, as long as you know a bit of code, preferably either JavaScript, CSS or HTML. It can also be made in most popular design suites, such as InDesign and Photoshop. The best part? Unless your image is incredibly large or incredibly complicated, it takes up much less space in comparison to its more traditional counterparts.

And, from a visibility/SEO standpoint, SVGs are also fully indexed by search engines, which means your site and its contents will be easier to find by potential customers, whether it’s embedded in HTML or utilized as a standalone file.

An Image for Every Occasion

The SVG format, while it can be used for any number of image-based applications, truly shines when utilized for simple, animated graphics (such as a logo) or when you’d like multiple iterations of the same image that are used at different screen resolutions. An image of a gigantic, decadent ice cream sundae may look amazing on a 4k monitor, but loses some of its shimmer when viewed on even the largest of phones. But because SVG images are based around code, it allows you to overlay multiple, scaled-down versions of the same image that fit different screens and gives you a lot more room to play with, which allows your website to be increasingly more friendly across a myriad of devices without the server load. Most web developers and designers have coined the idea of creating sites that work seamlessly, no matter how you’re viewing it, as “responsive design,” and its necessity is becoming increasingly more apparent as more devices hit the market with vastly different resolutions, computing powers, web browsers and features.

SVG files have the potential to help save your server a number of bits and bytes when it comes to small images, icon sets and graphics. But, don’t completely overhaul your image library and convert everything to SVG. Complicated, incredibly detailed images still fit better on your site (and run better) as PNGs and JPEGs. Remember, an SVG is code; If that code has to become long and convoluted in order to work, it isn’t efficient and can just as quickly bog down your load times.

Next time you’re fiddling with a website (or having one built for you), give SVGs a try. You’ll be surprised by how much snappier your website may load up for users, which could mean a better user experience and more rabid fans visiting on a regular basis.