SVG Essentials, 2nd Edition

SVG Essentials, 2nd Edition

by J. David Eisenberg, Amelia Bellamy-Royds
Released October 2014
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449374358

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

Learn the essentials of Scalable Vector Graphics, the mark-up language used by most vector drawing programs and interactive web graphics tools. SVG Essentials takes you through SVG’s capabilities, beginning with simple line drawings and moving through complicated features such as filters, transformations, gradients, and patterns. This thoroughly updated edition includes expanded coverage of animation, interactive graphics, and scripting SVG.

Publisher resources

View/Submit Errata

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

Product information

  • Title: SVG Essentials, 2nd Edition
  • Author(s): J. David Eisenberg, Amelia Bellamy-Royds
  • Release date: October 2014
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449374358