course notes 2019/20

vector illustration with pen and selection tool

Vector Graphics

Jan 15th 2020

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.

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

view demo page →

Related recommended reading

People & sites

Know your experts: Sara Soueidan

Sara Soueidan
image: partial from © Sara Soueidan

Sara is amazing! You will have come across her work before. Sara is a brilliant front-end developer (and speaker), her expertise includes CSS and Javascript. She has also written many in-depth articles covering some of the complexities and powerful features of SVGs. I was going to give you a list of articles to read, like the brilliant Understanding SVG Coordinate Systems and Transformations (Part 1) – but then realised there are too many :)

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.