Chapter 4, Smashing Book 5

“Mastering SVG for Responsive Web Design”

The new Smashing Book is out! It’s packed with a lot of time-saving, practical techniques for crafting fast, maintainable and scalable responsive websites. I wrote a chapter in the book—Chapter 4: Mastering SVG For Responsive Web Design. Here is an overview of what that chapter covers, and why I think you should buy the book.

Image of the Smashing Book 5.
Photo credit: Mattia Compagnucci

I always get questions from my followers about a good place to start learning SVG. I write about SVG a lot, but I realize that it’s always better to have one place where you can jump start whatever you’re learning and then take it from there. I believe the SVG chapter in the book is a great place to do just that.

Chapter four of the Smashing Book 5 is 80 pages of SVG, covering everything you need to know to start implementing SVG in your responsive web designs today.

There is a chapter on SVG for RWD by Sara Soueidan that kind of made me feel stupid, not because of how it was written, that was great, but because it introduced me to so many new things about SVG. What the heck have I been learning all of these years? Paul Scrivens, “Smashing Book #5, A Review”
Image of the Smashing Book 5, chapter 4.
Photo credit (and thanks to): Mattia Compagnucci

The answer to this question in my head is always a list of what is not covered in the chapter, because the topics covered include so much! Here is an overview of the contents:

As you can see the chapter covers a lot. The topics it does not cover (otherwise it would have turned into a book) are: graphical effects (such as filters) and animation. I’m pretty sure there is even more about SVG to get into that the chapter does not cover, but hey, it’s only a chapter of a book!

Reading the new Smashing book, which is timely as I'm spritifying some SVGs, and it's easier than flying @SaraSoueidan over to do it for me. Bruce Lawson

The chapter was reviewed by Dmitry Baranovskiy (creator of the Raphael library and its modern Snap.svg alternative) and Jake Archibald (Google), both experienced SVG developers.

The chapters of the book are complimentary to each other, so the entire book is a collection of topics that go extremely well together, giving you a set of diverse topics that are sure to come in handy for any responsive design project you work on.

While writing the SVG chapter, I mentioned the problems that non-vector images might bring up, and how the new <picture> element emerged as the almost-perfect solution for that problem. (SVG still has its benefits over these formats, of course, but raster images still have their place and importance where SVGs just can’t fill in.) And since my chapter was focused on SVG, I couldn’t get into the details of how to serve responsive raster images. Yoav Weiss’ chapter fills in that spot and covers everything you need to know about using responsive images. Not only that, but Yoav’s chapter also includes tips that you can apply to SVG images as well, making these two chapters the ultimate reference for images used in responsive design.

You can’t expect an SVG chapter to not mention SVG fonts, too. But then again, since that topic is outside the scope of what could be covered in the chapter, Bram Stein’s chapter on web font performance fills in that spot in his chapter that covers everything you need to know about web font formats, performance, fallback, and more.

The book was written by some of the brightest people in our industry, all experts in their fields, smarter than me, and known for their expertise in specific topics—all of which they covered in lengthy, very informative articles. You will find topics ranging from design workflows, patterns, to content choreography, images, advanced layout with Flexbox, responsive process, performance optimization, all the way to optimizing for offline experiences.

I hope you find the chapter on SVG useful, and I’m confident you will find the remaining chapters insightful as well. I promise you will not regret it.

So, what are you waiting for? Go grab your copy and feel free to tweet at us with any feedback or comments (or even pretty pictures)!

Real. Simple. Syndication.

Get my latest content in your favorite RSS reader. (What is RSS?)