Super Velvet Ghosts* — A Workflow

Published in

Skyscanner People

5 min readJul 20, 2015

*aka Scalable Vector Graphics

Many of us are switching to using SVGs as part of being mobile first and serving resolution independent icons and graphics to ensure crispness on HDPI screens — and if you’re not, you should be!

However, our team at Skyscanner have faced a few challenges, but we’re now in a better place, so let us share our learning…

1. Graphics software adds unnecessary bloat to these files.

With Adobe Illustrator being the worst offender, a lot of Graphics software add a lot of extra mark-up to the SVG files, meaning we’re serving larger than necessary files to our users.

Solution: Optimise, Optmise, Optimise

We’ve found tools such as SVGO and Peter Collingridge’s SVG Optimiser to be very good at removing this. However if you open the SVGs in a text editor (they’re just a flavour of XML), you might notice further items you can remove. In particular comments, or references to the tool that created it.

Solution: Make use of CSS to style common paths.

Did you know, you can embed CSS into SVGs? If your artwork contains multiple references to the same thing such as colour, you could create a style and apply this to via a class attribute or if your artwork is one colour, target all paths with a * selector.

2. Scaling and positioning SVGs is challenging

Have you ever tried to position an SVG, or scale an SVG to an exact position, only to find out that its just not quite where it should be?

If you’re using Adobe Illustrator to create these files, you might have noticed that the width and height or view box attribute in the SVG code itself states some wacky numbers. You’d expect a 20px by 20px icon to have the following ‘viewbox=“0 0 20 20”’, however for some unknown reason Adobe Illustrator often creates the viewbox at strange locations, making use of large negative numbers.

Solution: Use Sketch to output SVGs

Sketch, by Bohemium Coding, has been about for the past few years and has gained significant traction in the design community. A tool dedicated for designing UI, it boasts some great features and has a large community developing awesome plugins.

While other products are available, this is a tool already in our toolbox we’ve found to be very good at outputting SVGs that have more accurate viewbox attributes.

Note: If you do use Sketch to output SVGs, be sure to clean up the output by opening the file and removing the sketch references. In particular:

xmlns:sketch=”http://www.bohemiancoding.com/sketch/ns"
<! — Generator: Sketch 3.3.2 (12043) — http://www.bohemiancoding.com/sketch →
<title>Adult</title>
<desc>Created with Sketch.</desc>
<defs></defs>
sketch:type=”MSPage”
sketch:type=”MSShapeGroup”
sketch:type=”MSArtboardGroup”
Plus any path or group IDs that are not required for styling via CSS.

“But Sketch isn’t great for drawing icons”, I hear you say. This is partly true and also partly personal opinion. My current workflow is to create graphics in Adobe Illustrator and then paste them into Sketch for outputting.

“Sketch is Mac only and I’m on a Windows machine… help”, sorry SVGs are probably the least of your worries :D

If you are at all concerned with performance (and you should be) following these techniques will save you 100’s of precious bytes, meaning it’s cheaper for us to serve and cheaper/quicker for our users to download.

“Sketch is Mac only and I’m on a Windows machine… help”, sorry SVGs are probably the least of your worries :D

3. I’ve done all that and my SVG is still massive!

There are some instances where using an SVG instead of a bitmap format such as PNG is suboptimal. Particuarly if your graphic is made up of a lot of complex paths. SVGs are vector graphics, meaning that each point used to create a shape is represented by data. The more points you add, the more data you get = a bigger file size.

Solution: Use the right format for the job

Take this for an example:
This passenger icon is made up of 27 points and has two fill attributes to colour it.

However, if we take a look at the Turkish Airlines logo, which might look simple to the naked eye, it’s actually made up of over 2000 points.

Saving them both as SVG and comparing the file size between the two shows radically different results. The passenger icon with only 27 points, outputs and can be optimised to under 300 bytes whereas the Turkish Airlines logo outputs to over 1 megabyte!

Comparing a simple icon to a more complex logo

If you are facing this problem and, your mobile-first inner-self still wants to support HDPI screens, consider saving them as a PNG at double the size. Serving a double sized image* scaled down via HTML or CSS to the correct size, can actually be much smaller than serving a complex SVG.

At Skyscanner, we took this approach when implementing flags in the header and saw our file size drop dramatically whilst still being able to give users with an HDPI screen a good experience.

*Be wary that where this will work now, for the majority of devices, it is not future proof and you may see yourself having to output triple or even quadruple sized images in the future if you continue to use this technique.

Conclusion

So SVGs are great, they’re lightweight if implemented correctly and mean your graphics will look great on all screen resolutions, no matter the device. Just be sure to optimise them accordingly and always keep an eye on the file size!

And no matter the graphic or file format, they don’t come for free. There will always be an inevitable cost to serve and download the image, so always think if the image is even needed in the first place.