{"id":244167,"date":"2016-08-03T08:41:25","date_gmt":"2016-08-03T15:41:25","guid":{"rendered":"http:\/\/css-tricks.com\/?p=244167"},"modified":"2016-08-03T08:41:25","modified_gmt":"2016-08-03T15:41:25","slug":"wrote-book-practical-svg","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/wrote-book-practical-svg\/","title":{"rendered":"I Wrote a Book: Practical SVG"},"content":{"rendered":"<p>Big news! The book I&#8217;ve been working on for a long time has been published and is now available to buy. It&#8217;s called <a href=\"https:\/\/abookapart.com\/products\/practical-svg\" rel=\"noopener\">Practical SVG<\/a>. <\/p>\n<p><!--more--><\/p>\n<figure id=\"post-244196\" class=\"align-none media-244196\"><a href=\"https:\/\/abookapart.com\/products\/practical-svg\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/08\/ABA-hero-19.jpg?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/a><\/figure>\n<h3>What&#8217;s in the book?<\/h3>\n<p>The book is a journey through things that I&#8217;ve learned about SVG through years of using it on all my production sites. Things I&#8217;ve researched. Things I&#8217;ve learned from other people. Battles fought, lost, fought again, won. Besides a lovely forward by Val Head, introduction and conclusion and such, this is the structure:<\/p>\n<ul>\n<li>Chapter 1: The Basics of Using SVG<\/li>\n<li>Chapter 2: Software<\/li>\n<li>Chapter 3: Building an Icon System<\/li>\n<li>Chapter 4: Build Tools<\/li>\n<li>Chapter 5: Optimizing SVG<\/li>\n<li>Chapter 6: Sizing and Scaling SVG<\/li>\n<li>Chapter 7: Animating SVG<\/li>\n<li>Chapter 8: Some Design Features<\/li>\n<li>Chapter 9: Fallbacks<\/li>\n<\/ul>\n<p>And in just 150 pages! It&#8217;s meant to digest quickly.<\/p>\n<h3>Who is it for?<\/h3>\n<p>This book is for front end web designers and developers. Probably like&#8230; most of the people who read this site. &#8220;Practical&#8221; in the title means &#8220;Day to day useful stuff for front end folk&#8221;. <\/p>\n<p>It&#8217;s not really for super experts. I&#8217;m not a super expert, so I can&#8217;t write that book. I wrote about what it took for me to start taking advantage of SVG and reap what it has to offer. It also certainly doesn&#8217;t cover every nook and cranny of SVG. SVG is a huge world onto itself. I&#8217;d bet there is more to know about SVG then there is about HTML and CSS combined. But the basics will take you far.<\/p>\n<p>Nor is the book for super beginners. If you&#8217;ve never built a website ever before or messed around with HTML\/CSS\/JavaScript, there are probably too many foreign concepts in here. If you&#8217;re looking for a beginner HTML and CSS book, perhaps check out the first two <a href=\"https:\/\/abookapart.com\/products\/\" rel=\"noopener\">A Book Apart<\/a> books: HTML5 for Web Designers and CSS3 for Web Designers. Then come back!<\/p>\n<h3>What&#8217;s the story behind it?<\/h3>\n<p>It all started with my interest being peaked in SVG years ago. Peaked for rather obvious reasons: it&#8217;s a fascinating technology. Vector graphics on the web! It just makes sense! As I learned about it, as I do, I started writing articles here on CSS-Tricks about it. More and more and more. <\/p>\n<p>Then I started doing conference talks about it. Throughout 2014 and 2015 I did a dozen or so talks like &#8220;SVG is for Everybody&#8221; and &#8220;The Wonderful World of SVG&#8221;, including at conferences like An Event Apart. With all that research and writing in hand, it felt like a natural extension to convert it into a book. <\/p>\n<blockquote class=\"twitter-tweet\" data-lang=\"en\">\n<p lang=\"en\" dir=\"ltr\">Reason #1!<\/p>\n<p>It represents a whole bunch of work.<a href=\"https:\/\/t.co\/lsHUlJMqVZ\">https:\/\/t.co\/lsHUlJMqVZ<\/a> <a href=\"https:\/\/t.co\/FYhoS7M3tV\">pic.twitter.com\/FYhoS7M3tV<\/a><\/p>\n<p>&mdash; Chris Coyier (@chriscoyier) <a href=\"https:\/\/twitter.com\/chriscoyier\/status\/758343554167025664\" rel=\"noopener\">July 27, 2016<\/a><\/p><\/blockquote>\n<p>It certainly wasn&#8217;t easy though. The book format demands more out of you. A clear structure. Intense accuracy. Words that guide you. <\/p>\n<p>Fortunately I had excellent help, like Katel LeDu guiding me through the entire process. Caren Litherland as an editor, keeping my foot out of my mouth and, most valuably, making sure everything read well and were comprehensible. Lisa Maria Martin cleaning house. Jason Santa Maria&#8217;s lovely design along with Rob Weychert&#8217;s perfect book composition. Chris Lilley&#8217;s technical edit. That&#8217;s one heck of a superteam if you ask me.<\/p>\n<h3>Time to feed your brain?<\/h3>\n<blockquote class=\"twitter-tweet\" data-lang=\"en\">\n<p lang=\"en\" dir=\"ltr\">Got my new book &#39; Practical <a href=\"https:\/\/twitter.com\/hashtag\/SVG?src=hash\" rel=\"noopener\">#SVG<\/a> &#39; ! Time to feed my brain! Thanks <a href=\"https:\/\/twitter.com\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a> <a href=\"https:\/\/t.co\/pW5KHT3gFZ\">pic.twitter.com\/pW5KHT3gFZ<\/a><\/p>\n<p>&mdash; ieatwebsites (@ieatwebsites) <a href=\"https:\/\/twitter.com\/ieatwebsites\/status\/759826389537329152\" rel=\"noopener\">July 31, 2016<\/a><\/p><\/blockquote>\n<div style=\"margin: 50px;\">\n\u2192\u2192\u2192 <a href=\"https:\/\/abookapart.com\/products\/practical-svg\" class=\"button\" rel=\"noopener\">Go get it.<\/a> \u2190\u2190\u2190\n<\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Big news! The book I&#8217;ve been working on for a long time has been published and is now available to buy. It&#8217;s called Practical SVG.<\/p>\n","protected":false},"author":3,"featured_media":0,"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,508],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":253293,"url":"https:\/\/css-tricks.com\/book-release-svg-animations\/","url_meta":{"origin":244167,"position":0},"title":"Book Release: SVG Animations","date":"March 30, 2017","format":false,"excerpt":"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. Foreword Have you\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/03\/svg-animations.png?fit=1047%2C1200&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":244167,"position":1},"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 &quot;Article&quot;","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":246795,"url":"https:\/\/css-tricks.com\/handmade-svg-bar-chart-featuring-svg-positioning-gotchas\/","url_meta":{"origin":244167,"position":2},"title":"A Handmade SVG Bar Chart (featuring some SVG positioning gotchas)","date":"November 1, 2016","format":false,"excerpt":"Let's take a look at some things I learned about positioning elements within SVG that I discovered whilst making a (seemingly) simple bar chart earlier this week. You don't have much choice but to position things in SVG. SVG is a declarative graphics format, and what are graphics but positioned\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/bar-chart.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":307925,"url":"https:\/\/css-tricks.com\/a-book-apart-turning-10\/","url_meta":{"origin":244167,"position":3},"title":"A Book Apart Turning 10","date":"April 30, 2020","format":false,"excerpt":"Early congratulations, A Book Apart! That's a hell of a milestone. I'm quite sure I've read more A Book Apart books than any other tech book publisher. Katel LeDu runs the ship over there, and she's given me very special pack of discount codes that will get you my book,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-04-29-at-2.15.36-PM.png?fit=1200%2C929&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":272850,"url":"https:\/\/css-tricks.com\/what-is-svg-good-for\/","url_meta":{"origin":244167,"position":4},"title":"What is SVG good for?","date":"June 20, 2018","format":false,"excerpt":"Y'all probably wouldn't be surprised if I told you it's pretty awesome for icons, and icon systems. SVG icon systems can, and perhaps should be quite easy. I'm a fan of just inlining those suckers, particularly when they are pretty simple. But what else? Logos is a classic example! A\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/Untitled-1.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":249008,"url":"https:\/\/css-tricks.com\/inline-svg-best-svg\/","url_meta":{"origin":244167,"position":5},"title":"Why Inline SVG is Best SVG","date":"December 15, 2016","format":false,"excerpt":"\ud83d\udcf9 by Glen Maddern: I don't think most front-end developers are as comfortable as SVG as they should be. It's one of the most powerful technologies available on the web. He makes a very strong case for inline SVG, which I wholeheartedly agree with. This screen from the video does\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/244167"}],"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=244167"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/244167\/revisions"}],"predecessor-version":[{"id":244202,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/244167\/revisions\/244202"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=244167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=244167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=244167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}