Using SVG with CSS3 and HTML5. Vector Graphics for Web Design

Spis treści książki

• Preface
  • A Winding Path
    • The Road Ahead
    • Before You Begin
  • About This Book
    • Conventions Used in This Book
    • Supplementary Material
    • About the Examples
  • OReilly 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
  • Its 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 Isnt 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
    • Were 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 Tools 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

pokaż cały spis treści

ukryj recenzje