Table of Contents for
Using SVG with CSS3 and HTML5

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Using SVG with CSS3 and HTML5 by Amelia Bellamy-Royds Published by O'Reilly Media, Inc., 2017
  1. nav
  2. Cover
  3. Using SVG with CSS3 and HTML5
  4. Using SVG with CSS3 and HTML5
  5. Preface
  6. I. SVG on the Web
  7. 1. Graphics from Vectors
  8. 2. The Big Picture
  9. 3. A Sense of Style
  10. 4. Tools of the Trade
  11. II. Drawing with Markup
  12. 5. Building Blocks
  13. 6. Following Your Own Path
  14. 7. The Art of the Word
  15. III. Putting Graphics in Their Place
  16. 8. Scaling Up
  17. 9. A New Point of View
  18. 10. Seeing Double
  19. 11. Transformative Changes
  20. IV. Artistic Touches
  21. 12. Filling Up to Full
  22. 13. Drawing the Lines
  23. 14. Marking the Way
  24. 15. Less Is More
  25. 16. Playing with Pixels
  26. V. SVG as an Application
  27. 17. Beyond the Visible
  28. 18. Drawing on Demand
  29. 19. Transitioning in Time
  30. 20. Good Manners
  31. Index
  32. About the Authors
  33. Colophon
  1. Preface
    1. A Winding Path
      1. The Road Ahead
      2. Before You Begin
    2. About This Book
      1. Conventions Used in This Book
        1. A Brief Aside
      2. Supplementary Material
      3. About the Examples
    3. O’Reilly Safari
    4. How to Contact Us
    5. Acknowledgments
  2. I. SVG on the Web
  3. 1. Graphics from Vectors
    1. Defining an SVG in Code
    2. Simple Shapes
    3. Standalone SVG
    4. Style and Structure
    5. Repetition Without Redundancy
    6. Graduating to Gradients
    7. Activating Animation
    8. Talking with Text
    9. The SVG Advantage
    10. Summary: An Overview of SVG
  4. 2. The Big Picture
    1. SVG and the Web Platform
    2. The Changing Web
      1. Future Focus: A Crystal Ball
    3. JavaScript in SVG
    4. Embedding SVG in Web Pages
      1. SVG as an HTML Image
      2. Interactive Embedded SVG
    5. Using SVG in HTML5 Documents
    6. Using SVG with CSS3
      1. CSS Versus SVG: Style Versus Graphics
    7. Summary: SVG and the Web
  5. 3. A Sense of Style
    1. CSS in SVG
      1. Style Declarations
      2. Overriding Styles
      3. Conditional Styles
    2. SVG in CSS
      1. Using SVG Images Within CSS
      2. Making Every File Count
      3. Using SVG Effects Within CSS
    3. CSS Versus SVG
      1. Styling Documents Versus Drawing Graphics
      2. CSS as a Vector Graphics Language
      3. Which to Choose?
    4. Summary: Working with CSS
  6. 4. Tools of the Trade
    1. Ready-to-Use SVG
    2. Click, Drag, Draw: Graphical SVG Editors
      1. Adobe Illustrator
      2. Adobe Photoshop
      3. Sketch
      4. Inkscape and Sodipodi
      5. Draw SVG
      6. Boxy SVG
    3. Bringing SVG Alive: SVG in the Web Browser
      1. Gecko for Firefox
      2. WebKit for Safari and iOS Devices
      3. Blink for Newer Versions of Chrome, Opera, and Android Devices
      4. Presto for Older Opera Versions and Opera Mini
      5. Trident for Internet Explorer and Other Windows Programs
      6. EdgeHTML for Microsoft Edge and Windows 10+ Programs
      7. Servo
      8. Other Dynamic SVG Viewers
    4. Markup Management: Code Editors
      1. Atom Plus SVG Preview
      2. Brackets Plus SVG Preview
      3. Oxygen XML SVG Editor
      4. Online Live Code Sites
    5. Ready-to-Use Code: JavaScript Libraries
      1. Raphaël and Snap.svg
      2. D3.js
      3. GSAP
      4. SVG.js
    6. Processing and Packaging
    7. Summary: Software and Sources to Make SVG Easier
  7. II. Drawing with Markup
  8. 5. Building Blocks
    1. Drawing Lines, from Here to There
      1. Future Focus: More Measurements and Calculations
    2. It’s Hip to Be Square (or Rectangular)
      1. Future Focus: Geometry as Style
    3. Cutting Corners
      1. CSS Versus SVG: Curved Corners
    4. Circular Logic
      1. CSS Versus SVG: Shapes in Stylesheets
    5. Summary: Basic Shapes
  9. 6. Following Your Own Path
    1. Giving Directions: The d Attribute
      1. Future Focus: Piecewise Paths
    2. Straight Shooters: The move-to and line-to Commands
    3. Finishing Touches: The close-path Command
    4. Hole-y Orders and Fill Rules
    5. Following the Grid: Horizontal and Vertical Lines
    6. Crunching Characters
    7. Short and Sweet Shapes: Polygons and Polylines
      1. CSS Versus SVG: Polygon Points
    8. Curve Balls: The Quadratic Bézier Command
      1. Future Focus: Beyond Simple Coordinates
    9. Smooth Operators: The Smooth Quadratic Command
      1. CSS Versus SVG: Paths Beyond SVG
    10. Wave Motion: The Cubic Bézier Commands
      1. Future Focus: Closing Curves
    11. Building the Arcs
      1. Future Focus: New Directions in Path Commands
    12. Summary: Custom Shapes
  10. 7. The Art of the Word
    1. When Text Isn’t Text
    2. Working with Web Fonts
    3. Typewriter Text
      1. Future Focus: Positioning Text with CSS
    4. Colorful Language
      1. CSS Versus SVG: Filling and Stroking Non-SVG Text
    5. Responsive Text Scaling
    6. Anchors and Alignment
    7. Switching Styles with <tspan>
    8. Adjusting the Typewriter
      1. Future Focus: Automatically Positioned Multiline SVG Text
    9. Full-Control Characters
    10. Twists and Turns: The <textPath> Element
    11. Sliding Text Along a Path with startOffset
      1. Future Focus: More Flexible Text Paths
    12. Measuring the Message
    13. Summary: Graphical Text Layout and Fonts
  11. III. Putting Graphics in Their Place
  12. 8. Scaling Up
    1. Coordinated Efforts
    2. Framing the View, with viewBox
      1. Future Focus: Selective Scaling
    3. Calibrating the Scales
    4. Scaling to Fit
    5. A Poor Fit (and How preserveAspectRatio Fixes It)
      1. CSS Versus SVG: Scaling to Fit
    6. Just-Right Sizing
      1. Autosizing Embedded SVG
      2. Resizing Inline SVG
      3. Preserving Aspect Ratios, with CSS Padding
        1. Future Focus: Aspect-Ratio Control in CSS
    7. Summary: Defining Coordinate Systems
  13. 9. A New Point of View
    1. Alternate Takes, with the <view> Element
    2. Rescaling on the Fly, with SVG View Fragments
      1. Future Focus: Cropping Any Image in a URL
    3. Interactive Views
    4. Packaged Deals
    5. Flat Pack Stacks
    6. Summary: Cropping Embedded SVG Files
  14. 10. Seeing Double
    1. Reduce, Reuse, Recycle
      1. Future Focus: The <use> Element Shadow DOM
    2. Symbolic Usage
      1. Future Focus: Pinpointing a Symbol
    3. File Management
      1. Future Focus: Enabling Cross-Origin SVG Assets
    4. Picture Perfect: Raster Images in SVG
    5. Smooth Scaling Photographs
      1. Future Focus: Easier Embedded Content
    6. Summary: Reusing Content
  15. 11. Transformative Changes
    1. A Simpler Scale
    2. Unbalanced Scales
    3. Reflecting on Transformations
      1. Future Focus: Transforming the transform Attribute
    4. New Origins
      1. Future Focus: Transformations with Units
    5. Turning Things Around
      1. Future Focus: Rotation Units and Adaptable Origins
    6. Skewed Perspective
    7. Enter the Matrix
    8. Summary: Coordinate System Transformations
  16. IV. Artistic Touches
  17. 12. Filling Up to Full
    1. Coloring Between the Lines
      1. The Rainbow Connection
        1. Future Focus: Controlling Colors, Consistently
      2. Coordinating Colors
      3. Variables for Every Property
      4. Water Colors
        1. Future Focus: Percentage Alpha
    2. Filling with More Than Solid Colors
      1. Future Focus: Serving Up New Paint
      2. Fallbacks for Fills
        1. Future Focus: New Fill Effects
      3. Picturing Paint
      4. Scaling Paint Servers
      5. The Boundaries of the Box
    3. Great Gradients
      1. Shared Structures
      2. Aligning Linear Gradients
      3. Transforming Gradients
      4. Radiating Radial Gradients
      5. Switching Focus
        1. CSS Versus SVG: CSS Gradients
    4. Patterns of Possibility
      1. All the Units to Use
      2. Dividing the Box
      3. Picture Perfect
      4. Patterned Prints
    5. Summary: The fill Property, Gradients, and Patterns
  18. 13. Drawing the Lines
    1. Different Strokes
      1. A Simple Stroke to Start
        1. Future Focus: Layered Lines
      2. Making the Connection with Line Joins
        1. Future Focus: New Line-Join Options
      3. Capping It Off with Line Caps
    2. Adjusting Stroke Appearance
      1. Anti-Anti-Aliasing for Crisp Lines
      2. Swapping Stroke and Fill
        1. Future Focus: Controlling Stroke Position
      3. Scaling Shapes Without Scaling Strokes
    3. A Dashing Design
      1. A Wide Array of Dashes (and Gaps Between Them)
        1. Future Focus: Better References for Dash Lengths
      2. Turning Dashes into Dots
        1. CSS Versus SVG: Dashed Borders Versus Dashed Strokes
      3. More Pleasing Dash Patterns, Made with Math
        1. Future Focus: Greater Control of Dash Position
      4. Starting Mid-Stride
    4. Painting Lines
      1. Future Focus: Painting in a Stroke Bounding Box
    5. Summary: Stroke Effects
  19. 14. Marking the Way
    1. Emphasizing Points
    2. Scaling to Strokes
    3. Orienting Arrows
      1. Future Focus: Automatically Coordinating Markers with Their Shapes
    4. Defining Dimensions
      1. Future Focus: Expanded Marker Position Options
    5. Summary: Line Markers
  20. 15. Less Is More
    1. Fading Away with the opacity Property
    2. The Clean-Cut Clip
      1. Future Focus: Clipping Paths Everywhere
      2. Creating a Custom Clipping Path
      3. Intersecting Shapes
      4. Clipping a clipPath
      5. Stretch-to-Fit Clipping Effects
      6. Shorthand Shapes
        1. CSS Versus SVG: clip Versus clip-path
    3. Hiding Behind Masks
      1. Future Focus: More Masks for More Content
      2. Who Was That Masked Graphic?
      3. Making a Stencil
        1. Future Focus: Easier Image Masks
    4. Summary: Clipping and Masking
  21. 16. Playing with Pixels
    1. The Filter Framework
      1. A Basic Blur
        1. CSS Versus SVG: Blurred Elements Versus Blurred Shadows
      2. Fast Filters from CSS Alone
        1. Future Focus: Filtering Images Within CSS
    2. Mixing Multiple Filter Operations
      1. The Chain of Commands
      2. Mixing and Merging
      3. Building a Better Blur
      4. Morphing Shapes into Strokes
    3. Drawing Out of Bounds
      1. We’re Going to Need a Bigger Boom
      2. Half-and-Half Filter Effects
    4. Blending with the Backdrop
      1. Blending Basics
      2. Premade Mixes
      3. Isolating the Blend Effect
        1. Future Focus: Filtering the Backdrop
    5. Summary: Filters and Blend Modes
  22. V. SVG as an Application
  23. 17. Beyond the Visible
    1. Titles and Tips
      1. Future Focus: Multilingual Titles
    2. Linking Labels
    3. Roles and Relationships
      1. Future Focus: Roles for Graphical Documents
    4. 1,000 Words Are Worth a Picture
    5. Machine-Readable Metadata
    6. Summary: Metadata for Accessibility and Added Functionality
  24. 18. Drawing on Demand
    1. Linking It All Together
    2. Interactive Style Switches
    3. A Better Image Map
    4. Getting the Point(er) Across
    5. Targeting the Interaction
    6. The Big Event
      1. Counting Clicks
      2. Bubbling Out of Shadows
      3. Measuring Mouse Positions
      4. Capturing the Keyboard with JavaScript-Enhanced Links
      5. Controlling the Keyboard with tabindex and focus()
    7. Summary: Interactive SVG
  25. 19. Transitioning in Time
    1. Scalable Vector Animations
    2. Smoothly Switching Styles
      1. CSS Transitions
      2. CSS Keyframe Animations
      3. Benefits and Limits of Animating SVG with CSS
        1. Future Focus: Additive CSS Declarations
    3. Animations as Document Elements
      1. Animating Attributes, Declaratively
      2. Complex Animations
        1. CSS Versus SVG: Motion Paths in CSS
      3. Benefits and Limits of SVG/SMIL Animation Elements
    4. Scripting Every Frame
      1. Future Focus: Declarative Scripted Animations
      2. Triggering Regular Updates
      3. Calculating the Current Value
    5. Summary: Animation
  26. 20. Good Manners
    1. Planning Your Project
      1. Does Your Project Need SVG at All?
      2. Identify Your Browser Support Requirements
      3. Decide How SVG Will Integrate in Your Website
      4. Design for All Users
    2. Working with Graphical Editors
      1. Define Your Artboard or Drawing Size
      2. Structure Your Graphic
      3. Name Things
      4. Set Up Color Preferences for Web Use
      5. Simplify Paths
      6. Test Text Fallbacks, or Convert to Paths
      7. Consider the Backdrop
      8. “Unset” Styles
      9. Learn the Limits of Your Tool’s SVG Output
      10. Learn the Limits of SVG, Compared to Your Tool
    3. Coordinating Code
      1. Structuring Styles
      2. Sharing SVG Assets
      3. Selecting a JavaScript Library
    4. Test, Test, Test!
    5. Final Thoughts
  27. Index
Back to top