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" />
</svg>
- Affinity Designer
- graphic design software • vector
- by Serif
- PC / MAC
- SVGOMG
- SVG optimisation tool • svg
- by Jake Archibald
- online
- Inkscape
- graphics editor • vector
- open source
- PC / MAC / LINUX
- Sketch
- digital design toolkit • vector
- by Bohemian B.V.
- MAC
- Figma
- collaborative interface design tool
- by Figma
- PC / MAC
- Illustrator
- vector graphics software
- by Adobe
- PC / MAC
Sara Soueidan
Highly recommended reading!
watch talk: SVG in Motion
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.
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.
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)
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.