MA Web Design + Content Planning materials for applied art for the web • major project

peace sign in Ukrainian colours, blue + yellow

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.

colour

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.

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>
heydon pickering Heydon - one of our 'people of the web'

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

    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.

Sara Soueidan

Sara Soueidan Sara - one of our 'people of the web'

Sara is amazing! You will have come across her work before. Sara is a brilliant front-end developer (and author - 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.

view Sara's Codrops CSS Reference

Highly recommended!

Understanding SVG Coordinate Systems and Transformations

watch talk: SVG in Motion

Render 2016 - Sara Soueidan

watch talk: SVG Filters: The Crash Course

SVG Filters: The Crash Course - Sara Soueidan - btconfMUC2018

Expert insights

People & sites

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.

cassie evans Cassie - one of our 'people of the web'

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.