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. I'm being told 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.
Or try Adobe’s offering which explains this very clearly in a video with files to download and work along with:
Start creating with the Pen tool
Can’t tell you that it’s an easy learning curve. Some people seem to find it intuitive and easy to learn, most struggle initially ~ but, well, you know: patience and practice :)
Scalable vector graphic
SVG is the graphics format that crosses over between a purely visual and a code-accessible file, meaning you can manipulate the graphic directly with code. This opens up endless possibilities and it’ll serve us well to be able to work with both aspects: the production of the graphic as well as its implementation in your design.
Whether we're working in design or development - SVG is the one format which allows equal access to the visual by both. Knowing how to edit the SVG graphic and then be able to do so much more via code will serve us well, and hopefully be lots of fun too :)
vectors for web
As with any visual we're planning to use online, an SVG will also require some preparation and optimisation. While our bitmaps can be compressed to reduce file size, a SVG can surprisingly be equally heavy — and the code itself produced by the various apps can vary in amount and quality.
When we work on your graphic, I'd recommend that we save our work in the app-native format to keep as working version. To prepare the file for web, we can usually use the 'save' or 'export', choosing from the options available.
SVG output and optimisation
Before we use the SVG in our 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.
optimised 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" />
Learn from Heydon
Inclusive Design Principles
These Inclusive Design Principles are about putting people first. It’s about designing for the needs of people with permanent, temporary, situational, or changing disabilities — all of us really.
Co-authored by Heydon Pickering, Henny Swan, Léonie Watson, and Ian Pouncey.
WEBBED BRIEFS are brief videos about the web, its technologies, and how to make the most of them. They’re packed with information, fun times(TM), and actual goats.
Making Future Interfaces
Your guide to making and wrapping shapes in CSS, using things like border-radius, clip-path, the CSS Shapes spec’, and paint worklets.
- Affinity Designer
- graphic design software • vector
- by Serif
- PC / MAC
- SVG optimisation tool • svg
- by Jake Archibald
- graphics editor • vector
- open source
- PC / MAC / LINUX
- digital design toolkit • vector
- by Bohemian B.V.
- collaborative interface design tool
- by Figma
- PC / MAC
- vector graphics software
- by Adobe
- PC / MAC
Understanding SVG Coordinate Systems and Transformations
watch talk: SVG in Motion
watch talk: SVG Filters: The Crash Course
This is great enthusiastic talk by Cassie Evans which will surely get you all fired up about SVG ~ at least that's my hope :)
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 :)
videos to watch
Here are some video tutorials which will show you how brilliant SVGs can be :)
- Learning SVG
- SVG: Clipping, Masking, and Filters
This one is a little more advanced and is not something you will need a lot. But it's great fun for experiments and for creative designs ~ well worth exploring.
Animating SVG with CSS
This one's from the brilliant Val Head (one of our people of the web) - again, a little more advanced and not an essential part to master. But... animating graphics with CSS is just so much fun! You should definitely have a play :)