Practical SVG

A Book Apart #19

by Chris Coyier

Harness the power and possibilities of crisp, performance-efficient SVG with Chris Coyier. From software basics to build tools to optimization, you'll learn techniques for a solid workflow. Go create icon systems, explore sizing and animation, and understand when and how to implement fallbacks. Get your images up to speed and look sharp!

Genres: Design, Web, Technology, Nonfiction, Programming, Computer Science, Reference

166 pages, Paperback

Published July 26, 2016

Reviews

[Landon · Rating 3 out of 5]

I came away from this book a bit disappointed. I'm a fan of Chris Coyier's writing, and I was hoping for an in-depth guide that would give me some new insights into SVG. Instead, this book seemed to be geared more towards beginners.

Main takeaways:

* Think of SVG as a set of instructions that are interpreted to draw a picture.
* Unlike HTML, presentational attributes on the elements are overwritten by CSS without the use of an !important flag.
* The only good ways to animate SVGs are with CSS or JavaScript. SMIL is deprecated.
* You can apply fills to strokes, which is cool.
* Clipping is used to crap out vector paths. Making shows what's black, hides what's white and transparentizes grays.

[John · Rating 3 out of 5]

Scalable Vector Graphics (SVG) are now widely supported in browsers, and have become an important part of the web development toolkit. This book gives a rough overview of the tech, tools for creating images, and then gets into the details of how and when to use the format in web designs. This seems like a great resource for beginner to intermediate front-end designers. I'm interested in programmatic SVG, such as creating charts and diagrams from data, and it wasn't quite what I was looking for. However, I'll be less reluctant to reach for SVG the next time I have to play front-end dev.

[Justin Leatherwood · Rating 5 out of 5]

By no means exhaustive, practical svg presents some core ideas around svg, when to use, when not to use kind of stuff to orient yourself well enough to know where to start when considering using svg.

Quick read, funny at times. Almost like a good reference to kick off from with ample “read further” sort of references scattered throughout.

[Steve · Rating 4 out of 5]

This is an excellent introduction to SVG and some of the crazy, awesomeness that SVG is. I am a avid listener of Shop Talk Show, CodePen Radio, a user of CodePen and CSS Tricks. I'm team Chris Coyier! Honestly I would have given this 5 stars if I hadn't already learned most of this by myself. Great book!

[Stringy · Rating 5 out of 5]

Coyier covers the basics quickly then gets into the most commonly-used features of SVG. If you need to wrap your head around SVG as soon as possible, this is faster than finding all the relevant blog posts out there then weeding out the more theoretical or out of date ones.

[Dave Brown · Rating 4 out of 5]

This is a really great primer for SVG in a modern toolkit. There are lots of things in here that I certainly didn’t know, and, as would be expected for this author, loads of particularly useful and specific tips. A great read for any developer.

[Amy · Rating 4 out of 5]

The perfect quick rundown introduction to SVG covering basic syntax, uses, animation, accessibility, and more.

[Jan Lehtinen · Rating 4 out of 5]

Good stuff about SVG usage. Some fallback things probably outdated but still noted that these are often updated

[Trey Piepmeier · Rating 3 out of 5]

75% of this material I knew beforehand from reading Coyier's blog posts and watching his talks. I totally have him to thank for my even vaguely understanding SVGs. I've used this knowledge to build icon systems in the past, and I'm even better suited to do it now.

I'm sure if you weren't already familiar with these techniques and his blog posts, this would be a very valuable resource. It's nice to have it all in one place and nicely illustrated. I made copious notes and bookmarks and highlights as I read through it.

The most exciting thing I learned in the book were the possibilities for filtering and manipulating photographs. I can't wait to try those techniques.

All that being said, this book felt a bit lackluster. Part of that was because a lot of it was rehashing for me, but even more of that feeling was because of the numerous technical errors. There were figures out of order to the way they're referenced in the text and there were at least a couple of instances where his meaning was clear but he used the wrong terminology (tags vs. attributes or something equally as pedantic). Not a deal breaker, but I was surprised at what got through editing.

If you don't know this stuff, buy this book (but maybe just the ebook to save on the price). If you do know most of this stuff, maybe do the same.

[E · Rating 3 out of 5]

The technical side of the subject matter was a bit beyond my depth, but was very interesting and informative read. I'll be sharing it with my Dev team.

[Camilla Jeppesen]

I love Coyiers way of writing. He knows how to keep the readers attention, while explaining stuff about SVG.