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 corporate@oreilly.com Editor: Meg Foley Production Editor: Kristen Brown Copyeditor: Rachel Monaghan Proofreader: James Fraleigh November 2017: Indexer: Amelia Bellamy-Royds Interior Designer: David Futato Cover Designer: Karen Montgomery Illustrator: Rebecca Demarest First Edition Revision History for the First Edition 2017-10-17: 2018-03-09: First Release 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 Graphics from Vectors Defining an SVG in Code Simple Shapes Standalone SVG Style and Structure Repetition Without Redundancy Graduating to Gradients Activating Animation Talking with Text The SVG Advantage Summary: An Overview of SVG 12 17 21 25 28 33 37 39 The Big Picture 41 SVG and the Web Platform The Changing Web Future Focus: A Crystal Ball JavaScript in SVG Embedding SVG in Web Pages SVG as an HTML Image Interactive Embedded SVG Using SVG in HTML5 Documents Using SVG with CSS3 42 43 47 48 56 56 60 61 70 iii CSS Versus SVG: Style Versus Graphics Summary: SVG and the Web 71 72 A Sense of Style 75 CSS in SVG Style Declarations Overriding Styles Conditional Styles SVG in CSS Using SVG Images Within CSS Making Every File Count Using SVG Effects Within CSS CSS Versus SVG Styling Documents Versus Drawing Graphics CSS as a Vector Graphics Language Which to Choose? Summary: Working with CSS 75 76 80 84 87 87 94 96 98 98 99 103 105 Tools of the Trade 107 Ready-to-Use SVG Click, Drag, Draw: Graphical SVG Editors Adobe Illustrator Adobe Photoshop Sketch Inkscape and Sodipodi Draw SVG Boxy SVG Bringing SVG Alive: SVG in the Web Browser Gecko for Firefox WebKit for Safari and iOS Devices Blink for Newer Versions of Chrome, Opera, and Android Devices Presto for Older Opera Versions and Opera Mini Trident for Internet Explorer and Other Windows Programs EdgeHTML for Microsoft Edge and Windows 10+ Programs Servo Other Dynamic SVG Viewers Markup Management: Code Editors Atom Plus SVG Preview iv | Table of Contents 108 113 114 115 116 117 119 120 121 122 122 123 123 124 125 125 126 127 127 Brackets Plus SVG Preview Oxygen XML SVG Editor Online Live Code Sites Ready-to-Use Code: JavaScript Libraries Raphaël and Snap.svg D3.js GSAP SVG.js Processing and Packaging Summary: Software and Sources to Make SVG Easier 128 129 130 131 132 132 133 133 133 135 Part II Drawing with Markup Building Blocks 139 Drawing Lines, from Here to There Future Focus: More Measurements and Calculations It’s Hip to Be Square (or Rectangular) Future Focus: Geometry as Style Cutting Corners CSS Versus SVG: Curved Corners Circular Logic CSS Versus SVG: Shapes in Stylesheets Summary: Basic Shapes 140 148 149 154 155 158 160 165 167 Following Your Own Path 169 Giving Directions: The d Attribute Future Focus: Piecewise Paths Straight Shooters: The move-to and line-to Commands Finishing Touches: The close-path Command Hole-y Orders and Fill Rules Following the Grid: Horizontal and Vertical Lines Crunching Characters Short and Sweet Shapes: Polygons and Polylines CSS Versus SVG: Polygon Points Curve Balls: The Quadratic Bézier Command Future Focus: Beyond Simple Coordinates Smooth Operators: The Smooth Quadratic Command CSS Versus SVG: Paths Beyond SVG Wave Motion: The Cubic Bézier Commands Future Focus: Closing Curves Table of Contents 170 172 173 176 178 182 183 185 186 188 192 193 198 198 203 | v Building the Arcs Future Focus: New Directions in Path Commands Summary: Custom Shapes 203 208 208 The Art of the Word 211 When Text Isn’t Text Working with Web Fonts Typewriter Text Future Focus: Positioning Text with CSS Colorful Language CSS Versus SVG: Filling and Stroking Non-SVG Text Responsive Text Scaling Anchors and Alignment Switching Styles with Adjusting the Typewriter Future Focus: Automatically Positioned Multiline SVG Text Full-Control Characters Twists and Turns: The Element Sliding Text Along a Path with startOffset Future Focus: More Flexible Text Paths Measuring the Message Summary: Graphical Text Layout and Fonts 213 215 216 219 220 221 221 225 232 234 237 237 240 246 249 250 251 Part III Putting Graphics in Their Place Scaling Up 255 Coordinated Efforts Framing the View, with viewBox Future Focus: Selective Scaling Calibrating the Scales Scaling to Fit A Poor Fit (and How preserveAspectRatio Fixes It) CSS Versus SVG: Scaling to Fit Just-Right Sizing Autosizing Embedded SVG Resizing Inline SVG Preserving Aspect Ratios, with CSS Padding Future Focus: Aspect-Ratio Control in CSS Summary: Defining Coordinate Systems vi | Table of Contents 256 260 268 268 269 273 279 280 281 284 286 295 296 A New Point of View 299 Alternate Takes, with the Element Rescaling on the Fly, with SVG View Fragments Future Focus: Cropping Any Image in a URL Interactive Views Packaged Deals Flat Pack Stacks Summary: Cropping Embedded SVG Files 300 306 309 310 313 324 328 10 Seeing Double 331 Reduce, Reuse, Recycle Future Focus: The Element Shadow DOM Symbolic Usage Future Focus: Pinpointing a Symbol File Management Future Focus: Enabling Cross-Origin SVG Assets Picture Perfect: Raster Images in SVG Smooth Scaling Photographs Future Focus: Easier Embedded Content Summary: Reusing Content 332 337 338 341 341 351 351 355 360 360 11 Transformative Changes 363 A Simpler Scale Unbalanced Scales Reflecting on Transformations Future Focus: Transforming the transform Attribute New Origins Future Focus: Transformations with Units Turning Things Around Future Focus: Rotation Units and Adaptable Origins Skewed Perspective Enter the Matrix Summary: Coordinate System Transformations Part IV 364 370 374 377 378 383 385 391 393 400 404 Artistic Touches 12 Filling Up to Full 409 Coloring Between the Lines The Rainbow Connection Future Focus: Controlling Colors, Consistently Table of Contents 410 410 413 | vii Coordinating Colors Variables for Every Property Water Colors Future Focus: Percentage Alpha Filling with More Than Solid Colors Future Focus: Serving Up New Paint Fallbacks for Fills Future Focus: New Fill Effects Picturing Paint Scaling Paint Servers The Boundaries of the Box Great Gradients Shared Structures Aligning Linear Gradients Transforming Gradients Radiating Radial Gradients Switching Focus CSS Versus SVG: CSS Gradients Patterns of Possibility All the Units to Use Dividing the Box Picture Perfect Patterned Prints Summary: The fill Property, Gradients, and Patterns 414 420 423 428 429 431 433 434 435 437 439 441 441 444 450 452 455 457 461 462 464 467 470 475 13 Drawing the Lines 477 Different Strokes A Simple Stroke to Start Future Focus: Layered Lines Making the Connection with Line Joins Future Focus: New Line-Join Options Capping It Off with Line Caps Adjusting Stroke Appearance Anti-Anti-Aliasing for Crisp Lines Swapping Stroke and Fill Future Focus: Controlling Stroke Position Scaling Shapes Without Scaling Strokes A Dashing Design A Wide Array of Dashes (and Gaps Between Them) Future Focus: Better References for Dash Lengths Turning Dashes into Dots viii | Table of Contents 478 478 483 483 487 488 492 492 494 496 496 499 499 503 504 image maps, 686 picture and srcset, 58 presentation attributes, 321 scaling SVG in, 280-284 styling the box, 159, 317, 781 SVG views within, 301, 316 img role, 58, 66, 345, 656, 665 children presentational, 657 immediately-invoked function, for scoping JavaScript variables, 54 @import CSS rule, 79, 787 !important CSS modifier, 76, 77 in attribute, 610 filters that ignore in, 613 in2 attribute, 611 inherit keyword, 20, 497 to reset styles, 83 unsetting styles in editors, 782 Inkscape, 117, 327 (see also graphical editors) background filters, 610 converting text to paths, 214 CSS support, 78, 455 desc descriptions, 668 fill rule defaults, 181 mesh gradients, 431 SVG 1.2 wrapping text, 212 symbol libraries, 339 unset styles, 782 inline styles, 18, 77, 293, 782 compared with other styling methods, 786 DOM property, 54 inline SVG, 5, 61-69, 680, 769 autosizing, 284-295 CSS styling and inheritance, 64, 77 media queries, 86 use elements for icons, 345 inline-size style property, in SVG 2, 237 innerHTML DOM property, 49 on SVG elements, 49 inset CSS function, 165 internal stylesheet (see style element) Internet Explorer, 124 (see also web browsers) virtual machines, 793 806 | Index interpolation, 725, 758 (see also animation) intrinsic aspect ratio, 281 intrinsic size, 282, 320 (see also default size) inverse DOM method, 715 isolation style property, 642 vs enable-background, 644 isolation, for blend modes, 642-645 J jank, defined, 726 (see also animation, performance) JavaScript, 48-56 (see also DOM) for animation, 752-762 drawing SVG elements with, 142, 151 event model, 701 for interactivity, 701-722 libraries, 131-133, 145, 790-791 on* attributes, 53 script element, 51 string length counting, 239 timeline, 45 JSFiddle, 130 K keyboard access (see accessibility) @keyframes rule, 30, 514, 732 keyframes, defined, 727 keypress DOM event, 719 L L or l line-to command, 173 multiple coordinate pairs, 179, 184 vs horizontal and vertical short‐ hands, 182 lang attribute, 15 (see also xml:lang attribute) for multilingual title and desc, in SVG 2, 658 language, of text, 652 (see also xml:lang attribute) :last-of-type selector, 387 layer effects, 547-550, 568, 577, 613, 640 create isolation, 642 layers, in design (see graphical edi‐ tors) lengthAdjust attribute, 248 letter-spacing style property, 240 libRSVG, 45 ligatures (in text), 239 lighten blend mode, 635 line element, 140-148 start of stroke, 510 line markers (see marker element) line-height style property, 237 linearGradient element, 27, 429, 441, 444-451, 516 (see also gradients) attributes, 443 linearRGB, keyword for color inter‐ polation, 609 link element, 80 in an SVG file, 80 :link selector, 683 (see also selectors) links (see a element) list and listitem roles, 666 list-style-image style property, 89 local URL, 88 location DOM object, 719 luminance filters, 608 masks, 574, 584, 590 luminanceToAlpha, type in feColor‐ Matrix filter, 608 M M or m move-to command, 173 creating subpaths, 178 multiple coordinate pairs are lines, 184 map element, in HTML, 686 marker element, 523-546 attributes, 531, 541 dimensions, 525, 540 paint-order control, 494 marker-* style properties, 524 markable shape elements, 524 marker shorthand, 525 markerHeight and markerWidth attributes, 541 markerUnits attribute, 531, 538, 541 markup, defined, mask element, 577, 587 (see also masking) contents, 578 mask style property, 577 (see also masking) changes in CSS3, 576, 589 for CSS layout boxes, 576, 590 on mask element, 587 mask-* style properties, in CSS3, 589 mask-composite, 591 mask-image, 90 mask-mode, 590 mask-border style property, in CSS3, 592 mask-type style property, on mask element, 591 maskContentUnits attribute, 578 masking, 547, 573-592 vs clipping, 547, 573 luminance vs alpha, 574, 590 rendering order, 607 Masking module (see CSS3 modules) maskUnits attribute, 578 Math JS object random method, 705 trigonometric functions and con‐ stants, 388, 762 matrix transform function, 401 transformation calculations, 399-404 DOM methods, 713-715 inverting, 715 type in feColorMatrix filter, 608 matrixTransform DOM method, 714 media attribute, 79, 86 (see also media queries) @media CSS rule, 86 (see also media queries) Media Fragments URI, 309 media queries, 86 for external stylesheets, 79 media types vs features, 86 prefers-reduced-motion, 772 Index | 807 print styles, 81 SVG scaling, 86 vs views, 312 meet keyword, for preserveAspect Ratio, 276, 322 mesh gradients, 431-432 meta element, 676 metadata element, 109, 674-676 Microsoft Edge, 125 (see also web browsers) mix-blend-mode style property, 633, 639 (see also blend modes) mode attribute, on feBlend, 634 modulus operator, 54, 152, 761 motion blur, 601 (see also blur effect) motion path, 746, 750 (see also animateMotion) Motion Path module (see CSS3 mod‐ ules) MouseEvent DOM interface, 712 mouseup DOM event, 712 mpath element, 746 MS Edge, 125 (see also web browsers) virtual machines, 793 multiline text in SVG 2, 237 with textPath, 244 with x and dy in SVG 1, 236 multiply blend mode, 634, 643 N name attribute on iframe element, 304 on object element, 305 name property, of a JS function, 49 namespace (see XML namespaces) namespaceURI DOM property, 144, 705 nested coordinate systems, 300, 314, 327, 333, 338, 472 for cropping embedded images, 356 reused shapes and percentages, 334 vs transformations, 363 808 | Index non-scaling-stroke keyword, 496 (see also vector-effect) nonuniform scale, 371 (see also scale transform) nonzero keyword, 179 (see also fill-rule style property) in CSS shapes functions, 186 normal blend mode, 633 normal distribution, 598, 602 :not selector, 327 (see also selectors) Noun Project, 112 :nth-of-type selector, 93, 366 O object element, 60 (see also objects, SVG embedded as) accessibility, 214 as a link target, 305 plug-in for older browsers, 126 scaling SVG in, 280-284, 305, 309 SVG views within, 316 object-fit and object-position style properties, 279, 355 objectBoundingBox keyword, 438 (see also bounding box) for clipping and masking, 553, 564, 579, 584 distorting effect visualized, 445 vs fill-box in CSS, 384 for filters, 624, 628 for gradients, 443 for patterns, 462, 464 for stroke paint, 516-520 zero-width or -height boxes, 520 objects, SVG embedded as, 60-61, 680, 768 and CSS media queries, 223 autosizing, 281, 282 backgrounds and borders on root element, 141 interactive views, 312 media queries, 86 same-file links, 310 scaling with object vs iframe, 304, 309 offset attribute, on stop element, 442, 446, 448 creating sharp color changes, 453 offset-* style properties, 750 offsetX and offsetY DOM properties, 713 on* attributes, 53, 702 opacity filter function, 606 opacity style property, 424, 548, 688 and pointer-events, 695 with visibility, for CSS animations, 731 Open Clip Art Library (OCAL), 110, 668 operator attribute on feComposite, 614 on feMorphology, 618 optimizers, for SVG code, 134 path data, 184 OR operator, 711 orient attribute, on marker element, 535 origin of coordinates, 256, 368 (see also coordinate systems) of web pages, 348 (see also cross-origin (CORS) files) orthographic projection, 397 outline style property, 684, 691 outline-offset style property, 692 overflow style property, 81 avoiding clipped strokes, 69, 278 bounding boxes, 582 vs clip-path, 550 interactivity, 695 on marker, 525, 540 on pattern, 464 on svg element nested SVG, 315 slice scaling, 276, 291 on symbol, 340 Oxygen XML editor, 129 P padding style property for aspect-ratio control, 287 avoiding clipped strokes, 278 pageX and pageY DOM properties, 713 paint servers, 25, 409, 429-474 concepts, 435 error states, 433 for markers, 538 scaling, 437 for strokes, 515 SVG 2, 431 paint-order style property, 494, 533 limitations for text, 620 painted keyword, for pointer-events, 694 parser, (see also HTML and XML) CSS error-checking, 84, 423, 548 path attribute, on textPath in SVG 2, 249 path CSS function, 198 path element, 7, 169-208 for animateMotion, 746, 746 creating from images, 687 length of a path, 251, 506 merging paths, in editors, 775, 780 vs polygon and polyline, 185 repositioning with transforms, 381 start of stroke, 510 for textPath, 241 pathLength attribute, 507 pattern element, 429, 461-474, 630 (see also paint servers) vs repeated shapes, 154 single-tile patterns, 467, 518 patternContentUnits attribute, 462 userSpaceOnUse vs objectBoun‐ dingBox, 437, 464 patternTransform attribute, 473-474 patternUnits attribute, 462, 470 userSpaceOnUse vs objectBoun‐ dingBox, 437 PDF, 39 percentages for alpha values, 428 for CSS circle function, 165 for dashed strokes, 500, 503 for lengths that are neither hori‐ zontal nor vertical, 164, 479 Index | 809 in markers, 532 in masks, 579 in nested coordinate systems, 314 in patterns, 462 in reused graphics, 267, 334 for rounded rectangles, 156 for transform property, 383 and user-space graphical effects, 438, 627 and views, rescaling, 300 performance budget, 767 performance DOM object, 757 picture element, 58 browser support and PictureFill polyfill, 59 providing fallbacks for SVG, 58 switching SVG views, 313 pointer-events style property, 691, 693-698, 706 for CSS layout boxes, 697 for image element, 697 stroke styles affecting pointer region, 478 for text, 697 points attribute, 172, 185 polygon and polyline elements, 172, 185, 512 start of stroke, 510 polygon CSS function, 186, 192, 569 graphical editors, 572 Portable Document Format (PDF), 39 position style property, for CSS vec‐ tor graphics, 99 PostScript, 39, 727 prefers-reduced-motion media query, 772 presentation attributes, 18, 76, 706 compared with other styling methods, 786 specificity, 81 presentation role, 657 preserveAspectRatio attribute, 273-278 defer keyword, 359 on image, 355 on nested svg, 314, 333 810 | Index vs object-fit and object-position, 279 padding hack with slice, 291 in SVG view fragments, 306 on symbol, 333, 338 on view element, 300 Presto, 123 preventDefault DOM method, 712, 719 primitives, for filters (see filters, primitive elements) primitiveUnits attribute, 613, 628 print stylesheets, 81 (see also media queries) procedural animation, defined, 727 (see also animation) pseudoclasses, 64, 346 (see also selectors) for interactivity, 684 pseudoelements, 89, 104 Q Q or q quadratic-curve-to command, 190, 195 converting to cubic, 200 querySelector and querySelectorAll DOM methods, 55 R r attribute on circle, 11, 161 geometry property, in SVG 2, 154 percentages, 164 on radialGradient, 452 radialGradient element, 27, 429, 441, 452-457 (see also gradients) attributes, 443 radians (rad unit), 391 converting to degrees, 388, 762 Raphaël, 132 raster images data URIs, 96 embedding with image element, 352 fallback for SVG, 58, 61, 120 vs vector, 36, 37, 43, 110, 215, 225, 280, 621, 679, 768 rasterization, 436 Adobe Illustrator export of nonSVG effects, 784 aliasing and anti-aliasing, 492, 774 performance, 323, 646 tools, 120 RDF, 674 rect element, 9, 149-158 start of stroke, 510 reference point, of a marker, 542 reflections, 374 (see also scale transform) impact on rotation direction, 385 refX and refY attributes, 542 on symbol, in SVG 2, 341 region role, 665 rel attribute, 681 relative URL, 88 relative vs absolute path commands, 171, 370 text positioning, 234 rendering engines, 121 requestAnimationFrame DOM func‐ tion, 755 limitations, 758 resize style property, 270 browser support, 272 Resource Description Framework, 674 result attribute, 611 rgb color function, 412 rgba color function, 423 role attribute, 319, 345, 663 for alternative text in browsers, 655-658 for complex structure, 663-666 for fixing VoiceOver bugs on SVG in img element, 58 interactive elements, 666 for live regions, 707 new roles for graphics, 666 for noninteractive inline SVG, 66 on svg element, 656 root element, of a document, 12, 144 rotate attribute on animateMotion, 749 on text or tspan elements, 240 rotate transform, 385-391 as an equation, 388 three-value syntax, 388, 391 rx and ry attributes auto keyword, 160 on ellipse, 160 geometry properties, in SVG 2, 154, 160 on rect, 155 S S or s smooth-cubic-curve-to com‐ mand, 200 Safari (browser), 122 (see also web browsers) sandbox attribute, 305 saturate filter function, 608 scale transform, 366-377 (see also transform attribute) CSS3 shorthands, 377 effect on strokes, 371 as an equation, 370 negative values (reflections), 374 uniform vs nonuniform, 370 Scour, 134 screen blend mode, 634, 643 screen readers (see accessibility) screenX and screenY DOM proper‐ ties, 713 script element, 51, 143 (see also JavaScript and DOM) crossorigin, 351 HTML vs SVG, 51, 52 synchronous behavior, 52 selectors, 77 :active, 684 attribute, 78, 427, 708 :checked, 64 DOM methods, 55 :focus, 684 :hover, 64, 684, 692 for interactivity, 684 keyframe position, 32, 732 :last-of-type, 387 :link and :visited, 683 mixed-case bugs, 55 namespaces in, 78, 683 Index | 811 :not, 327 :nth-of-type, 93, 366 sibling, 324 universal, 81, 498 :valid and :invalid, 64 working around browser inheri‐ tance bugs, 340, 538 Selectors module (see CSS3 modules) self-closed, XML tag, 10, 52 semantics, 664 (see also role attribute) Servo (rendering engine), 125 (see also Firefox) set element, 746 setAttribute and setAttributeNS DOM methods, 48, 144, 710 setInterval JS function, 755 setTimeout JS function, 755 shadow DOM, 338, 710 retargeting events, 711 shape-inside style property, in SVG and CSS3, 237 shape-outside style property, 90, 165 vs clip-path, 572 visual editors for shape functions, 572 shape-rendering style property, 493 Shapes module (see CSS3 modules) side attribute, on textPath in SVG 2, 249 Sketch, 116 (see also graphical editors) skew transform, 393-399 as an equation, 394 slice keyword, for preserveAspectRa‐ tio, 276, 291 slider role, 720 SMIL (Synchronized Multimedia Integration Language), 28, 741 (see also animation) Snap.svg, 132 Sodipodi, 117 (see also Inkscape) solidcolor element, 431 source element, with picture element, 58 SourceAlpha filter input, 610, 621 for trimming blur, 616 812 | Index SourceGraphic filter input, 610 spacing and spacingAndGlyphs key‐ words, for textLength, 248 specificity, in CSS, 81 spline, of Bézier curves, 188 spreadMethod attribute, 443 on linearGradient element, 446-449 on radialGradient element, 453-457 sprite image files, 94 with CSS background-* proper‐ ties, 328 vs SVG stacks, 327 views and, 313 Squiggle viewer, for Apache Batik, 126 src attribute on image element, for fallback, 354 on img, 58 on script element in HTML, 51 srcset attribute on img, 58 on source within picture, 59 sRGB in color profiles, 413 keyword for color interpolation, 609 vs CMYK, 777 stacks, of SVG icons (see SVG stacks) standard deviation, 601 startOffset attribute, 246 static SVG, vs interactive, 679 status role, 708 stop element, 441-443 duplicating with gradient crossreferences, 449 within radialGradient, 452 stop-color style property, 442 defining with CSS classes, 455 stop-opacity style property, 424, 442 stroke style property, 10, 220, 478 (see also strokes) CSS3 changes, 434, 483 and pointer-events, 693 stroke-align style property, in CSS3, 496, 783 stroke-dash-* style properties, in CSS3, 509 stroke-dasharray style property, 499-515 path-drawing animation, 515 stroke-dashoffset style property, 510 stroke-linecap style property, 488-492 for dashed strokes, 504 stroke-linejoin style property, 483-487 vs line caps, 488 new values in SVG 2, 487 stroke-miterlimit style property, 485 stroke-opacity style property, 163, 424, 479 vs opacity, 548 and pointer-events, 695 stroke-width style property, 10, 146, 478, 482, 518 marker scaling, 530 and pointer-events, 695 StrokePaint filter input, 610, 623 strokes, 477-522 alignment and paint order, 163, 480, 494, 496, 533, 783 cursive text, 684 dashed, 499-515 vs CSS border styles, 505 limitations, vs filter effects, 620 paint servers, 515 replacing filled paths, 779 scaling and nonscaling, 371, 496-499 stroke region for pointer-events, 693 strokeWidth keyword, for marker Units, 531 style attribute, 18, 77 (see also inline styles) style DOM property, 54, 673 style element, 19, 77-79 (see also CSS) Adobe Illustrator export, 786 compared with other styling methods, 786 in external asset files, 347, 419 for minimizing flash of unstyled content, 346 @import rules and performance, 787 stylesheet order, for cascade, 84 SVG vs HTML, 77 @supports CSS rule, 85 for CSS variables, 422 limitations, 85, 548, 597 SVG as images (see images, SVG embedded as) as objects (see objects, SVG embedded as) browser support, 47, 767 vs HTML, 43 inline (see inline SVG) namespace, 13 (see also XML namespaces) standalone files vs inline SVG, timeline, 45 vs raster images, 36, 37, 110, 215, 225, 280 SVG autosizing image elements, 360 bearing path command, 208 child function for crossreferences, 432, 545 crossorigin attribute, 351 DOM compatibility improve‐ ments, 50 geometry properties, 20, 154 href without xlink, 21 HTML embedded content ele‐ ments in SVG, 360 line join alternatives, 487 markers changes, 544 multiline text, 237 paint servers, 431 percentages for alpha, 428 support (see web browsers, sup‐ port) SVG 1.1 vs 2, 44 symbol changes, 341 textPath changes, 249 vector-effect property, 268 SVG Editor (graphical interface for SVGO), 134 svg element, 6, 12 attributes, 7, 21, 66, 255, 314 Index | 813 cropping images with, 356 in HTML documents, 62 (see also inline SVG) nested, 314 (see also nested coordinate systems) roles, for accessibility, 656 vs symbol, 339, 709 SVG fonts, 212, 216 SVG Markers module, 545, 750 SVG Paths module, 208 SVG stacks, 94, 324 vs views, 327 SVG view fragments, 299, 306-312 (see also view element) SVG-in-OpenType fonts, 213 context-* style keywords, 540 SVG.js, 133 SVG4Everybody, 350, 789 SVGElementInstance DOM object, 710 SVGMatrix DOM object, 714 SVGO, 134 SVGOMG, 134 SVGPoint DOM object, 714, 760 SVGStore Grunt plug-in, 134 SVGxUse, 350 SVGZ file extension, 112 switch element, 659 symbol element, 338-351, 472, 482 vs marker, 524 vs reusing nested svg, 339, 709 Synchronized Multimedia Integration Language (SMIL), 741 synthesized typefaces, 233 system colors, 771 systemLanguage attribute, 659 T T or t smooth-quadratic-curve-to command, 193 tabindex attribute, 718, 721 tab order and same-page links, 699 tangent motion along a path, 760 for smoothly joining curves, 193 in textPath layout, 241 814 | Index target attribute, 301, 680 target DOM property, of an Event object, 701, 706 and SVG use shadow DOM, 710 target fragment, 299 (see also URL values) :target selector, 94 for interactive links, 699 for SVG stacks, 325 with view element, 323 text element, 216-232 bounding box, 440 decorative text and accessibility, 213, 376, 399, 583, 622 DOM methods, 250 text-align style property, 237 text-anchor style property, 228, 236, 250 in textPath layouts, 248, 682 text-shadow style property, 85, 603 textLength attribute, 232, 248, 250 textPath element, 240-248, 681 DOM methods, 250 three-dimensional (3D) transforma‐ tions, 400 (see also transformations) simulating with skew, 395 tile, for patterns, 461 (see also pattern element) timer role, 708 timing functions (see animation, tim‐ ing functions) title attribute, in HTML, 653 title element, 14-16, 419, 529, 651-660, 685 alternative text, 653 improving browser support, 655 limitations, 654 vs aria-label, 359, 655 vs desc, 667 document title, 651 fallbacks in old browsers, 669 HTML content, 668 multilingual, 658 tooltips, 653 to attribute, 744 to keyframes selector, 732 toFixed JS method, 706 toggle CSS function, 148 tooltips, 653 (see also title element) touch input, 654, 684, 693, 707, 712, 773 transform attribute or style property, 363-405 (see also coordinate systems) attribute vs style, 364, 377, 383, 391 browser support, 364 vs gradientTransform and pat‐ ternTransform, 451, 473 in SVG view fragments, 307 transform lists, 376, 378 transform-box style property, 384 and transform-origin, 392 transform-origin style property, 391 transformations, 363-405 (see also transform attribute) 3D, 395, 400 affine, 399 vs animateMotion, 749 attributes impacted by, 383 inverse, 715 matrix representation, 399-404 multiple operations, 376, 378, 403 of paint servers, 450 user-space effects, 585 vs viewBox scaling, 256, 364, 367, 385 Transforms module (see CSS3 mod‐ ules) transition-* style properties, 729 asymetrical transitions, 732 transition shorthand, 604, 730 transition-delay, 729, 732 transition-duration, 729 transition-property, 729 transition-timing-function, 730 translate transform, 378-383 CSS3 shorthands, 385 as an equation, 378 vs use element attributes, 383 Tributary, 130 Trident (rendering engine), 124 (see also Internet Explorer) tspan element, 232-236 vs a element in text, 681 DOM methods, 250 in textPath, 242, 682 turn unit, 391 tweening, 725, 727, 758 (see also animation) type attribute on a element, 681 on feColorMatrix, 608 on object element, 60 on style element, 19, 78 U uniform scale, 371 (see also scale transform) units angles, 391 converting to user coordinates for paths, 192 CSS3, 148 in graphical editors, 774 scaling effects, 268 supported in SVG 1.1, 142 time, 729, 744 in transform property vs attribute, 383 viewport, 285, 497 url CSS function, 28 URL values in CSS, 88, 97 file: URLS, 341 global, local, or relative, 88, 97 origin of web pages, 348 SVG view fragments, 306 target fragments, 299, 301 use element, 21, 23, 332-351 changes in SVG 2, 337 vs cloning DOM nodes, 712 duplicating text, 374 nested references, 337, 419 scaling, 472 vs server-side includes, 789 shadow DOM event models, 710 usemap attribute, 686 user coordinates, defined, 140 user space, defined, 437 userSpaceOnUse keyword, 437 Index | 815 for clipping and masking, 553, 556, 579, 584 for filters, 624, 627, 628 for gradients, 443 for markerUnits, 532 for patterns, 462 percentages and multiple svg ele‐ ments, 438, 627 UTF-8, 5, 14 UTF-16, 14 for character counting, 239 V V or v vertical-line-to command, 182 :valid and :invalid selectors, 64 (see also selectors) browser support, 67 Values and Units module (see CSS3 modules) var CSS function, 420, 421 (see also CSS, variables) Vecteezy, 120 vector drawables (in Android apps), 171 Vector Markup Language (VML), 124, 132 vector-effect style property, 268, 373, 496-499 vertical text layout, 240, 245, 250 video element, 295, 589 in SVG 2, 360 view element, 300-324 and nested svg elements, 315 for sprites, 94 view sprites vs SVG stacks, 327 view-box keyword, for transformbox, 384 viewBox attribute, 223, 262-272 cropping a nested image, 356 defining intrinsic aspect ratio, 281 in graphical editors, 284, 775 on marker, 541 on nested svg, 314, 333 on pattern, 462, 470 proposal to convert to CSS, 295 setting with a JavaScript array, 705 in SVG view fragments, 306 on symbol, 333, 338 816 | Index vs transformations, 364, 385 on view element, 300 viewport units, 262, 285, 497 viewport, in SVG scaling, 260 vs CSS viewport units, 262 viewTarget attribute, 307, 324 virtual machines, for testing, 793 visibility style property, 31 and accessibility, 657 clipping paths, 554 CSS animations, 731 vs opacity, 698, 731 and pointer-events, 693 visible* keywords, for pointer-events, 694 :visited selector, 683 (see also selectors) VML, 124, 132 W W3C, 62 WAI-ARIA (see ARIA) WAI-ARIA Graphics module, 667 Web Animations API, 728, 754 web browsers, 121-126 bugs accessibility, 654, 685, 717 blend modes, 643 clipping paths, 564, 692 CSS animations, 514 CSS transforms, 377, 384, 392 CSS variables, 421 currentColor inheritance, 415 DOM methods, 713-714 filters, 605, 609, 639 font-size, 219 foreignObject element, 63, 673 getBBox, 439, 440 gradients, 424, 442, 447, 454, 455, 460 markers, 530, 532, 535, 538 masks, 577, 580, 590 object embeds, 61, 305, 680 parsing, 673 patterns, 463 querySelector, 55 scaling, 59, 282-285, 304 strokes, 480, 487, 501, 504, 507 text layout, 240, 241, 245, 248, 682 units and calc, 148, 478, 513 URL target fragments, 301 use elements, 267, 334, 340, 347-348, 399, 419, 469 user-space effects, 438 views, 300, 301, 306, 309, 323, 324 support blend modes, 637, 640 contenteditable in SVG, 632 CSS animations, 32, 60, 514, 728, 730, 733 CSS variables, 420 CSS3 clipping and masking, 552, 568, 570, 576, 590, 592 CSS3 colors, 412, 428 CSS3 filters, 597, 606, 616, 622, 645 CSS3 shape functions, 569 CSS3 transforms, 377, 384, 392, 451 CSS3 units, 148, 286, 520 data URIs, 95 external asset files, 347-348, 351, 419, 434, 449, 469 filter inputs, 610 fonts using SVG glyphs, 212 foreignObject element, 63 form pseudoclass selectors, 67 getBBox options, 521 href without xlink, 22, 449 image autosizing, 353, 360 link element in SVG, 80 masking, 573 multilingual title and desc, 658 object-fit and -position, 280 paint-order, 494, 534 requestAnimationFrame, 756 resize property, 272 SMIL animation elements, 742 @supports, 85 SVG 1, 47, 767 SVG DOM changes, 50 SVG geometry properties, 20, 154 SVG marker options, 524, 544 SVG paint servers, 431 SVG text layout, 237 tabindex and focus, 720 use element shadow DOM, 338, 711 vector-effect, 268, 497 views, 300-301, 306, 313 Web Animations API, 754 -webkit-* properties, 122, 123, 125, 435, 597 testing, 792-794 web fonts, 213, 215 fallbacks, 227-232, 781 web platform, defined, 42 WebKit, 122 (see also web browsers) -webkit-* style properties, 33, 122, 364, 514, 552, 568, 576, 590, 592, 597, 604, 728 -webkit-text-fill-color and -webkittext-stroke-color style properties, 221, 435 WHATWG, 62 white-space style property, 237 whitespace, in text markup, 218 width attribute or style property (see height and width) Wikimedia Commons, 111 wildcard CSS namespace selector, 78 will-change style property, 763 winding order, 181 (see also fill-rule style property) word-spacing style property, 240 Writing Modes module (see CSS3 modules) writing-mode style property, 240 (see also vertical text layout) X x and y attributes on filter, 624, 627 on filter primitives, 628 geometry properties, in SVG 2, 154, 219 on mask, 578 on pattern, 462, 467 Index | 817 on rect, 9, 149 on svg element, 314, 710 on symbol, in SVG 2, 341 text layout multiple values, 239 on text element, 34, 216 within textPath, 244 on tspan, 235 on use, 23, 332, 383, 557, 710 x and y DOM properties, of a point object, 714 x1 and x2 attributes on line element, 140 on linearGradient element, 444 X11, 410 XLink, 21 xlink:href attribute, 21, 23 on a element in SVG, 310, 680 CSS selectors for, 78 DOM methods for creating, 49 on linearGradient and radialGra‐ dient, 443, 449 on pattern, 470 on script element in SVG, 51 on use, 332 XML parser, 5, 10, 14, 76, 669 (see also HTML, parser) timeline, 45 XML namespaces in CSS, 78 818 | Index DOM methods, 48-49 with foreignObject, 63 namespaceURI property, 144 with inline SVG and the HTML parser, 63 xlink, 21 XML prolog, 79 xml-stylesheet instruction, 79 xml:base attribute, 97 xml:lang attribute, 15, 652 vs lang, 658 vs systemLanguage, 660 XMLHttpRequest DOM object, 349 xmlns attribute, 13, 669 xmlns:xlink attribute, 21 XSLT, 130, 131 Y y attribute (see x and y attributes) y1 and y2 attributes on line element, 140 on linearGradient element, 444 Z Z or z close-path command, 176 closing curves in SVG 2, 203 z-index style property, 12, 85, 568 working around lack of support, 752, 776 zoomAndPan attribute, 307 About the Authors Amelia Bellamy-Royds is a freelance writer and web developer whose primary interest is scientific and technical communication— in words or in graphics She is best known in web design circles for her work with SVG In addition to explaining SVG and related web standards, she tries to make them better; Amelia is an Invited Expert on the W3C’s SVG, ARIA, and CSS Working Groups Amelia’s interest in SVG stems from work in data visualization, and builds upon the programming fundamentals she learned while earn‐ ing a B.Sc in bioinformatics From there, she moved to work in sci‐ ence, health, and environmental policy research, and then to a Master’s degree in journalism Amelia currently lives in Edmonton, Alberta, Canada This is the fourth book on SVG she has coauthored for O’Reilly Media Kurt Cagle is the founder of Semantical, LLC, a smart data com‐ pany, and uses SVG for data visualizations and web application development He is also author or coauthor of more than twenty books on web technologies, data modeling, and knowledge manage‐ ment He lives in Issaquah, WA, with his wife, daughters, and cat, who helps edit his manuscripts Dudley Storey has been making web pages for almost the entire life of the web An accomplished teacher, writer, and designer, he is also the author of Pro CSS Animation (Apress, 2013) Dudley is also a contributing editor at Smashing Magazine, and writes web develop‐ ment articles on his blog, theNewCode.com Colophon The animal on the cover of Using SVG with CSS3 and HTML5 is a blue-fronted lorikeet (Charmosyna toxopei) This bird is exclusively found on the Indonesian island of Buru Buru was part of the Dutch East Indies colony from 1658 to 1942, and Lamburtus Johannes Toxopeus (born in Java, but of Dutch nationality) was the first Euro‐ pean scientist to describe and capture this lorikeet species His name thus became part of the bird’s Latin name These birds are primarily green in color, with blue heads and bellies They are small members of the parrot family, growing to about inches (16 cm) long Blue-fronted lorikeets live in pairs, occasionally forming small groups up to 10 birds Their preferred habitat is low‐ land forest with plenty of flowering trees to provide them with their diet of nectar and soft fruit The blue-fronted lorikeet is critically endangered due to logging activity in its already limited range Two protected areas have been established on the island to help preserve the bird’s habitat Many of the animals on O’Reilly covers are endangered; all of them are important to the world To learn more about how you can help, go to animals.oreilly.com The cover image is an illustration by Karen Montgomery, based on an antique engraving from Shaw’s Zoology The cover fonts are URW Typewriter and Guardian Sans The text fonts are Adobe Minion Pro and Myriad Pro Light; the heading font is Adobe Myriad Con‐ densed; and the code font is Dalton Maag’s Ubuntu Mono ... 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... Web Pages SVG as an HTML Image Interactive Embedded SVG Using SVG in HTML5 Documents Using SVG with CSS3 42 43 47 48 56 56 60 61 70 iii CSS Versus SVG: Style Versus Graphics Summary: SVG and the... origins to 2011, when Kurt started work on a book called HTML5 Graphics with SVG and CSS3 At the time, HTML5 and CSS3 were brand new, and SVG was just starting to get decent support in web browsers