SVG Essentials, 2nd Edition

Table of Contents

1. SVG Essentials
2. Dedication
3. Preface
   1. Who Should Read This Book?
   2. Who Should Not Read This Book?
   3. If You’re Still Reading This…
   4. About the Examples
   5. Organization of This Book
   6. Conventions Used in This Book
   7. Safari® Books Online
   8. How to Contact Us
   9. Acknowledgments for the First Edition
   10. Acknowledgments for the Second Edition
4. 1. Getting Started
   1. Graphics Systems
      1. Raster Graphics
      2. Vector Graphics
      3. Uses of Raster Graphics
      4. Uses of Vector Graphics
   2. Scalability
   3. SVG’s Role
   4. Creating an SVG Graphic
      1. Document Structure
      2. Basic Shapes
      3. Specifying Styles as Attributes
      4. Grouping Graphic Objects
      5. Transforming the Coordinate System
      6. Other Basic Shapes
      7. Paths
      8. Text
5. 2. Using SVG in Web Pages
   1. SVG as an Image
      1. Including SVG in an <img> Element
      2. Including SVG in CSS
   2. SVG as an Application
   3. SVG Markup in a Mixed Document
      1. Foreign Objects in SVG
      2. Inline SVG in XHTML or HTML5
      3. SVG in Other XML Applications
6. 3. Coordinates
   1. The Viewport
   2. Using Default User Coordinates
   3. Specifying User Coordinates for a Viewport
   4. Preserving Aspect Ratio
      1. Specifying Alignment for preserveAspectRatio
      2. Using the meet Specifier
      3. Using the slice Specifier
      4. Using the none Specifier
   5. Nested Systems of Coordinates
7. 4. Basic Shapes
   1. Lines
   2. Stroke Characteristics
      1. stroke-width
      2. Stroke Color
      3. stroke-opacity
      4. stroke-dasharray Attribute
   3. Rectangles
      1. Rounded Rectangles
   4. Circles and Ellipses
   5. The <polygon> Element
      1. Filling Polygons That Have Intersecting Lines
   6. The <polyline> Element
   7. Line Caps and Joins
   8. Basic Shapes Reference Summary
      1. Shape Elements
      2. Specifying Colors
      3. Stroke and Fill Characteristics
8. 5. Document Structure
   1. Structure and Presentation
   2. Using Styles with SVG
      1. Inline Styles
      2. Internal Stylesheets
      3. External Stylesheets
      4. Presentation Attributes
   3. Grouping and Referencing Objects
      1. The <g> Element
      2. The <use> Element
      3. The <defs> Element
      4. The <symbol> Element
      5. The <image> Element
9. 6. Transforming the Coordinate System
   1. The translate Transformation
   2. The scale Transformation
   3. Sequences of Transformations
   4. Technique: Converting from Cartesian Coordinates
   5. The rotate Transformation
   6. Technique: Scaling Around a Center Point
   7. The skewX and skewY Transformations
   8. Transformation Reference Summary
   9. CSS Transformations and SVG
10. 7. Paths
    1. moveto, lineto, and closepath
    2. Relative moveto and lineto
    3. Path Shortcuts
       1. The Horizontal lineto and Vertical lineto Commands
       2. Notational Shortcuts for a Path
    4. Elliptical Arc
    5. Converting from Other Arc Formats
    6. Bézier Curves
       1. Quadratic Bézier Curves
       2. Cubic Bézier Curves
    7. Path Reference Summary
    8. Paths and Filling
    9. The <marker> element
    10. Marker Miscellanea
11. 8. Patterns and Gradients
    1. Patterns
       1. patternUnits
       2. patternContentUnits
       3. Nested Patterns
    2. Gradients
       1. The linearGradient Element
          1. The <stop> element
          2. Establishing a transition line for a linear gradient
          3. The spreadMethod attribute
       2. The radialGradient Element
          1. Establishing transition limits for a radial gradient
          2. The spreadMethod attribute for radial gradients
       3. Gradient Reference Summary
    3. Transforming Patterns and Gradients
