Design Tips and Tricks August 2016: Optimizing and Animating SVG Images
My notes from an online seminar I tuned into that describes how to create and animate SVG images.
Aug 28, 2016 • Kevin Hou
Codepen is useful for rapid SVG development
SVG's are really just markdown and can be manipulated as a chunk/contained element, or individual shapes
Good practice to name your shapes different things in Sketch — prevents styling issues if some had the same IDs
Good practice to ungroup the SVG
SVG doesn't really use shadows — generally stay away from them
SVG's support consistent radiuses, but do not support individual points having different radius's in the same shape. If you want this, you have to flatten the shape into a path
Sketch and other vector generators generate a lot of extraneous text. Use SVGEditor online to optimize SVGs and remove the extra Sketch attributes, round decimal points to make the file smaller. Can also get rid of the artboard page tag.
Group elements in the SVG a element so that you can apply classes</li>
Types of Animations
Can modify the SVG however you’d like using CSS — 2D transform, scale, rotate, skew (shears them), motion path (moving along a non-linear path), morphing (changing the actual shape itself. Same shape, but different appearance), line drawing (can draw closed SVG paths), clipping and masking
Most basic: animate styling
Advanced: filters, effects, distortions
Looping animations, constantly doing its own thing
Dynamic, animating based on some parameter
Interaction, animate based on interaction — so delightful
Avoid the technical limitations, forget the CSS, etc.
What would it make you love?
What is attention grabbing?
What’s a clean subtle way of animating something?
Animating Using CSS
Create animations using CSS
Good practice to make the container really big initially so that nothing ever gets cropped
Change the SVG tag ID to classes. So it’s better compatible with CSS.
Good to put this in the beginning so you can see what’s going on:
When rotating: transform: rotate(27deg), remember SVGs have their own coordinate system. Make sure you set transform-origin: center. Transform-origin is a very finicky system. It’s best to use:
If you want to transform around a specific point, set the transform-origin to that point. Best practice to use pixels so that older browsers can understand it.
Can group elements together in css by doing:
Ways of Applying Animations
Makes animations very easy so that you’re just declaring the default style and the end style on hover. CSS automatically animates the transition.
Create custom timing functions using cubic-bezier.com