applied art for the web

Vector graphics


While not the easiest format to work with – vector graphics are simply wonderful: they allow for perfect precision and scale without loss of quality. While in the past, the use of SVG remained a mere promise – you are starting your journey at a time when their use is growing in ever inspiring and creative ways.

Learning the pen tool

The vector pen tool might present a challenge to get to grips with while you are not used to it. But time, patience and practice will pay off. Have a go at completing these tracing templates and you’ll soon get there :)

These are very old files by now – and are still very popular. Apparently they are brilliant for getting you past the first hurdles – so give them a go!
Note that the colour of the guides, i.e. the elements for tracing will depend on the colour settings for guides, in preferences, for easier working, you might want to adjust that to your liking.
download tracing templates

My advice is to persist and learn how to work with vectors. It might take a little while but it will be well worth your time and effort. SVG is now one of the most popular file formats for anything from interface icons, to data visualisations and visual design for interactivity and motion.

SVG output and optimisation

Before you use the SVG in your web project - make sure to optimise :)
This is typically done in two steps: firstly, to prepare the graphic itself, minimising complexity. And secondly, to clean up the code. We will work through this today in our practical exercise.

Have a quick look at this simple SVG - view in browser. This graphic was created in Illustrator and saved as SVG. The comparison below shows the original output on the left, and the final optimised code on the right.

optmised SVG code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
	<path fill="#FFF" stroke="#000" stroke-width="1.567" d="M26.4 71.973V52.896l-4.238-4.223-6.846-6.822L36.312 1.938l20.667 39.913-6.356 6.217-4.939 4.828v19.077" />	
	<path fill="none" stroke="#000" stroke-width="1.567" d="M18.859 58.415h35.653" />	
	<path d="M31.283 71.973h14.401V58.415H31.257z" />	
	<path fill="none" stroke="#000" stroke-width="1.567" d="M36.344 1.938v30.626" />

Sara Soueidan

Highly recommended reading!

watch talk: SVG in Motion

Render 2016 - Sara Soueidan

watch talk: SVG Filters: The Crash Course

SVG Filters: The Crash Course - Sara Soueidan - btconfMUC2018

step 1 — create and optimise the SVG graphic

We will work through this together step-by-step, choosing the bold and chunky font ‘Impact’ for our new icon. Here’s a very quick step-by-step of our process.

stages of graphic edit

step 2 — optimise SVG code

With your clean SVG graphic in hand – we’ll now clean up the code before adding it to our page. Thanks to Jake Archibald – the brilliant SVGOMG will optimise our code according to our chosen settings.

screenshot of SVGOMG online app with graphic + code

step 3 — add SVG to page

There are various ways to add your graphic to a webpage – we will look at three methods, their pros and cons.

download empty webpage (inc featured svg icon + html/css)

screenshot of SVGOMG online app with graphic + code

view demo page

This is great enthusiastic talk by Cassie Evans which will surely get you all fired up about SVG ~ at least that's my hope :)

Interactive web animation with SVG - Cassie Evans from beyond tellerrand.

Do check out Cassie's site and work - you can find her lovely and fun experiments via codepen.io/cassie-codes, plenty of inspiration.
I really like this little interactive demo - move your cursor over the result window :)

See the Pen lil' me. by Cassie Evans (@cassie-codes) on CodePen.