12. 9. Text
    1. Text Terminology
    2. Simple Attributes and Properties of the <text> Element
    3. Text Alignment
    4. The <tspan> Element
    5. Setting textLength
    6. Vertical Text
    7. Internationalization and Text
       1. Unicode and Bidirectionality
       2. The <switch> Element
       3. Using a Custom Font
    8. Text on a Path
    9. Whitespace and Text
    10. Case Study: Adding Text to a Graphic
13. 10. Clipping and Masking
    1. Clipping to a Path
    2. Masking
    3. Case Study: Masking a Graphic
14. 11. Filters
    1. How Filters Work
    2. Creating a Drop Shadow
       1. Establishing the Filter’s Bounds
       2. Using <feGaussianBlur> for a Drop Shadow
       3. Storing, Chaining, and Merging Filter Results
    3. Creating a Glowing Shadow
       1. The <feColorMatrix> Element
       2. More About the <feColorMatrix> Element
    4. The <feImage> Filter
    5. The <feComponentTransfer> Filter
    6. The <feComposite> Filter
    7. The <feBlend> Filter
    8. The <feFlood> and <feTile> Filters
    9. Lighting Effects
       1. Diffuse Lighting
       2. Specular Lighting
    10. Accessing the Background
    11. The <feMorphology> Element
    12. The <feConvolveMatrix> Element
    13. The <feDisplacementMap> Element
    14. The <feTurbulence> Element
    15. Filter Reference Summary
15. 12. Animating SVG
    1. Animation Basics
    2. How Time Is Measured
    3. Synchronizing Animation
    4. Repeated Action
    5. Animating Complex Attributes
    6. Specifying Multiple Values
    7. Timing of Multistage Animations
    8. The <set> Element
    9. The <animateTransform> Element
    10. The <animateMotion> Element
    11. Specifying Key Points and Times for Motion
    12. Animating SVG with CSS
        1. Animation Properties
        2. Setting Animation Key Frames
        3. Animating Movement with CSS
16. 13. Adding Interactivity
    1. Using Links in SVG
    2. Controlling CSS Animations
    3. User-Triggered SMIL Animations
    4. Scripting SVG
       1. Events: An Overview
       2. Listening for and Responding to Events
       3. Changing Attributes of Multiple Objects
       4. Dragging Objects
       5. Interacting with an HTML Page
       6. Creating New Elements
17. 14. Using the SVG DOM
    1. Determining the Value of Element Attributes
    2. SVG Interface Methods
    3. Constructing SVG with ECMAScript/JavaScript
    4. Animation via Scripting
    5. Using JavaScript Libraries
    6. Event Handling in Snap
       1. Clicking Objects
       2. Dragging Objects
18. 15. Generating SVG
    1. Converting Custom Data to SVG
    2. Using XSLT to Convert XML Data to SVG
       1. Defining the Task
       2. How XSLT Works
       3. Developing an XSL Stylesheet
19. A. The XML You Need for SVG
    1. What Is XML?
    2. Anatomy of an XML Document
       1. Elements and Attributes
       2. Name Syntax
       3. Well-Formed
       4. Comments
       5. Entity References
       6. Character References
    3. Character Encodings
       1. Unicode Encoding Schemes
       2. Other Character Encodings
    4. Validity
       1. Document Type Definitions (DTDs)
       2. Putting It Together
    5. XML Namespaces
    6. Tools for Processing XML
       1. Selecting a Parser
       2. XSLT Processors
20. B. Introduction to Stylesheets
    1. Anatomy of a Style
    2. Inline Styles: The style Attribute
    3. Internal Stylesheets
    4. Style Selector Classes
    5. Using CSS with SVG
21. C. Programming Concepts
    1. Constants
    2. Variables
    3. Assignment and Operators
    4. Arrays
    5. Comments
    6. Conditional Statements
    7. Repeated Actions
    8. Functions
    9. Objects, Properties, and Methods
    10. What, Not How
22. D. Matrix Algebra
    1. Matrix Terminology
    2. Matrix Addition
    3. Matrix Multiplication
    4. How SVG Uses Matrix Algebra for Transformations
23. E. Creating Fonts
    1. The ttf2svg Utility
24. F. Converting Arcs to Different Formats
    1. Converting from Center and Angles to SVG
    2. Converting from SVG to Center and Angles
25. Index
26. About the Authors
27. Colophon
28. Copyright