Practical SVG
Practical SVG
MORE FROM A BOOK APART
FOREWORD
INTRODUCTION
THE SHAPES OF SVG
YOUR VECTOR INTUITION
ACKNOWLEDGMENTS
ABOUT THE AUTHOR
ABOUT A BOOK APART
COLOPHON

1

The Basics of Using SVG

SVG AS HTML img
SVG AS CSS background-image
INLINE SVG
BROWSER SUPPORT
DESKTOP SOFTWARE
MOBILE SOFTWARE
WEB SOFTWARE
USING symbol
A NOTE ABOUT use AND CSS STYLING
WHERE DO WE PUT ALL THOSE symbols?
THE FUTURE: FRAGMENT IDENTIFIERS AND HTTP/2
MAKING use WORK WITH AN EXTERNAL SOURCE
AJAX FOR THE SPRITE
SVG VS. THAT OTHER ICON SYSTEM: ICON FONTS
ICOMOON
GRUNT
ANOTHER APPROACH: GRUNTICON
GULP
OTHER BUILD TOOLS
WHAT ELSE CAN BUILD TOOLS DO FOR US?
SVGO
INTEGRATING SVGO INTO GRUNT
SVGO AS A DESKTOP APP
BE CAREFUL
OTHER OPTIMIZATION TOOLS
HAND-OPTIMIZING SVG
preserveAspectRatio
RESPONSIVE SVG
GRADUATION INTO ANIMATION
ANIMATING SVG WITH CSS
ANIMATING SVG WITH SMIL
ANIMATING PATHS
ANIMATING SVG WITH JAVASCRIPT
REFLECTING ON ANIMATION
FILTERS
PATTERNS
CLIPPING AND MASKING
BEYOND BASIC FILLS AND STROKES
COMBINING FEATURES
DO YOU NEED A FALLBACK AT ALL?
FALLBACK FOR SVG-AS-img
FALLBACK FOR SVG AS background-image
FALLBACK FOR INLINE SVG
BEWARE THE DOUBLE-DOWNLOAD
MAKING SVG ACCESSIBLE
CONCLUSION
Introduction
Chapter 1
Chapter 2
Chapter 3
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Conclusion
Resources

INDEX

Unlock This Title

You do not have access to this section. Get the full version of this title with a SitePoint Premium Account.

Start Free TrialRead Free Preview

Already a Premium member? Sign In

Community Questions