eyelearn.org

applied art for the web

Vector graphics

AT symbol steps

Video tutorial on the workshop exercise to create a custom @ symbol icon, optimise and use the final SVG.

#1: edit type:
font to vector shape

  1. new file: 512x512px, RGB
  2. type lowercase 'a' and set typeface to IMPACT
    set large / scale up and centre align to artboard
  3. make copy of letter for comparison
  4. select copy and create outlines:
    (cmd/ctrl + SHIFT + O) /or/
    top menu: Type > Create Outlines

#2: add curved line:
editing path & stroke

  1. delete font version and draw circle around the letter with the Ellipsis tool (L), adjust fill to none and stroke to black
  2. select both elements and centre align
  3. select scissor tool (C) and click the bottom-most anchor point of the circle
    this will split the points and open the path for editing
  4. use the direct selection tool (A) to edit your path to fit, adjust stroke weight accordingly
  5. set the end cap and experiment with the stroke profiles, switching direction as required
  6. try out the width tool (SHIFT + W) to edit the tapering of line by clicking and dragging the stroke
  7. make a copy of the currently editable version, lock and hide and keep as easy way to work on fresh edits
  8. select the path with your final stroke settings applied - and expand stroke:
    top menu: Object > Path > Expand Stroke
  9. tidy up the graphic, switching back and forth between preview/outline views
    (CMND/CTRL + Y)
  10. to simplify graphic, select both shapes to merge via UNITE pathfinder
  11. further optimisation via reducing anchor points:
    top menu: Object > Path > Simplify
  12. save as for SVG + export as for PNG (fallback)

#3: SVOMG:
optimise SVG code

  1. open SVG in code editor
  2. save file as v2 + copy all code
  3. in your browser, go to SVGOMG
    and paste code to optimise
  4. copy optimised code, paste into v2 + save
    compare code - optimised file, ready to go :)

step 1 — create and optimise the SVG graphic

We will work through this together step-by-step, choosing the bold and chunky font ‘Impact’ for our new icon. Here’s a very quick step-by-step of our process.

stages of graphic edit

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.

screenshot of SVGOMG online app with graphic + code

step 3 — add SVG to page

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)

screenshot of SVGOMG online app with graphic + code

view demo page