Using SVG with CSS3 and HTML5

Using SVG with CSS3 and HTML5

by Amelia Bellamy-Royds, Kurt Cagle, Dudley Storey
Released October 2017
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781491921975

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon Buy on ebooks.com
Start your free trial

Book description

Using Scalable Vector Graphics (SVG) for illustrations only scratches the surface of this format’s potential on the web. With this practical guide, you’ll learn how to use SVG not only for illustrations but also as graphical documents that you can integrate into complex HTML5 web pages, and style with custom CSS. Web developers will discover ways to adapt designs by adding data based graphics, dynamic styles, interaction, or animation.

Divided into five parts, this book includes:

  • SVG on the web: Understand how SVG works with HTML, CSS, and JavaScript to define graphics
  • Drawing with markup: Learn the vector language of x and y coordinates that let SVG create basic and custom shapes
  • Putting graphics in their place: Use the coordinate system to draw SVG shapes and text at different scales and positions
  • Artistic touches: Explore how color is used, how strokes are created and manipulated, and how graphical effects like filters, clipping, and masking are applied
  • SVG as an application: Make your graphic more accessible to humans and computers, and learn how to make it interactive or animated

Publisher resources

View/Submit Errata

Table of contents

  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

Product information

  • Title: Using SVG with CSS3 and HTML5
  • Author(s): Amelia Bellamy-Royds, Kurt Cagle, Dudley Storey
  • Release date: October 2017
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781491921975