The waiting is over. Smashing Book #5 is here, it's smashing, and it's shipping worldwide — in fact, all pre-orders have just been dispatched. Think of it as a reliable playbook to master all the tricky hurdles of responsive design, well-tested in real-life projects by respected designers and developers. Ah, sure, you can get the book right away.

About the book

Just like all of our Smashing Books, the book isn’t concerned with trends or short-lived workarounds. It’s focused on actual techniques used today in real-life projects. We’ve designed the book to be as practical and hands-on as possible. No fluff, just the techniques that have actually worked or failed, and why.

Every chapter stands for itself. It delivers the value you expect, but it should exceed your expectations by far, too. We designed it to stand the test of time, too; to be more than just a manual or a guide. It’s really about the bigger picture you need to make smart decisions, faster. Hardcover, 584 pages. eBook contains 2 bonus chapters. Free worldwide shipping — obviously.

On “Mastering SVG For RWD And Beyond”

Now, a standalone release post would be boring and predictable, so how about bringing another perspective to the magazine instead? Below you'll find some insights about the writing process by one of the authors of the book, Sara Soueidan, who has contributed an 80-page long compendium of useful techniques, tricks and strategies for dealing with SVG. — Ed.

---

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 a brief overview of what that chapter covers, and why I think you should get the book.

A Little Background

Vitaly approached me about writing a chapter for the book in September 2014. I had been working with SVG extensively for a few months by then, so the ideas were all fresh in my head and so were the results of all the experimenting and learning I was doing. And if you know Vitaly, you know that it’s exactly that kind of content that captures his interest: lessons learned, practical examples and use cases, and lots and lots of tips that you can just take away and start applying to your projects.

And if you know me, you know how much I value flexibility and freedom in my work, so Vitaly gave me just that. We had a deadline, of course, and I made sure the chapter was finished before that deadline, ready to be reviewed and copyedited and proofread.

Owen Gregory was responsible for copyediting and proofreading the chapters. I had seen him speaking at From the Front before (and loved his talk), and had heard really good things about his work from other writers; he also proofreads articles published at 24 ways where I had also published an article, so I was very excited to get to work with him on the chapter. Everything went extremely smoothly and, seeing that I’m not a native English speaker, I am happy to report that I did not make his job too difficult in my chapter!

It took me a couple of weeks to finish the first draft of the chapter, then it was reviewed for the first time. Vitaly gave some nice feedback about where I could go into a little more detail (he is always thirsty for more knowledge), so I did. After the second review, there wasn’t much to edit anymore. I went over the chapter one more time and sent it for proofreading.

We used Basecamp as the communication management app. By “we” I mean Vitaly, the Smashing team, and everyone else who worked on the book. It was my first time using Basecamp and I quite liked it — it helped keep everything organized and in perspective. Knowing where everyone was in the process of writing was also quite helpful.

When I told Vitaly I wanted to write this article to introduce the SVG chapter to you, he asked me to be as critical of the entire writing process as I wanted, and mention anything I did not like about it, or even about him! But I couldn’t come up with anything, really.

The one and only criticism I have is the delay in the release date. I’m a very punctual person and when we started working on the book it was scheduled to be released in March and to start shipping in April, but it took a few months more to do that. That said, everyone who worked on the book also had a ton of other commitments and stuff to do besides writing it, so delays like this are only natural, I guess.

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 4 of 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”

So, What Can You Expect To Learn About?

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:

• What is SVG?
  A brief overview of the image format and its history.
• Vector vs. Raster
  A comparison between vector and raster image formats such as JPEG, PNG, etc., characteristics of each, and what makes the SVG format stand out.
  • Advantages of SVG
    The many, many features that make SVG a better image format for responsive web design, including: scalability and resolution-independence, performance, accessibility, animation, and more.
  • Vector vs Raster: Which is the Better Format?
    A set of guidelines and things to consider when choosing the image format for your graphic, including why and when SVG might or might not be a good choice.
• Quick Overview of SVG Syntax and Code including the SVG viewport and viewBox.
• Creating and Exporting SVGs in Vector Authoring Tools
  Tips, dos and don’ts for the right workflow when designing SVG images that ensure the resulting code is as optimal as possible. This section includes an overview of the export options from Adobe Illustrator and which ones to pick to make sure you end up with better code.
