< Return to all blogs
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.
Overview
- 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 Practices
- 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
Optimizing SVGs
- 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> </ul> 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
Design Tips
- 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:
svg { transform-origin: top left; transform: scale(2); }
- 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:
transform-origin: 50% 50% instead of transform-origin: center
- 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:
class1, class2, class3 { ... }
- Use the transition: 1s; property to animate a hover style change. You can also use Javascript to apply a class if you don’t wanna use the hover state. Can use @keyframes
- 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
- Transition: .8s cubic-bezier(.85, .02, .3, .82);
Resources
Video tutorial: https://www.creativelive.com/courses/icon-design-with-sketch-peter-nowell#class-info
Simple example: https://codepen.io/pnowell/pen/wMYjZN
Complex examples:
Many complex types of animations: https://codepen.io/pnowell/pen/QyZVro
Line drawing animations: https://css-tricks.com/svg-line-animation-works/
Morphing: http://codepen.io/chriscoyier/pen/DpFfE
Tools mentioned:
cubic-bezier.com
https://petercollingridge.appspot.com/svg-editor
Animations in Swift
Tangential side note: How to create a really cool Uber-style splash screen animation on iOS: https://www.raywenderlich.com/133224/how-to-create-an-uber-splash-screen?utm_campaign=iOS+Dev+Weekly
Posted in Design with Graphic Design, User Experience, User Interface, Tutorial