course notes 2015/16

Vector graphics

Feb 2nd 2016

illustrator tools
the beauty of vectors

Vector graphics are wonderful ~ they allow for prefect precision and scale without loss of quality. With SVGs now  the web – you should definitely spend time to create vector graphics for your sites and understand their use on the web.

If you are completely new to Illustrator – here are a few references to help you get started :) Please note that these are fairly old by now, I am sharing them as reference as I’ve been told they’re still very useful.

The pen tool does present a challenge while you are not used to it. Have a go at completing these tracing templates and you’ll soon get to grips with it :)
↓ download tracing templates

SVG ~ heaven and hell

One of the most exciting developments in regard to web graphics is the possibility of finally using SVG for our vector work. Though you still need to be cautious, consider older browsers and ensure to put in place required fallbacks. There is plenty of documentation out there by now, and you should take time to do some reading and plenty of experimentation and testing before you commit to SVGs for your web project. But it is worth your time and attention – support from browsers is already pretty good for the latest versions :)

Little over 2 years ago, I worked with my team on using SVGs with animation, mainly created for this page of our site, how we work, as well as our error page. While there are now different and better ways to include SVG on your webpage, these refereneces will still be useful. The following list of references, articles and tools is what we went through when figuring out how to best use SVG, combined with the CSS animations.

a few notes on what we’ve learnt:

  • make sure your vector shape is as clean as possible
    (I’m using pathfinders a lot, keeping original shapes – best expanded for lessor points, cleaner shape = less code, less weight)
  • always apply transformation to <svg> element, not <g> element
  • ideally, place SVG into source code for fewer calls to server
  • major differences in SVG rendering between Chrome/Safari/Opera and Firefox – work/test across all to ensure solid display
  • check across vector apps for SVG output – compare / always optimise for less code

In regards to the different SVG outputs – have a look at the difference between the code from Illustrator (left) and Inkscape (right).

SVG code comparison

SVG ~ let’s take a look.

pen-icon

This pen icon shown here is the PNG version, shown at it’s original size. At this size, on medium to larger screens this graphic is now scaled and displays at hight quality. Note how badly it pixellates when scaled up on smaller screen sizes (something you will of course always avoid.). This scaling was put in place on purpose – for an easy comparison with the final SVG implementation we will work on now.

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 Optimiser by Peter Collingridge 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="http://www.w3.org/2000/svg" x="0" y="0" width="72" height="72" viewBox="0 0 72 72" enable-background="new 0 0 72 72" xml:space="preserve">
		<symbol>
			<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"/>
		</symbol>
	</svg>
<!-- 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>
	</svg>
<!-- 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%.

Know your experts: Sara Soueidan

Sara Soueidan

image: partial from sarasoueidan.com/about © Sara Soueidan

Sara is amazing! You might have come across her work before. She has written many in-deth 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 :)

related recommended reading

To combine your vector graphics with a bit of coding, let’s take a look at creating and implementing sprite rollovers.

sprite iconTASK
replace the icon for the CTA with your own version – at double its original size.

→ view demo
↓ download demo files

10 Comments

  1. Aisha

    Feb 12th 2016

    http://aishaeltahlawi.users41.interdns.co.uk/sprite/

  2. prisca

    Feb 12th 2016

    Aisha ~ how lovely :)
    what a cute little sprite ~ nice work!

  3. Pete Kasamias

    Feb 12th 2016

    Hello,

    Here’s my attempt:
    http://pkasamias.users41.interdns.co.uk/art/sprite/bird/bird.html

    Kindest regards,
    Pete

  4. Theresa

    Feb 12th 2016

    http://theresamorcos.users40.interdns.co.uk/website/sprite-exercise/index.html

  5. L u n g

    Feb 15th 2016

    http://lshmemoirs.co.uk/applied_art/sprite_svg/

  6. Hannah

    Feb 16th 2016

    A little late to the party, but here’s one I did. http://hannahboom.users41.interdns.co.uk/applied_art/aa_svgsprite/index.html

  7. prisca

    Feb 16th 2016

    how lovely :) thanks for showing your sprites, these are wonderful :)

    Hope you found this fun as well as a useful tachnique to learn.

  8. Claudia

    Feb 17th 2016

    First attempt, will create my own one asap:
    https://www.torproject.org.interdns.co.uk/cta-sprite/index.html

  9. Claudia

    Feb 17th 2016

    Sorry Prisca, this is the correct link:
    http://cokyerefosu.users41.interdns.co.uk/cta-sprite/index.html

  10. Smita Roy

    Feb 18th 2016

    http://smitaroy.users40.interdns.co.uk/barbie/

    Regards
    Smita