Responsive Web Design, Part 1 (2015)

Mastering SVG For Responsive Web Design

Where To Go From Here

SVG represents a very large and diverse universe with lots of capabilities. Using it allows us to bring together the best of two worlds — HTML and SVG — to achieve visual effects and optimizations that would otherwise not be possible without graphics editors.

One of the most powerful and impressive features of SVG lies in its animation effects. SVGs can be animated in a way similar to HTML elements using CSS animations⁶⁷ and JavaScript. The animations range from simple transition effects (for icons and logos) to two-dimensional and even three-dimensional animations including complex transformations.

More complex animations involving shape tweening and shape morphing currently require JavaScript or SMIL to work, but SMIL is soon to be deprecated in favor of the Web Animations API.

Using SVG, you can also move elements along arbitrary paths, but this ability will also be available to us via CSS some time soon.

Certain SVG attributes like stroke-dashoffset and stroke-dasharray can be animated to obtain animated line drawing effects. You may have come across this effect on the Vox Product blog⁶⁸, where they explain how they used these attributes in SVG to animate illustrations of an Xbox and PlayStation 4 on their respective review pages on the Polygon website. Jake Archibald wrote an excellent introductory article⁶⁹, including an interactive demo that explains how this concept works.

SVG can also act as a web font format. However, SVG fonts are deprecated or not supported in most browsers. Do not use them. That said, there is a proposal⁷⁰ that may bring SVG back to the web fonts scene as a way to bring color, gradients, animation and other aspects of SVG’s rich graphics model to web fonts. Bram Stein has written all about web font formats and their performance aspect in his chapter about web font performance (see part 2 of this book).

SVG is an exciting world with lots of potential, and it provides us with a bunch of new tools to add to our workflows that are certainly worth exploring and getting more creative with. I hope this chapter has been useful in helping you integrate SVG into your responsive web design workflow.