SVG Essentials

SVG Essentials

by J. David Eisenberg
Released February 2002
Publisher(s): O'Reilly Media, Inc.
ISBN: 9780596002237

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
Start your free trial

Book description

Scalable Vector Graphics -- or SVG -- is the new XML-based graphics standard from the W3C that will enable Web documents to be smaller, faster and more interactive. J. David Eisenberg's insightful book takes you through the ins and outs of SVG, beginning with basics needed to create simple line drawings and then moving through more complicated features like filters, transformations, and integration with Java, Perl, and XSLT.Unlike GIFs, JPEGs or PNGs (which are bitmapped), SVG images are both resolution- and device-independent, so that they can scale up or down to fit proportionally into any size display or any Internet device -- from PDAs to large office monitors and high-resolution printers. Smaller than bitmapped files and faster to download, SVG images can be rendered with different CSS styles for each environment. They work well across a range of available bandwidths.SVG makes it possible for designers to escape the constant need to update graphics by hand or use custom code to generate bitmap images. And while SVG was created with the Web in mind, the language has a variety of other uses. SVG greatly simplifies tasks like:

  • Creating web sites whose graphics reflect the content of the page, changing automatically if the content changes
  • Generating graphs and charts from information stored in a wide variety of sources
  • Exchanging detailed drawings, from architectural plans to CAD layouts to project management diagrams
  • Creating diagrams that users can explore by zooming in and panning around
  • Generating bitmap images for use in older browsers using simple automatable templates
  • Managing graphics that support multiple languages or translations
  • Creating complex animation
By focusing sharply on the markup at the foundation of SVG, SVG Essentials gives you a solid base on which to create your own custom tools. Explanations of key technical tools -- like XML, matrix math, and scripting -- are included as appendices, along with a reference to the SVG vocabulary.Whether you're a graphic designer in search of new tools or a programmer dealing with the complex task of creating and managing graphics, SVG Essentials provides you with the means to take advantage of SVG.

Publisher resources

View/Submit Errata

Table of contents

  1. Dedication
  2. A Note Regarding Supplemental Files
  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. Request for Comments
    8. Acknowledgments
  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. 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. 3. 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. 4. 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. 5. 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. 6. 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. Technique: 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. 7. 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 Gradients and Patterns
  11. 8. 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. 9. Clipping and Masking
    1. Clipping to a Path
    2. Masking
    3. Case Study -- Masking a Graphic
  13. 10. 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. 11. Animating and Scripting SVG
    1. Animation Basics
    2. How Time Is Measured
    3. Repeated Action
    4. The set Element
    5. The animateColor Element
    6. The animateTransform Element
    7. The animateMotion Element
    8. Using Links in SVG
    9. Scripting SVG
      1. Changing Attributes of a Single Object
      2. Changing Attributes of Multiple Objects
      3. Dragging Objects
      4. Modifying Text
      5. Interacting with an HTML Page
      6. Scripting and Animation Together
      7. Animation via Scripting
  15. 12. Generating SVG
    1. Using Perl to Convert Custom Data to SVG
    2. Using Java to Convert XML to SVG
    3. Using XSLT to Convert XML Data to SVG
      1. Defining the Task
      2. How XSLT Works
      3. Developing an XSL Stylesheet
      4. Extending XSLT in Java
  16. 13. Serving SVG Files
    1. Serving Web Files -- The Task at Hand
    2. Partitioning the Task
      1. The Request Web Page
      2. The Weather Servlet
      3. The Transform Servlet
      4. The XSLT File
    3. Setting up the Server
  17. 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
  18. B. Introduction to Stylesheets
    1. Anatomy of a Style
    2. Style Selectors
    3. Internal Stylesheets
    4. Style Selector Classes
    5. Using CSS with SVG
  19. 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
  20. D. Matrix Algebra
    1. Matrix Terminology
    2. Matrix Addition
    3. Matrix Multiplication
    4. How SVG Uses Matrix Algebra for Transformations
  21. E. Creating Fonts
    1. The ttf2svg Utility
  22. F. Using SVG with Other XML Applications
    1. Referring to an SVG Document in HTML
    2. Referring to an SVG Document in XHTML
    3. Placing SVG Directly Within XHTML Documents
    4. Embedding SVG in XSL Formatting Objects
  23. Index
  24. Colophon
  25. Copyright

Product information

  • Title: SVG Essentials
  • Author(s): J. David Eisenberg
  • Release date: February 2002
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9780596002237