Cover image for SVG Essentials, 2nd Edition

Book description

SVG Essentials takes you through the ins and outs of Scalable Vector Graphics, beginning with basics needed to create simple line drawings and then moving through more complicated features like filters, transformations, gradients and patterns. The second edition is updated throughout, with expanded coverage of animation, interactive graphics, and scripting SVG.

Table of Contents

  1. Dedication
  2. 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. Request for Comments
    8. Acknowledgments
  3. 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
  4. 2. Using SVG in Web Pages
    1. Referring to an SVG Document in HTML
    2. Referring to an SVG Document in XHTML
    3. Placing SVG Directly With XHTML Documents
  5. 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
  6. 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
  7. 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. Document Structure—Grouping and Referencing Objects
      1. The g Element
      2. The use Element
      3. The defs Element
      4. The symbol Element
      5. The image Element
  8. 6. Transforming the Coordinate System
    1. The
    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
  9. 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
  10. 8. Patterns and Gradients
    1. Patterns
      1. patternUnits
      2. patternContentUnits
      3. Nested Patterns
    2. Gradients
      1. linearGradient
        1. The stop element
        2. Establishing a transition line for a linear gradient
        3. The spreadMethod attribute
      2. radialGradient
        1. Establishing transition limits for a radial gradient
        2. The spreadMethod attribute for radial gradients
      3. Gradient Reference Summary
    3. Transforming Patterns and Gradients
  11. 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
  12. 10. Clipping and Masking
    1. Clipping to a Path
    2. Masking
    3. Case Study—Masking a Graphic
  13. 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
  14. 12. Animating SVG
    1. Animation Basics
    2. How Time Is Measured
    3. Repeated Action
    4. The set Element
    5. Animating Color, Polygons, and Paths
    6. Animating with values
    7. The animateTransform Element
    8. The animateMotion Element
    9. Specifying Key Times and Points
    10. Animating SVG with CSS
      1. Animation Properties
      2. Setting Animation Key Frames
      3. Animating Movement with CSS
  15. About the Authors
  16. Copyright