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.
SVG is also a 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 possiblities and it’ll serve you well to be able to work with both aspects: the production of the graphic as well as its implementation in your design.
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
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 :)
Let’s get to work.
Say you’re involved in a new project and the brand font is missing the @ symbol. Your task is to produce a new graphic to fit the brand, and produce the final as SVG file for use on the web.
step 1 — create and optimise the SVG graphic
We will work through this together in class, 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
By now there are various ways to add your graphic to a webpage – we will look at three methods, their pros and cons.
Related recommended reading
- Tips for Creating Accessible SVG, Léonie Watson
- Icon System with SVG Sprites, Chris Coyier
- An Overview of SVG Sprite Creation Techniques, Sara Soueidan
People & sites
- Veerle Pieters (for design/creation of vector graphics)
- Sara Soueidan (for the now-old tutorials + some new upcoming articles)
- Carie Fisher (for SVG + A11y)
- Chris Coyier / css-tricks
- a11y style guide – SVG
Know your experts: Sara Soueidan
I recommend that you search Sara’s site for SVG – and absorb them all! As well as the rest of her work: her now famous CSS reference on codrops is worth bookmarking, if you have not done so already :)
Comments are closed.