Using SVG with CSS3 & HTML5 VECTOR GRAPHICS FOR WEB DESIGN Amelia Bellamy-Royds, Kurt Cagle & Dudley Storey Using SVG with CSS3 and HTML5 Vector Graphics for Web Design Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey Beijing Boston Farnham Sebastopol Tokyo Using SVG with CSS3 and HTML5 by Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey Copyright © 2018 Amelia Bellamy-Royds, Kurt Cagle, Dudley Storey. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://oreilly.com/safari). For more information, contact our corporate/institutional sales department: 800-998-9938 or [email protected]. Editor: Meg Foley Indexer: Amelia Bellamy-Royds Production Editor: Kristen Brown Interior Designer: David Futato Copyeditor: Rachel Monaghan Cover Designer: Karen Montgomery Proofreader: James Fraleigh Illustrator: Rebecca Demarest November 2017: First Edition Revision History for the First Edition 2017-10-17: First Release 2018-03-09: Second Release See http://oreilly.com/catalog/errata.csp?isbn=9781491921975 for release details. The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. Using SVG with CSS3 and HTML5, the cover image, and related trade dress are trademarks of O’Reilly Media, Inc. While the publisher and the authors have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the authors disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work. Use of the information and instructions contained in this work is at your own risk. If any code samples or other technology this work contains or describes is sub‐ ject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights. 978-1-491-92197-5 [LSI] Table of Contents Preface. xiii Part I. SVG on the Web 1. Graphics from Vectors. 3 Defining an SVG in Code 4 Simple Shapes 7 Standalone SVG 12 Style and Structure 17 Repetition Without Redundancy 21 Graduating to Gradients 25 Activating Animation 28 Talking with Text 33 The SVG Advantage 37 Summary: An Overview of SVG 39 2. The Big Picture. 41 SVG and the Web Platform 42 The Changing Web 43 Future Focus: A Crystal Ball 47 JavaScript in SVG 48 Embedding SVG in Web Pages 56 SVG as an HTML Image 56 Interactive Embedded SVG 60 Using SVG in HTML5 Documents 61 Using SVG with CSS3 70 iii CSS Versus SVG: Style Versus Graphics 71 Summary: SVG and the Web 72 3. A Sense of Style. 75 CSS in SVG 75 Style Declarations 76 Overriding Styles 80 Conditional Styles 84 SVG in CSS 87 Using SVG Images Within CSS 87 Making Every File Count 94 Using SVG Effects Within CSS 96 CSS Versus SVG 98 Styling Documents Versus Drawing Graphics 98 CSS as a Vector Graphics Language 99 Which to Choose? 103 Summary: Working with CSS 105 4. Tools of the Trade. 107 Ready-to-Use SVG 108 Click, Drag, Draw: Graphical SVG Editors 113 Adobe Illustrator 114 Adobe Photoshop 115 Sketch 116 Inkscape and Sodipodi 117 Draw SVG 119 Boxy SVG 120 Bringing SVG Alive: SVG in the Web Browser 121 Gecko for Firefox 122 WebKit for Safari and iOS Devices 122 Blink for Newer Versions of Chrome, Opera, and Android Devices 123 Presto for Older Opera Versions and Opera Mini 123 Trident for Internet Explorer and Other Windows Programs 124 EdgeHTML for Microsoft Edge and Windows 10+ Programs 125 Servo 125 Other Dynamic SVG Viewers 126 Markup Management: Code Editors 127 Atom Plus SVG Preview 127 iv | Table of Contents Brackets Plus SVG Preview 128 Oxygen XML SVG Editor 129 Online Live Code Sites 130 Ready-to-Use Code: JavaScript Libraries 131 Raphaël and Snap.svg 132 D3.js 132 GSAP 133 SVG.js 133 Processing and Packaging 133 Summary: Software and Sources to Make SVG Easier 135 Part II. Drawing with Markup 5. Building Blocks. 139 Drawing Lines, from Here to There 140 Future Focus: More Measurements and Calculations 148 It’s Hip to Be Square (or Rectangular) 149 Future Focus: Geometry as Style 154 Cutting Corners 155 CSS Versus SVG: Curved Corners 158 Circular Logic 160 CSS Versus SVG: Shapes in Stylesheets 165 Summary: Basic Shapes 167 6. Following Your Own Path. 169 Giving Directions: The d Attribute 170 Future Focus: Piecewise Paths 172 Straight Shooters: The move-to and line-to Commands 173 Finishing Touches: The close-path Command 176 Hole-y Orders and Fill Rules 178 Following the Grid: Horizontal and Vertical Lines 182 Crunching Characters 183 Short and Sweet Shapes: Polygons and Polylines 185 CSS Versus SVG: Polygon Points 186 Curve Balls: The Quadratic Bézier Command 188 Future Focus: Beyond Simple Coordinates 192 Smooth Operators: The Smooth Quadratic Command 193 CSS Versus SVG: Paths Beyond SVG 198 Wave Motion: The Cubic Bézier Commands 198 Future Focus: Closing Curves 203 Table of Contents | v Building the Arcs 203 Future Focus: New Directions in Path Commands 208 Summary: Custom Shapes 208 7. The Art of the Word. 211 When Text Isn’t Text 213 Working with Web Fonts 215 Typewriter Text 216 Future Focus: Positioning Text with CSS 219 Colorful Language 220 CSS Versus SVG: Filling and Stroking Non-SVG Text 221 Responsive Text Scaling 221 Anchors and Alignment 225 Switching Styles with <tspan> 232 Adjusting the Typewriter 234 Future Focus: Automatically Positioned Multiline SVG Text 237 Full-Control Characters 237 Twists and Turns: The <textPath> Element 240 Sliding Text Along a Path with startOffset 246 Future Focus: More Flexible Text Paths 249 Measuring the Message 250 Summary: Graphical Text Layout and Fonts 251 Part III. Putting Graphics in Their Place 8. Scaling Up. 255 Coordinated Efforts 256 Framing the View, with viewBox 260 Future Focus: Selective Scaling 268 Calibrating the Scales 268 Scaling to Fit 269 A Poor Fit (and How preserveAspectRatio Fixes It) 273 CSS Versus SVG: Scaling to Fit 279 Just-Right Sizing 280 Autosizing Embedded SVG 281 Resizing Inline SVG 284 Preserving Aspect Ratios, with CSS Padding 286 Future Focus: Aspect-Ratio Control in CSS 295 Summary: Defining Coordinate Systems 296 vi | Table of Contents 9. A New Point of View. 299 Alternate Takes, with the <view> Element 300 Rescaling on the Fly, with SVG View Fragments 306 Future Focus: Cropping Any Image in a URL 309 Interactive Views 310 Packaged Deals 313 Flat Pack Stacks 324 Summary: Cropping Embedded SVG Files 328 10. Seeing Double. 331 Reduce, Reuse, Recycle 332 Future Focus: The <use> Element Shadow DOM 337 Symbolic Usage 338 Future Focus: Pinpointing a Symbol 341 File Management 341 Future Focus: Enabling Cross-Origin SVG Assets 351 Picture Perfect: Raster Images in SVG 351 Smooth Scaling Photographs 355 Future Focus: Easier Embedded Content 360 Summary: Reusing Content 360 11. Transformative Changes. 363 A Simpler Scale 364 Unbalanced Scales 370 Reflecting on Transformations 374 Future Focus: Transforming the transform Attribute 377 New Origins 378 Future Focus: Transformations with Units 383 Turning Things Around 385 Future Focus: Rotation Units and Adaptable Origins 391 Skewed Perspective 393 Enter the Matrix 400 Summary: Coordinate System Transformations 404 Part IV. Artistic Touches 12. Filling Up to Full. 409 Coloring Between the Lines 410 The Rainbow Connection 410 Future Focus: Controlling Colors, Consistently 413 Table of Contents | vii Coordinating Colors 414 Variables for Every Property 420 Water Colors 423 Future Focus: Percentage Alpha 428 Filling with More Than Solid Colors 429 Future Focus: Serving Up New Paint 431 Fallbacks for Fills 433 Future Focus: New Fill Effects 434 Picturing Paint 435 Scaling Paint Servers 437 The Boundaries of the Box 439 Great Gradients 441 Shared Structures 441 Aligning Linear Gradients 444 Transforming Gradients 450 Radiating Radial Gradients 452 Switching Focus 455 CSS Versus SVG: CSS Gradients 457 Patterns of Possibility 461 All the Units to Use 462 Dividing the Box 464 Picture Perfect 467 Patterned Prints 470 Summary: The fill Property, Gradients, and Patterns 475 13. Drawing the Lines. 477 Different Strokes 478 A Simple Stroke to Start 478 Future Focus: Layered Lines 483 Making the Connection with Line Joins 483 Future Focus: New Line-Join Options 487 Capping It Off with Line Caps 488 Adjusting Stroke Appearance 492 Anti-Anti-Aliasing for Crisp Lines 492 Swapping Stroke and Fill 494 Future Focus: Controlling Stroke Position 496 Scaling Shapes Without Scaling Strokes 496 A Dashing Design 499 A Wide Array of Dashes (and Gaps Between Them) 499 Future Focus: Better References for Dash Lengths 503 Turning Dashes into Dots 504 viii | Table of Contents CSS Versus SVG: Dashed Borders Versus Dashed Strokes 505 More Pleasing Dash Patterns, Made with Math 506 Future Focus: Greater Control of Dash Position 509 Starting Mid-Stride 509 Painting Lines 515 Future Focus: Painting in a Stroke Bounding Box 520 Summary: Stroke Effects 521 14. Marking the Way. 523 Emphasizing Points 524 Scaling to Strokes 530 Orienting Arrows 535 Future Focus: Automatically Coordinating Markers with Their Shapes 539 Defining Dimensions 540 Future Focus: Expanded Marker Position Options 544 Summary: Line Markers 546 15. Less Is More. 547 Fading Away with the opacity Property 548 The Clean-Cut Clip 550 Future Focus: Clipping Paths Everywhere 552 Creating a Custom Clipping Path 552 Intersecting Shapes 555 Clipping a clipPath 561 Stretch-to-Fit Clipping Effects 564 Shorthand Shapes 569 CSS Versus SVG: clip Versus clip-path 572 Hiding Behind Masks 573 Future Focus: More Masks for More Content 576 Who Was That Masked Graphic? 577 Making a Stencil 583 Future Focus: Easier Image Masks 589 Summary: Clipping and Masking 593 16.