Design Tips and Tricks August 2016: Optimizing and Animating 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 {
        ...
      }
    
```
Ways of Applying Animations
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