SVG is extremely powerful, with its reduced HTTP requests and crispness on any display. It becomes increasingly more interesting as you explore its capabilities for responsive animation and performance boons. When you animate SVG, you must be aware of normal image traits like composition, color, implementation, and optimization. But when you animate, it increases the complexity of each of these factors exponentially.
This practical book takes a deep dive into how you can to solve these problems with stability, performance, and creativity in mind.
- Learn how to make SVG cross-browser compatible, backwards compatible, optimized, and responsive
- Plan and debug animation
- Make a complex animation responsive, as many sites are responsive
- Profile each animation technique in terms of performance so that you know what you're getting in to with each library or native technology
Table of Content
Chapter 1The Anatomy of an SVG
SVG DOM Syntax
viewBox and preserveAspectRatio
Drawing Shapes
Responsive SVG, Grouping, and Drawing Paths
SVG on Export, Recommendations, andOptimization
Reduce Path Points
Optimization Tools
Chapter 2Animating with CSS
Animating with SVG
Benefits of Drawing with SVG
Silky-Smooth Animation
Chapter 3CSS Animation and Hand-Drawn SVGSprites
Keyframe Animation with steps() and SVGSprites, Two Ways
Chapter 4Creating a Responsive SVG Sprite
SVG Sprites and CSS for ResponsiveDevelopment
Grouping and DRYing It Out
The viewBox Trick
Responsive Animation
Chapter 5UI/UX Animations with No ExternalLibraries
Context-Shifting in UX Patterns
Putting It All Together
Chapter 6Animating Data Visualizations
Why Use Animation in Data Visualization?
D3 with CSS Animation Example
Chartist with CSS Animation Example
Animating with D3
Chapter 7A Comparison of Web AnimationTechnologies
Native Animation
External Libraries
Not Suggested
React-Specific Workflows
Covering Ground
Chapter 8Animating with GreenSock
Basic GreenSock Syntax
Chapter 9GreenSock’s Timeline
A Simple Timeline
Relative Labels
Nested and Master Timelines
Chapter 10MorphSVG and Motion Along a Path
MorphSVG
Motion Along a Path
Chapter 11Stagger Effects, Tweening HSL, andSplitText for Text Animation
Staggered Animations
Relative HSL Color Animation
Chapter 12DrawSVG and Draggable
Draggable
DrawSVG
Chapter 13Mo.js
Base Premises
Shapes
Shape Motion
Chapter 14React-Motion
Motion
StaggeredMotion
Chapter 15Animating the Unanimatable: Motionwith Attributes and Bare-Metal Implementations
requestAnimationFrame
GreenSock’s AttrPlugin
Practical Application: Animating the viewBox
Chapter 16Responsive Animation
Some Quick Responsive Tips
GreenSock and Responsive SVG
Responsive SVG, with or without GreenSock
Responsive Reorganization by Updating theViewBox
Responsive Reorganization with Multiple SVGsand Media Queries
Chapter 17Designing, Prototyping, andAnimation in Component Libraries
Designing an Animation
Prototyping
Animations in Component Libraries
