course notes 2018/19

vector illustration with pen and selection tool

Vector graphics

Jan 16th 2019

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 SVGs are now not only possible but their use is growing in ever inspiring and creative ways.

It 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.

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

Let’s take a look.

A comparison between the same image as both PNG and SVG will highlight what a difference there is between vector and bitmap — and why exactly it is worth the time and effort ;

The first pen icon shown here is the PNG version, shown at 200% its original size (original file: 72x72px – shown here at 144x144px). Note how badly it pixellates when scaled up like this (something you will of course always avoid.). This scaling was put in place purely for demo purpose.

pen icon

And the second pen icon is the same image as SVG, same scale factor to 200% — what a difference! Be warned, once you get used to this crisp quality, you’ll be hooked :)

Let’s start by opening the SVG in the browser and taking a look at the code. This is the output by Illustrator, before any optimisation of the vectors; code is untouched and as generated via the ‘save as’ command.

↓ download icon file

Open the file in your favourite vector app and let’s see what could be optimised in terms of the graphic itself. Lastly, use the brilliant SVG Editor by Peter Collingridge, or Jake Archibald’s SVGOMG, to optimise the code – preview / test and see :)

We will use a technique which has been written about by both Chris
Coyier and Sara Soueidan – please check the recommended reading links
for detailed references.

To display our SVG as part of a webpage – we will first embed the SVG into our HTML page.

<!-- START icon definition -->				
<svg style="display: none;" version="1.1" xmlns="" x="0" y="0" width="72" height="72" viewBox="0 0 72 72" enable-background="new 0 0 72 72" xml:space="preserve">
		<path id="pen" d="M53.3 56h-7.6l0-4.8 10.8-10.7L35.2 1.3 15.4 41l10.6 10.7L26.1 56h-6.4l0 1h6.4l0 12h1.5l0-12h3.9l0 12h14.4l0-12h7.6L53.3 56zM27.5 56l0-4.9L17.2 40.8 34.5 5.9l0.1 25.9 1.5 0L36 5.9 54.6 40.2 44 50.6v5.4l-13 0V56H27.5z"></path>
<!-- END icon definition -->

This now defines the embedded SVG as a container for the pen icon. It is hidden and our graphic will now be displayed via <use> in whichever context required.

<!-- START show icon -->
<svg width="72" height="72" viewBox="0 0 72 72" xml:space="preserve">
	<use xlink:href="#pen"></use>
<!-- END show icon -->

Once done – we can now proceed to style our icon, work on layout, RWD and all the rest. Here’s a quick demo of the final result – showing off the sharp lines of our SVG by scaling the icon to 100%.

Related recommended reading

People & sites

Know your experts: Sara Soueidan

Sara Soueidan
image: partial from © Sara Soueidan

Sara is amazing! You might 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.