#1: edit type:
font to vector shape
- new file: 512x512px, RGB
- type lowercase 'a' and set typeface to IMPACT
set large / scale up and centre align to artboard - make copy of letter for comparison
- select copy and create outlines:
(cmd/ctrl + SHIFT + O) /or/
top menu: Type > Create Outlines
#2: add curved line:
editing path & stroke
- delete font version and draw circle around the letter with the Ellipsis tool (L), adjust fill to none and stroke to black
- select both elements and centre align
- 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 - use the direct selection tool (A) to edit your path to fit, adjust stroke weight accordingly
- set the end cap and experiment with the stroke profiles, switching direction as required
- try out the width tool (SHIFT + W) to edit the tapering of line by clicking and dragging the stroke
- make a copy of the currently editable version, lock and hide and keep as easy way to work on fresh edits
- select the path with your final stroke settings applied - and
expand stroke:
top menu: Object > Path > Expand Stroke - tidy up the graphic, switching back and forth between
preview/outline views
(CMND/CTRL + Y) - to simplify graphic, select both shapes to merge via UNITE pathfinder
- further optimisation via reducing anchor points:
top menu: Object > Path > Simplify - save as for SVG + export as for PNG (fallback)
#3: SVGOMG:
optimise SVG code
At this point, we only have a single graphic, our icon itself. If we wanted to use it as it is, we could simply optimise it and add it to our page. For the sprite set up, check the next steps.
- open SVG in code editor
- save file as v2 + copy all code
- in your browser, go to
SVGOMG
and paste code to optimise - copy optimised code, paste into v2 + save
compare code - optimised file, ready to go :)
Using the sprite method allows us to combine several graphics into one single SVG file and implement the visuals via code. Depending on our method, we can then use CSS to control the SVG. This technique can be used to present static graphics, interactive motion effects and even animation.
The principle of sprites is simple: a single file contains multiple images which can vary in size/proportion. The X (horizontal) and/or Y (vertical) coordinates are used to control the position of the image's content to display the relevant portion of the graphic, if required at set time intervals.
#1: sprite dimensions:
setup of artboard + guides
- set up new folder for the sprite
- make copy of icon file and open in vector app
- set up one new artboard for the sprite visuals:
512px remains the set width - the height will triple to accommodate the icon 3 times:width: 512px; height 1536px; - copy icon onto new layer and move onto new artboard (lock layers no needed for edit)
- create a 512x512 square with coloured stroke to use as alignment guides; copy two times and align evenly with artboard; name layer 'guides' and lock
#2: sprite visuals:
editing visuals + save SVG/PNG
- add a circular outline and scale/align icon graphic inside
- make a copy of both, align centre of the 2nd square; note: use 'align to key object' option.
- edit 2nd icon for changes on roll-over; optimise as always (expand stroke/merge/simplify path)
- make one final copy for the 3rd state; edit to suite.
- export as PNG (for fallback) and save as SVG; optimise the code (SVGOMG) and save final version into your webfolder
#3: CSS sprite:
CSS roll-over using SVG + PNG fallback
- download the empty HTML page, or create your own;
setup requires one custom link. - set type and layout for link
- set background colour + add PNG fallback
- add the sprite SVG as background image
- remove background repeat and set size to 256px
- adjust padding to position text and add border radius
- add transitions to link element, set as required
NOTE: transitions should be set specifically and not affectbackground-positionto avoid 'scrolling' of visuals - edit alignments for visual appearance
- add changes to
:hover: adjusting colour and radius and shifting thebackground-positionvertically to reveal the 2nd visual - add changes to
:active+:focus: adjusting colour and radius and shifting thebackground-positionvertically to reveal the 3rd visual - test - tweak - and done.
For browsers which do not support SVG (check caniuse.com for details), we'll use a PNG again as fallback ~ via this clever approach from css-tricks:
background: url(fallback.png); background: url(background.svg), linear-gradient(transparent, transparent);
This combines two features that, together, target the perfect combo. If a browser supports both multiple backgrounds and linear gradients, it supports SVG too. So here we declare the SVG with a completely transparent linear-gradient. If that fails in an older browser, the fallback declared above will kick in.
You might add a slight performance hit on modern browsers from having to calculate the transparent gradient, but it's probably negligible. quoted from A Complete Guide to SVG Fallbacks.
Sprites also offer a very efficient method to implement icons for clear and accessible links, be that as part of the interface or to highlight specific links. By using a single file for multiple visuals means a single call to server only. Once cached - all visuals are ready and loaded, great for performance.
Let's take the example of links for downloading an image in a specific format. To present clear and accessible links, we can use a visual reference to show each file format as icon, assigning these via CSS automatically by link destination. Combining these icons into a sprite image will keep this light and fast :)
To use one sprite sheet for any icons used on our site, we'll combine all graphics into one file. The layout of the graphics is flexible though a clear grid helps with easier coordinates. To finalise the file, we'll optimise the SVG as always and consider our final design and setup to decide which method to use for the SVG.
Check out the sample page for more details on the 3 SVG methods →
