Using SVG with CSS3 and HTML5
Vector Graphics for Web Design
Published on 17. October 2017
844 pages
978-1-4919-2194-4 (ISBN)
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
More details
Other editions
Additional editions
Amelia Bellamy-Royds | Kurt Cagle | Dudley Storey
Using SVG with CSS3 and HTML5
Vector Graphics for Web Design
Book
11/2017
O'Reilly
€65.00
Shipment within 10-20 days
Content
- Cover
- Copyright
- Table of Contents
- Preface
- A Winding Path
- The Road Ahead
- Before You Begin
- About This Book
- Conventions Used in This Book
- A Brief Aside
- Supplementary Material
- About the Examples
- O'Reilly Safari
- How to Contact Us
- Acknowledgments
- Part I. SVG on the Web
- Chapter 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
- Chapter 2. The Big Picture
- SVG and the Web Platform
- The Changing Web
- 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
- Style Versus Graphics
- Summary: SVG and the Web
- Chapter 3. A Sense of Style
- 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
- Chapter 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
- Part II. Drawing with Markup
- Chapter 5. Building Blocks
- Drawing Lines, from Here to There
- More Measurements and Calculations
- It's Hip to Be Square (or Rectangular)
- Geometry as Style
- Cutting Corners
- Curved Corners
- Circular Logic
- Shapes in Stylesheets
- Summary: Basic Shapes
- Chapter 6. Following Your Own Path
- Giving Directions: The d Attribute
- 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
- Polygon Points
- Curve Balls: The Quadratic Bézier Command
- Beyond Simple Coordinates
- Smooth Operators: The Smooth Quadratic Command
- Paths Beyond SVG
- Wave Motion: The Cubic Bézier Commands
- Closing Curves
- Building the Arcs
- New Directions in Path Commands
- Summary: Custom Shapes
- Chapter 7. The Art of the Word
- When Text Isn't Text
- Working with Web Fonts
- Typewriter Text
- Positioning Text with CSS
- Colorful Language
- Filling and Stroking Non-SVG Text
- Responsive Text Scaling
- Anchors and Alignment
- Switching Styles with &tspan&
- Adjusting the Typewriter
- Automatically Positioned Multiline SVG Text
- Full-Control Characters
- Twists and Turns: The &textPath& Element
- Sliding Text Along a Path with startOffset
- More Flexible Text Paths
- Measuring the Message
- Summary: Graphical Text Layout and Fonts
- Part III. Putting Graphics in Their Place
- Chapter 8. Scaling Up
- Coordinated Efforts
- Framing the View, with viewBox
- Selective Scaling
- Calibrating the Scales
- Scaling to Fit
- A Poor Fit (and How preserveAspectRatio Fixes It)
- Scaling to Fit
- Just-Right Sizing
- Autosizing Embedded SVG
- Resizing Inline SVG
- Preserving Aspect Ratios, with CSS Padding
- Aspect-Ratio Control in CSS
- Summary: Defining Coordinate Systems
- Chapter 9. A New Point of View
- Alternate Takes, with the &view& Element
- Rescaling on the Fly, with SVG View Fragments
- Cropping Any Image in a URL
- Interactive Views
- Packaged Deals
- Flat Pack Stacks
- Summary: Cropping Embedded SVG Files
- Chapter 10. Seeing Double
- Reduce, Reuse, Recycle
- The &use& Element Shadow DOM
- Symbolic Usage
- Pinpointing a Symbol
- File Management
- Enabling Cross-Origin SVG Assets
- Picture Perfect: Raster Images in SVG
- Smooth Scaling Photographs
- Easier Embedded Content
- Summary: Reusing Content
- Chapter 11. Transformative Changes
- A Simpler Scale
- Unbalanced Scales
- Reflecting on Transformations
- Transforming the transform Attribute
- New Origins
- Transformations with Units
- Turning Things Around
- Rotation Units and Adaptable Origins
- Skewed Perspective
- Enter the Matrix
- Summary: Coordinate System Transformations
- Part IV. Artistic Touches
- Chapter 12. Filling Up to Full
- Coloring Between the Lines
- The Rainbow Connection
- Controlling Colors, Consistently
- Coordinating Colors
- Variables for Every Property
- Water Colors
- Percentage Alpha
- Filling with More Than Solid Colors
- Serving Up New Paint
- Fallbacks for Fills
- 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 Gradients
- Patterns of Possibility
- All the Units to Use
- Dividing the Box
- Picture Perfect
- Patterned Prints
- Summary: The fill Property, Gradients, and Patterns
- Chapter 13. Drawing the Lines
- Different Strokes
- A Simple Stroke to Start
- Layered Lines
- Making the Connection with Line Joins
- New Line-Join Options
- Capping It Off with Line Caps
- Adjusting Stroke Appearance
- Anti-Anti-Aliasing for Crisp Lines
- Swapping Stroke and Fill
- Controlling Stroke Position
- Scaling Shapes Without Scaling Strokes
- A Dashing Design
- A Wide Array of Dashes (and Gaps Between Them)
- Better References for Dash Lengths
- Turning Dashes into Dots
- Dashed Borders Versus Dashed Strokes
- More Pleasing Dash Patterns, Made with Math
- Greater Control of Dash Position
- Starting Mid-Stride
- Painting Lines
- Painting in a Stroke Bounding Box
- Summary: Stroke Effects
- Chapter 14. Marking the Way
- Emphasizing Points
- Scaling to Strokes
- Orienting Arrows
- Automatically Coordinating Markers with Their Shapes
- Defining Dimensions
- Expanded Marker Position Options
- Summary: Line Markers
- Chapter 15. Less Is More
- Fading Away with the opacity Property
- The Clean-Cut Clip
- Clipping Paths Everywhere
- Creating a Custom Clipping Path
- Intersecting Shapes
- Clipping a clipPath
- Stretch-to-Fit Clipping Effects
- Shorthand Shapes
- clip Versus clip-path
- Hiding Behind Masks
- More Masks for More Content
- Who Was That Masked Graphic?
- Making a Stencil
- Easier Image Masks
- Summary: Clipping and Masking
- Chapter 16. Playing with Pixels
- The Filter Framework
- A Basic Blur
- Blurred Elements Versus Blurred Shadows
- Fast Filters from CSS Alone
- 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
- Filtering the Backdrop
- Summary: Filters and Blend Modes
- Part V. SVG as an Application
- Chapter 17. Beyond the Visible
- Titles and Tips
- Multilingual Titles
- Linking Labels
- Roles and Relationships
- Roles for Graphical Documents
- 1,000 Words Are Worth a Picture
- Machine-Readable Metadata
- Summary: Metadata for Accessibility and Added Functionality
- Chapter 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
- Chapter 19. Transitioning in Time
- Scalable Vector Animations
- Smoothly Switching Styles
- CSS Transitions
- CSS Keyframe Animations
- Benefits and Limits of Animating SVG with CSS
- Additive CSS Declarations
- Animations as Document Elements
- Animating Attributes, Declaratively
- Complex Animations
- Motion Paths in CSS
- Benefits and Limits of SVG/SMIL Animation Elements
- Scripting Every Frame
- Declarative Scripted Animations
- Triggering Regular Updates
- Calculating the Current Value
- Summary: Animation
- Chapter 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
- About the Authors
- Colophon
