Using SVG With CSS3 and HTML5 by Cagle, Kurt -- Read -- Imperial Library of Trantor

Index

Preface

A Winding Path

The Road Ahead Before You Begin

About This Book

Conventions Used in This Book Supplementary Material About the Examples

O’Reilly Safari How to Contact Us Acknowledgments

I. SVG on the Web 1. 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

2. The Big Picture

SVG and the Web Platform The Changing Web 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 Summary: SVG and the Web

3. A Sense of Style

CSS in SVG

Style Declarations

Presentation attributes Inline styles A <style> block External stylesheets

Overriding Styles Conditional Styles

Parser fallbacks @supports tests Media queries

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

4. Tools of the Trade

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 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 It’s Hip to Be Square (or Rectangular) Cutting Corners Circular Logic Summary: Basic Shapes

6. Following Your Own Path

Giving Directions: The d Attribute 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 Curve Balls: The Quadratic Bézier Command Smooth Operators: The Smooth Quadratic Command Wave Motion: The Cubic Bézier Commands Building the Arcs Summary: Custom Shapes

7. The Art of the Word

When Text Isn’t Text Working with Web Fonts Typewriter Text Colorful Language Responsive Text Scaling Anchors and Alignment Switching Styles with <tspan> Adjusting the Typewriter Full-Control Characters Twists and Turns: The <textPath> Element Sliding Text Along a Path with startOffset 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 Calibrating the Scales Scaling to Fit A Poor Fit (and How preserveAspectRatio Fixes It) Just-Right Sizing

Autosizing Embedded SVG Resizing Inline SVG Preserving Aspect Ratios, with CSS Padding

Summary: Defining Coordinate Systems

9. A New Point of View

Alternate Takes, with the <view> Element Rescaling on the Fly, with SVG View Fragments Interactive Views Packaged Deals Flat Pack Stacks Summary: Cropping Embedded SVG Files

10. Seeing Double

Reduce, Reuse, Recycle Symbolic Usage File Management Picture Perfect: Raster Images in SVG Smooth Scaling Photographs Summary: Reusing Content

11. Transformative Changes

A Simpler Scale Unbalanced Scales Reflecting on Transformations New Origins Turning Things Around Skewed Perspective Enter the Matrix Summary: Coordinate System Transformations

IV. Artistic Touches 12. Filling Up to Full

Coloring Between the Lines

The Rainbow Connection Coordinating Colors Variables for Every Property Water Colors

Filling with More Than Solid Colors

Fallbacks for Fills Picturing Paint Scaling Paint Servers The Boundaries of the Box

Great Gradients

Shared Structures Aligning Linear Gradients Transforming Gradients Radiating Radial Gradients Switching Focus

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 Making the Connection with Line Joins Capping It Off with Line Caps

Adjusting Stroke Appearance

Anti-Anti-Aliasing for Crisp Lines Swapping Stroke and Fill Scaling Shapes Without Scaling Strokes

A Dashing Design

A Wide Array of Dashes (and Gaps Between Them) Turning Dashes into Dots More Pleasing Dash Patterns, Made with Math Starting Mid-Stride

Painting Lines Summary: Stroke Effects

14. Marking the Way

Emphasizing Points Scaling to Strokes Orienting Arrows Defining Dimensions Summary: Line Markers

15. Less Is More

Fading Away with the opacity Property The Clean-Cut Clip

Creating a Custom Clipping Path Intersecting Shapes Clipping a clipPath Stretch-to-Fit Clipping Effects Shorthand Shapes

Hiding Behind Masks

Who Was That Masked Graphic? Making a Stencil

Summary: Clipping and Masking

16. Playing with Pixels

The Filter Framework

A Basic Blur Fast Filters from CSS Alone

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

Summary: Filters and Blend Modes

V. SVG as an Application 17. Beyond the Visible

Titles and Tips Linking Labels Roles and Relationships 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

Animations as Document Elements

Animating Attributes, Declaratively Complex Animations Benefits and Limits of SVG/SMIL Animation Elements

Scripting Every Frame

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

← Prev
Back
Next →

← Prev
Back
Next →