What do you think?
Rate this book
SVG Animations: From Common UX Implementations to Complex Responsive Animation
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.
225 pages, Paperback
Published May 2, 2017
40 people are currently reading
221 people want to read
Ratings & Reviews
Friends & Following
Create a free account to discover what your friends think of this book!
Community Reviews
Displaying 1 - 4 of 4 reviews
February 22, 2019
Great and quick read on creating animations with SVG. Sarah focuses mostly on using GSAP but does an excellent job on comparing technologies and showing their vanilla counterparts.
Been wanting to really refine my SVG and web animation skills and this book is likely to be a good reference.
Been wanting to really refine my SVG and web animation skills and this book is likely to be a good reference.
February 3, 2018
Prerequisites that will help you read this book:
CSS
JavaScript
jQuery
SVG
underlying terminology around computer animation (easing functions, sprite sheets, etc.)
underlying terminology around UX design (responsiveness,
In the preface it says, "we'll cover SVG from start to finish."
Unfortunately, that set my expectation, and I was constantly disappointed. I read that to mean I'd learn to *code* in SVG, but the reality is, this book is specifically for people using a WYSIWYG to build an SVG and then potentially do some manual tweaking. Totally legit use, but I definitely hoped start to finish meant delving into the headaches of building curves properly in code, etc.
It's a decent reference for third party tools Drasner and others use for creating SVG and SVG animations. It provides some useful tips and tricks for third party WYSIWYG applications like Illustrator and Inkscape. And it does a great job of exploring different ways to animate and the pros and cons of each.
On the one hand, I learned most of what I wanted to about SVG animation in this book.
On the other hand, I was constantly muttering at this book, "Stop assuming I know that already." Examples include not explaining hardly any of the parameters for on p.5, many references to "eases" which isn't even defined on the internet but I finally worked out was Drasner's shorthand for "easing functions," jumping into spritesheets without explaining what they are, etc.
I had a Math professor in college who was brilliant. Essentially *was* math more than someone who *did* math, but he couldn't explain it to people who didn't already understand because it came so naturally to him. This book felt a bit like that. Neither author nor editor(s) caught a lot of missing syntax and context that would help anyone new to various subjects covered here. Book would've gloriously benefited from a newbie who isn't afraid to give some constructive feedback.
On the upside, it was nice to see a femme author using other femmes - esp. Sara Soueidan (wonderful online examples I wound up using to supplement missing info in the book) - in a number of the provided examples. Yea cooperation and collaboration!
CSS
JavaScript
jQuery
SVG
underlying terminology around computer animation (easing functions, sprite sheets, etc.)
underlying terminology around UX design (responsiveness,
In the preface it says, "we'll cover SVG from start to finish."
Unfortunately, that set my expectation, and I was constantly disappointed. I read that to mean I'd learn to *code* in SVG, but the reality is, this book is specifically for people using a WYSIWYG to build an SVG and then potentially do some manual tweaking. Totally legit use, but I definitely hoped start to finish meant delving into the headaches of building curves properly in code, etc.
It's a decent reference for third party tools Drasner and others use for creating SVG and SVG animations. It provides some useful tips and tricks for third party WYSIWYG applications like Illustrator and Inkscape. And it does a great job of exploring different ways to animate and the pros and cons of each.
On the one hand, I learned most of what I wanted to about SVG animation in this book.
On the other hand, I was constantly muttering at this book, "Stop assuming I know that already." Examples include not explaining hardly any of the parameters for on p.5, many references to "eases" which isn't even defined on the internet but I finally worked out was Drasner's shorthand for "easing functions," jumping into spritesheets without explaining what they are, etc.
I had a Math professor in college who was brilliant. Essentially *was* math more than someone who *did* math, but he couldn't explain it to people who didn't already understand because it came so naturally to him. This book felt a bit like that. Neither author nor editor(s) caught a lot of missing syntax and context that would help anyone new to various subjects covered here. Book would've gloriously benefited from a newbie who isn't afraid to give some constructive feedback.
On the upside, it was nice to see a femme author using other femmes - esp. Sara Soueidan (wonderful online examples I wound up using to supplement missing info in the book) - in a number of the provided examples. Yea cooperation and collaboration!
February 25, 2020
Just what I was looking for
I met Sarah at a css Meetup in Arizona a few years ago where she presented the power of SVG. I was thrilled to finally find the time to go over her book. As expected it's an outstanding guide about getting into the SVG web development world. As a front end developer who strongly relies on CSS animations I can now expand my creations and take on a new dimension of creativity. There's so much more to be said about this book but if you are a developer and wondering if this is the right book to get you started, and even take you beyond, with SVG then have no doubts and jump on it.
P.s. The book has a ton of codepen examples so if you go with the Kindle version you can directly click on the links and open them in your browser.
Thank you, Sarah, for sharing all this marvelous knowledge with us.
I met Sarah at a css Meetup in Arizona a few years ago where she presented the power of SVG. I was thrilled to finally find the time to go over her book. As expected it's an outstanding guide about getting into the SVG web development world. As a front end developer who strongly relies on CSS animations I can now expand my creations and take on a new dimension of creativity. There's so much more to be said about this book but if you are a developer and wondering if this is the right book to get you started, and even take you beyond, with SVG then have no doubts and jump on it.
P.s. The book has a ton of codepen examples so if you go with the Kindle version you can directly click on the links and open them in your browser.
Thank you, Sarah, for sharing all this marvelous knowledge with us.
October 17, 2019
Great book for people entering SVG animations. Sarah's write up is always a joy as usual. A few outdated links but not a big problem.
Displaying 1 - 4 of 4 reviews