• Optimizing SVGs Using Standalone Optimization Tools
  There are a lot of tools; each can fit into a different workflow. We go over a list of some of the best tools.
• Embedding SVGs
  The different ways to embed SVGs on a page, the pros and cons of each, and tips on improving performance when choosing some of them.
• Using SVGs as an Icon Font Replacement (or, How to Create SVG Sprites and Use Them as an Icon System)
  Sections covered in this master section include:
  • SVGs vs Icon Fonts
    SVGs are a far superior icon system, and this section covers all the reasons why, as in introduction to…
  • Spriting SVGs
    Introduction, followed by SVG icon system with icons as background images: the how-to of creating an SVG sprite for icons used as background images on the page, including tools to simplify the process. The section also covers SVG data URIs, including performance considerations.
  • SVG Icon System with Icons as Foreground Images: how-to and workflow automation tools. This section also includes styling the icons and applying transitions to them, with a how-to on styling the contents of <use>.
• Providing and Automating Fallback for HTML-Inline SVGs
  Some known and some lesser known techniques for:
  • SVG fallback as foreground images
    How to provide fallback for SVG images that are embedded as foreground images. There are several options, all covered.
  • SVG fallback as background images
    Also a few options to choose from leveraging different CSS techniques.
  • SVG fallback using SVG conditional processing (SVG Fallback as Background Image)
    SVG’s built-in fallback mechanism.
  • Other fallback techniques for different embedding techniques.
• Better SVG Spriting Using Native Fragment Identifiers
  This is my personal favourite SVG spriting technique and one of the less used ones, and the one closest to the way PNG image spriting works.
• Making SVG’s Cross-Browser Responsive with CSS including:
  • Making SVGs Fluid with CSS
    Everything including browser bugs and workarounds.
  • Making SVGs Adaptive with CSS
    Using CSS Media Queries to show and hide (or even animate) parts of the SVG depending on viewport size.
  • Making SVGs Accessible
    The least you can do to provide even the most basic accessibility to your SVG images today.
  • Using SVGS to Optimize the Delivery of Other Image Formats
    Use cases that go beyond simply displaying or animating vector images. It includes using SVG masks to optimize raster graphics and using SVG as a container for serving responsive images (the "Clown Car Technique".)
• Where To Go From Here
  Pointers to more ideas and resources to look into.

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 Reviewers

The chapter was reviewed by Dmitry Baranovskiy (creator of the Raphaël library and its modern Snap.svg alternative), and Jake Archibald (Google), both experienced developers who know SVG very well.

A Designer’s Complete Reference To RWD

The chapters are complementary to one another, 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. Here's a table of contents, to give you a better idea of what it covers:

1. Responsive Workflow by Daniel Mall,
2. Design Patterns by Vitaly Friedman,
3. Structured Content by Eileen Webb,
4. Mastering SVG by Sara Soueidan,
5. Components With Flexbox by Zoe M. Gillenwater,
6. Web Fonts Performance by Bram Stein,
7. Responsive Images by Yoav Weiss,
8. Responsive HTML Email by Fabio Carneiro,
9. Testing, Maintaining, Debugging by Tom Maslen,
10. Creativity Over Predictability by Andrew Clarke,
11. Optimizing for Offline by John Allsopp, Matt Gaunt,
12. Responsive Process by Ben Callahan (only in eBook),
13. Performance Optimization Roadmap by Vitaly Friedman (only in eBook).

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’s 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.

Zoe M. Gillenwater is my go-to Flexbox expert, so knowing that the book also includes a chapter on Flexbox written by her is splendid. Dan Mall is my go-to person for anything freelance designery-y and business-related; he wrote a chapter on the modern designer’s workflow.

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, content choreography, images, advanced layout with Flexbox, to 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 me with any feedback or comments (or even pretty pictures)!

Thank You.

Thank you, dear Sara, from the very bottom of our hearts. It's been our pleasure and honour to be working on the chapter with you — the book wouldn't be the same without your fantastic contribution.

Well, over to you then. We hope you'll love the book as much as we do, our dear reader. Please do let us know what you think — we're here, and we aren't going anywhere! Happy reading and note-taking, and don't work too hard! And thank you so much for your kind support and patience over all these years — you are truly smashing, you should know that. And for this we're eternally grateful.

Front page image credit: Florian Adu-Gyamfi