SVG – show and tell

Written by: Pete Coles On: 28 Feb 2014 In: Design, Development, Workflow

On Friday 21 February we joined up with our friends Elliot and Kier from Viewport Industries and had a small informal get together, with a series of brief talks.

This show and tell had a simple premise – it’s hard to keep up with all the latest stuff when you are busy working on projects, so we would each share something interesting that we had recently been working on/with.

Show and tell

These mini bites into design and development skills were very insightful and I learnt a lot throughout the afternoon. The day was topped off with Lunch together before, and a couple of beers afterwards.

SVGs

Enough about the day, I’m going to go over some of the bits that I presented on SVGs. So Scalable Vector Graphics are pretty ideal for use on the web, and are really picking up some traction recently. They are crisp on high resolution screens without having to do any fancy responsive image work and can be used at any size you want. Take a look at the SVG demo I prepared to show along with my presentation.

Creating

My favourite program for creating SVGs is Adobe Illustrator. I’ve tried Sketch, but I don’t get on with it for creating vectors. This is just my personal preference however so you can use either, or any other software for that matter.

Prep

To prepare to export your artwork to SVG, you need to outline any text you have used and resize the artboard to crop to the edges of the artwork. You don’t need to expand any stroked objects to fills, and interestingly if you do it will make the file size larger. Next you’ll want to save your artwork as an SVG and accept the default settings (we’ll be optimising them shortly so you don’t need to worry about the code output).

Optimising

I was planning on showing how you can best optimise SVGs to get the file size down, but in the same week as we met Mixture implemented automatic SVG optimisation and as we use Mixture for pretty much all of our projects it was slightly pointless! Mixture uses SVGO which does a mighty good job of stripping out all the unnecessary code from SVGs. Of course you can just use it outside of Mixture too.

Implementing

Once you have your optimised image as lean as possible you’ll need to decide how is best to put it on your website. There are a number of different implementations you can use with SVGs, most commonly using <img>, background-image, or embeding the code straight into the HTML as <svg>. (You can also use <embed>, <object>, and even an <iframe>) but I’ll leave these out for now as they have no further benifits than the other three.

EDIT: Or at least I thought they didn’t until I saw this on codepen if you use any of <embed>, <object>, or <iframe> you can embed javascript within an SVG and append a hex value to the url to change colours within the SVG – pretty cool!

By proxy

This article was written by Jake Giltsoff before he headed to work for Typekit. We’re sure he’ll be happy to answer questions if you have any on twitter though.