Using SVG with CSS3 and HTML5

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
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

II. Drawing with Markup
5. Building Blocks
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

6. Following Your Own Path
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
Building the Arcs
Future Focus: New Directions in Path Commands
Summary: Custom Shapes

7. The Art of the Word
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 <tspan>
Adjusting the Typewriter
Future Focus: Automatically Positioned Multiline SVG Text
Full-Control Characters
Twists and Turns: The <textPath> Element
Sliding Text Along a Path with startOffset
Future Focus: More Flexible Text Paths
Measuring the Message
Summary: Graphical Text Layout and Fonts

III. Putting Graphics in Their Place
8. Scaling Up
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

9. A New Point of View
Alternate Takes, with the <view> 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

10. Seeing Double
Reduce, Reuse, Recycle
Future Focus: The <use> 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

11. Transformative Changes
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

IV. Artistic Touches
12. Filling Up to Full
Coloring Between the Lines
The Rainbow Connection
Future Focus: Controlling Colors, Consistently
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

13. Drawing the Lines
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
CSS Versus SVG: Dashed Borders Versus Dashed Strokes
More Pleasing Dash Patterns, Made with Math
Future Focus: Greater Control of Dash Position
Starting Mid-Stride
Painting Lines
Future Focus: Painting in a Stroke Bounding Box
Summary: Stroke Effects

14. Marking the Way
Emphasizing Points
Scaling to Strokes
Orienting Arrows
Future Focus: Automatically Coordinating Markers with Their Shapes
Defining Dimensions
Future Focus: Expanded Marker Position Options
Summary: Line Markers

15. Less Is More
Fading Away with the opacity Property
The Clean-Cut Clip
Future Focus: Clipping Paths Everywhere
Creating a Custom Clipping Path
Intersecting Shapes
Clipping a clipPath
Stretch-to-Fit Clipping Effects
Shorthand Shapes
CSS Versus SVG: clip Versus clip-path
Hiding Behind Masks
Future Focus: More Masks for More Content
Who Was That Masked Graphic?
Making a Stencil
Future Focus: Easier Image Masks
Summary: Clipping and Masking

16. Playing with Pixels
The Filter Framework
A Basic Blur
CSS Versus SVG: Blurred Elements Versus Blurred Shadows
Fast Filters from CSS Alone
Future Focus: Filtering Images Within CSS
Mixing Multiple Filter Operations
The Chain of Commands
Mixing and Merging
Building a Better Blur
Morphing Shapes into Strokes
Drawing Out of Bounds
We’re Going to Need a Bigger Boom
Half-and-Half Filter Effects
Blending with the Backdrop
Blending Basics
Premade Mixes
Isolating the Blend Effect
Future Focus: Filtering the Backdrop
Summary: Filters and Blend Modes

V. SVG as an Application
17. Beyond the Visible
Titles and Tips
Future Focus: Multilingual Titles
Linking Labels
Roles and Relationships
Future Focus: Roles for Graphical Documents
1,000 Words Are Worth a Picture
Machine-Readable Metadata
Summary: Metadata for Accessibility and Added Functionality

18. Drawing on Demand
Linking It All Together
Interactive Style Switches
A Better Image Map
Getting the Point(er) Across
Targeting the Interaction
The Big Event
Counting Clicks
Bubbling Out of Shadows
Measuring Mouse Positions
Capturing the Keyboard with JavaScript-Enhanced Links
Controlling the Keyboard with tabindex and focus()
Summary: Interactive SVG

19. Transitioning in Time
Scalable Vector Animations
Smoothly Switching Styles
CSS Transitions
CSS Keyframe Animations
Benefits and Limits of Animating SVG with CSS
Future Focus: Additive CSS Declarations
Animations as Document Elements
Animating Attributes, Declaratively
Complex Animations
CSS Versus SVG: Motion Paths in CSS
Benefits and Limits of SVG/SMIL Animation Elements
Scripting Every Frame
Future Focus: Declarative Scripted Animations
Triggering Regular Updates
Calculating the Current Value
Summary: Animation

20. Good Manners
Planning Your Project
Does Your Project Need SVG at All?
Identify Your Browser Support Requirements
Decide How SVG Will Integrate in Your Website
Design for All Users
Working with Graphical Editors
Define Your Artboard or Drawing Size
Structure Your Graphic
Name Things
Set Up Color Preferences for Web Use
Simplify Paths
Test Text Fallbacks, or Convert to Paths
Consider the Backdrop
“Unset” Styles
Learn the Limits of Your Tool’s SVG Output
Learn the Limits of SVG, Compared to Your Tool
Coordinating Code
Structuring Styles
Sharing SVG Assets
Selecting a JavaScript Library
Test, Test, Test!
Final Thoughts

Index