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.

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”

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 makes SVG a better image format for responsive web design, including but not exclusive to: scalability and resolution-independence, performance, accessibility, animation, and more.
  • Vector vs Raster: Which is the Better Format?: a set of guideliness 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…
  • Understanding 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:
  • Exporting SVG for the Web From Adobe Illustrator: overview of the export options 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, and the pros and cons of each, 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): what the tite says. Sections covered in this master section include:
  • SVGs vs Icon Fonts: SVGs are a far more superior icon system, and this section covers all the reasons why, as in intriduction to…
  • Spriting SVGs: introduction to the concept, followed up:
    • 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.
      • Covered is also a section about SVG data URIs, including any performance considerations.
    • SVG Icon System with Icons as Foreground Images: how-to and workflow automation tools.
      • Styling the icons and applying transitions to them: including 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 technqiues.
    • 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 personally-favourite SVG spriting tchnique and one of the lesser 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
  • Using SVG As a Container for Serving Responsive Images a.k.a 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 Raphael library and its modern Snap.svg alternative) and Jake Archibald (Google), both experienced SVG developers.

A Designer’s Complete Reference

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)!