{"id":253293,"date":"2017-03-30T07:18:26","date_gmt":"2017-03-30T14:18:26","guid":{"rendered":"http:\/\/css-tricks.com\/?p=253293"},"modified":"2017-03-30T07:18:26","modified_gmt":"2017-03-30T14:18:26","slug":"book-release-svg-animations","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/book-release-svg-animations\/","title":{"rendered":"Book Release: SVG Animations"},"content":{"rendered":"

Our own Sarah Drasner<\/a> has published a book! You can grab it from the O’Reilly website<\/a> or Amazon<\/a>. <\/p>\n

If you need a little convincing, I figured I would post the foreword I wrote for the book here, then you can continue reading over on the O’Reilly site.<\/p>\n

<\/p>\n

\"\"<\/figure>\n

Foreword<\/h3>\n

Have you ever learned a new word, then had the opportunity to use that word in the perfect situation come up a number of times that week? That’s what it feels like when you start learning SVG. To layer on the metaphors, it’s like discovering your toolbox has been missing a tool all this time.<\/p>\n

As a designer and developer, now that I’ve dug into SVG, I can tell you I work with it almost every single day. Not necessarily because I’m jamming SVG into projects because I can, but because it’s so often the right tool for the job. After you read this book and SVG becomes your tool too, I think you too will find yourself reaching for it regularly. It will pop to mind when you’re working, just like that satisfying moment when a new word you’ve learned comes in useful.<\/p>\n

Perhaps you’ll think of SVG when you need to replace a logo with one that will display crisply on screens of any pixel density. Perhaps you’ll think of SVG when you need an icon system, a chart or graph, or a vector background pattern. Now that you’re holding this book in your hands, you’ll almost certainly think of SVG when you think of animation.<\/p>\n

SVG is uniquely qualified for animation. It’s the single most powerful tool there is for animation on the web. Partly that’s because SVG is made of numbers. SVG essentially draws with geometry. And on the web, numbers are easy and intuitive to manipulate and animate. Perhaps you know that you can “fade out” an element\u2014a rudimentary animation\u2014by animating opacity from 1 to 0. So too you could animate the radius of a circle, the coordinates of a rectangle, or a point along a path.<\/p>\n

Another reason SVG animation is so compelling is how many ways there are to do it. There are a variety of native technologies to choose from, and libraries built on top of those to help. How do you know what to choose? It requires some knowledge and consideration. Fortunately, you’ve made the perfect purchase.<\/p>\n

Sarah is the ultimate tour guide for all of this. She’s not just an experienced technical writer, but an accomplished vector artist and front-end developer as well. She has been bringing her own SVG art to life through animation for years and years. She knows the tools. She knows the landscape. She knows how to get to the meat of what is important about all this and explain it.<\/p>\n

I’m not gasconading for Sarah without reason. I’ve worked with Sarah and ingurgitated her knowledge on SVG animation much to my benediction. If you’re thinking “I’m a front-end developer already, and have gotten by just fine without this,” remember that you don’t reach for what you don’t know. Read on, and become an SVG opsimath.<\/p>\n

\n

Read Chapter One<\/a> Buy at the O’Reilly Shop<\/a> Buy on Amazon<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Our own Sarah Drasner has published a book! You can grab it from the O’Reilly website or Amazon. If you need a little convincing, I figured I would post the foreword I wrote for the book here, then you can continue reading over on the O’Reilly site.<\/p>\n","protected":false},"author":3,"featured_media":253296,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[612,469],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/03\/svg-animations.png?fit=1510%2C1730&ssl=1","jetpack-related-posts":[{"id":171038,"url":"https:\/\/css-tricks.com\/svg-text-typographic-designs\/","url_meta":{"origin":253293,"position":0},"title":"SVG `text` and Small, Scalable, Accessible Typographic Designs","date":"May 27, 2014","format":false,"excerpt":"Let's say you designed something with custom fonts that was a little bit fancy. Perhaps a certain word is positioned between the ascenders of another word below it. Some text is kerned out below to match the width of that same word. This is something we might tell a graphic\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":175074,"url":"https:\/\/css-tricks.com\/mega-list-svg-information\/","url_meta":{"origin":253293,"position":1},"title":"A Compendium of SVG Information","date":"July 22, 2014","format":false,"excerpt":"A huge pile of information about SVG. How to Use SVG These are overview articles covering lots of stuff relating to SVG. Why to use it and the basics of how to use it. Mostly: , background-image, , , and \/. Using SVG by me SVG on the Web \u2014\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":199370,"url":"https:\/\/css-tricks.com\/a-complete-guide-to-svg-fallbacks\/","url_meta":{"origin":253293,"position":2},"title":"A Complete Guide to SVG Fallbacks","date":"May 4, 2015","format":false,"excerpt":"If you're using SVG and are worried about unsupported environments, this is the guide for you. There is no single solution, since how you use SVG dictates the fallback.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/05\/svg-fallback-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":350223,"url":"https:\/\/css-tricks.com\/how-i-made-a-generator-for-svg-loaders-with-sass-and-smil-options\/","url_meta":{"origin":253293,"position":3},"title":"How I Made a Generator for SVG Loaders With Sass and SMIL Options","date":"August 26, 2021","format":false,"excerpt":"While learning Vue.js, I started building free web tools that involved the exploration of SVG, with the goal of learning something about both! Let\u2019s take a look at one of those tools: a generator that makes SVG loaders and lets you choose between SMIL or Sass animation, different styles, colors,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/custom-loader.gif?fit=1200%2C727&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":244167,"url":"https:\/\/css-tricks.com\/wrote-book-practical-svg\/","url_meta":{"origin":253293,"position":4},"title":"I Wrote a Book: Practical SVG","date":"August 3, 2016","format":false,"excerpt":"Big news! The book I've been working on for a long time has been published and is now available to buy. It's called Practical SVG. What's in the book? The book is a journey through things that I've learned about SVG through years of using it on all my production\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":239447,"url":"https:\/\/css-tricks.com\/comic-book-fx-lettering-svg-filters\/","url_meta":{"origin":253293,"position":5},"title":"Comic Book FX Lettering with SVG Filters","date":"March 18, 2016","format":false,"excerpt":"Much has been written about how SVG filters can be used to style images or manipulate shapes or even make crazy animations. But I haven\u2019t seen much about how SVG filters can be used to style text recently. Thankfully, Dudley Storey has written a neat introduction to the topic by\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/03\/svg-animations.png?fit=894%2C1024&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/253293"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=253293"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/253293\/revisions"}],"predecessor-version":[{"id":253298,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/253293\/revisions\/253298"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/253296"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=253293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=253293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=253293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}