Table of Contents. Preface... xiii

Transcription

1 Table of Contents Preface xiii Part I. SVG on the Web 1. Graphics from Vectors 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 The Big Picture 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

2 CSS Versus SVG: Style Versus Graphics 71 Summary: SVG and the Web A Sense of Style 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 Tools of the Trade 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

3 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 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 Following Your Own Path 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

4 Building the Arcs 203 Future Focus: New Directions in Path Commands 208 Summary: Custom Shapes The Art of the Word 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 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

5 9. A New Point of View 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 Seeing Double 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 Transformative Changes 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 Coloring Between the Lines 410 The Rainbow Connection 410 Future Focus: Controlling Colors, Consistently 413 Table of Contents vii

6 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 Drawing the Lines 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

7 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 Marking the Way 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 Less Is More 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 Playing with Pixels The Filter Framework 596 A Basic Blur 598 CSS Versus SVG: Blurred Elements Versus Blurred Shadows 603 Table of Contents ix

8 Fast Filters from CSS Alone 603 Future Focus: Filtering Images Within CSS 605 Mixing Multiple Filter Operations 606 The Chain of Commands 607 Mixing and Merging 610 Building a Better Blur 615 Morphing Shapes into Strokes 620 Drawing Out of Bounds 624 We re Going to Need a Bigger Boom 624 Half-and-Half Filter Effects 628 Blending with the Backdrop 633 Blending Basics 633 Premade Mixes 639 Isolating the Blend Effect 641 Future Focus: Filtering the Backdrop 645 Summary: Filters and Blend Modes 646 Part V. SVG as an Application 17. Beyond the Visible Titles and Tips 651 Future Focus: Multilingual Titles 658 Linking Labels 660 Roles and Relationships 663 Future Focus: Roles for Graphical Documents 666 1,000 Words Are Worth a Picture 667 Machine-Readable Metadata 674 Summary: Metadata for Accessibility and Added Functionality Drawing on Demand Linking It All Together 680 Interactive Style Switches 684 A Better Image Map 685 Getting the Point(er) Across 693 Targeting the Interaction 698 The Big Event 701 Counting Clicks 702 Bubbling Out of Shadows 708 Measuring Mouse Positions 712 x Table of Contents

9 Capturing the Keyboard with JavaScript-Enhanced Links 717 Controlling the Keyboard with tabindex and focus() 720 Summary: Interactive SVG Transitioning in Time Scalable Vector Animations 726 Smoothly Switching Styles 728 CSS Transitions 729 CSS Keyframe Animations 732 Benefits and Limits of Animating SVG with CSS 738 Future Focus: Additive CSS Declarations 741 Animations as Document Elements 741 Animating Attributes, Declaratively 743 Complex Animations 745 CSS Versus SVG: Motion Paths in CSS 750 Benefits and Limits of SVG/SMIL Animation Elements 751 Scripting Every Frame 752 Future Focus: Declarative Scripted Animations 754 Triggering Regular Updates 754 Calculating the Current Value 758 Summary: Animation Good Manners Planning Your Project 765 Does Your Project Need SVG at All? 765 Identify Your Browser Support Requirements 766 Decide How SVG Will Integrate in Your Website 768 Design for All Users 769 Working with Graphical Editors 773 Define Your Artboard or Drawing Size 774 Structure Your Graphic 775 Name Things 776 Set Up Color Preferences for Web Use 777 Simplify Paths 777 Test Text Fallbacks, or Convert to Paths 781 Consider the Backdrop 781 Unset Styles 782 Learn the Limits of Your Tool s SVG Output 782 Learn the Limits of SVG, Compared to Your Tool 783 Coordinating Code 786 Structuring Styles 786 Table of Contents xi

10 Sharing SVG Assets 789 Selecting a JavaScript Library 790 Test, Test, Test! 792 Final Thoughts 794 Index xii Table of Contents