SVG – A web designer’s best friend and not to be feared

SVG (scalable vector graphics) is a type of vector image format that can be used on websites, animations and more. The benefits are plentiful, but in short, apart from the much smaller file size, an SVG won’t go blurry or pixelated when zoomed in on.

Here at Xenon Web Design we’ve started using SVGs in nearly everything we do. From company logos, to UI elements, illustrative icons and even structural background designs, SVG has a wide range of applications.

What is an SVG?

The SVG format for images has been around for over 15 years but has only really seen prevalence on the web in recent years due to increased support from browsers.

Unlike traditional raster images which use thousands of small coloured pixels that go together to create a photograph, SVGs use lines of code to instruct the browser to render lines and shapes. With complex artwork reduced to only a few lines of code, one of the huge benefits is a smaller file size which will take less time to download on a user’s device.

The resulting image can be zoomed in on indefinitely as the browser can keep redrawing the image from the code at every zoom level. This means that only one image needs to be used for all types of device from huge widescreen displays right down to mobile phones.

Best practices for using SVG

So this all sounds great, but when should an SVG be used over other formats? Generally, the rule is quite simple, if you have a photograph or a screenshot, use a JPG or a PNG as this is not suitable for vector. Any other kind of icons, emoticons, menu buttons, UI elements, digital sketches and background patterns should be created as an SVG.

It’s very easy to jump into Adobe Photoshop and quickly save out an icon PNG or GIF, but a small change of habit and a step out of your comfort zone will have your users thanking you!

If you’re anything like me, you were brought up designing websites using only Photoshop and were terrified of the mention of anything vector! After all these years, I’ve finally managed to overcome my fear of Adobe Illustrator and now use it to export SVG code as part of my daily workflow, it’s really simple and you can too.

How do you create an SVG?

In this example, I will use Adobe Illustrator to export an SVG and then optimise it for use on the web. You can use any other vector based program, here at Xenon Web Design we also use Sketch for Mac. If you’re feeling particularly frugal you can even add “filetype:svg” to any Google Image search to return only SVG images, but of course we didn’t tell you that!

Adobe Illustrator has an “Export As…” function that can let you save out a graphic in SVG format. Open a graphic and then click File > Export > Export As…

Choose a location to save your image, then make sure you choose “SVG (svg)” from the format dropdown list and press the Export button.

Illustrator gives you some limited options for optimising the code that it outputs, but there are some better tools out there to remove the unwanted bits and further reduce the file size of the final file, so we will ignore most of these options.

The one option that you want to pay attention to is the “Font” option drop down. If you are using a custom font that you think a user won’t have installed on their machine, to ensure that it renders perfectly it’s best to choose the “Convert To Outlines” options. This will turn the text in your illustration into shapes and outline data, rather than telling the browser to render it as actual text. Once happy, press “OK”.

Your SVG image will then be saved out in the location you chose and is ready for use.

Optimising SVG

Often the code that you get from Illustrator, although rendering fine in the browser, contains lots of unwanted bits such as comments and classes and IDs that aren’t referenced by anything. We can use an online tool to strip these out for us.

Github user and self-proclaimed SVG wizard Jake Archibald (@jaffathecake) has created a really useful tool called SVGOMG that we can use to optimise our code. Once you land on the site, either click “Open SVG” and find the file we created, or I prefer to open my SVG in a text editor and use the “Paste markup” option so I can clearly see the before and after state of our code.

You can see you are presented with a number of options in the form of toggle switches and sliders on the right hand side. Down at the bottom of the page you can clearly see how much off the file size you’ve saved as a percentage, and the option to download and export your code.

Even without touching any of the options, we have managed to save 34.78% off the file size of our example play button graphic, bringing it down to a mere 540 bytes in size! Hopefully this further illustrates the power of using vector, a PNG would be over double the file size at 1.4KB.

Feel free to experiment and play around with the options and finally press the download button to get your optimised image.

Adding an SVG to your website

An SVG can be added to your website in exactly the same was as a traditional image, using the <img> tag. Here’s how we added our play button to a site:

Conclusion

With a few small changes to your workflow, SVG can be used to save massive amounts from image file sizes compared with their raster counterparts. In today’s responsive web, using only one image file that works at all zoom levels is incredibly useful and time-saving.

With all this in mind, there’s really no reason why SVGs shouldn’t be a core tool in your web design toolkit.