SVG sprite setup
Using the previously created icon, let's create a SVG sprite with CSS.
#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 SVG background image, demo and notes
- 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 affect
background-positionto avoid 'scrolling' of visuals
- edit alignments for visual appearance
add changes to
:hover: adjusting colour and radius and shifting the
background-positionvertically to reveal the 2nd visual
add changes to
:focus: adjusting colour and radius and shifting the
background-positionvertically to reveal the 3rd visual
- test - tweak - and done.