SVG Essentials, 2E
Dedication
Preface
Who Should Read This Book?
Who Should Not Read This Book?
If You’re Still Reading This…
About the Examples
Organization of This Book
Conventions Used in This Book
Request for Comments
Acknowledgments
1. Getting Started
Graphics Systems
Scalability
SVG’s Role
Creating an SVG Graphic
2. Using SVG in Web Pages
Referring to an SVG Document in HTML
Referring to an SVG Document in XHTML
Placing SVG Directly With XHTML Documents
3. Coordinates
The Viewport
Using Default User Coordinates
Specifying User Coordinates for a Viewport
Preserving Aspect Ratio
Nested Systems of Coordinates
4. Basic Shapes
Lines
Stroke Characteristics
Rectangles
Circles and Ellipses
The polygon Element
The polyline Element
Line Caps and Joins
Basic Shapes Reference Summary
5. Document Structure
Structure and Presentation
Using Styles with SVG
Document Structure—Grouping and Referencing Objects
6. Transforming the Coordinate System
The translate Transformation
The scale Transformation
Sequences of Transformations
Technique: Converting from Cartesian Coordinates
The rotate Transformation
Technique: Scaling Around a Center Point
The skewX and skewY Transformations
Transformation Reference Summary
CSS Transformations and SVG
7. Paths
moveto, lineto, and closepath
Relative moveto and lineto
Path Shortcuts
Elliptical Arc
Converting from Other Arc Formats
Bézier Curves
Path Reference Summary
Paths and Filling
The marker element
Marker Miscellanea
8. Patterns and Gradients
Patterns
Gradients
Transforming Patterns and Gradients
9. Text
Text Terminology
Simple Attributes and Properties of the text Element
Text Alignment
The tspan element
Setting textLength
Vertical Text
Internationalization and Text
Text on a Path
Whitespace and Text
Case Study—Adding Text to a Graphic
10. Clipping and Masking
Clipping to a Path
Masking
Case Study—Masking a Graphic
11. Filters
How Filters Work
Creating a Drop Shadow
Creating a Glowing Shadow
The feImage Filter
The feComponentTransfer Filter
The feComposite Filter
The feBlend Filter
The feFlood and feTile Filters
Lighting Effects
Accessing the Background
The feMorphology Element
The feConvolveMatrix Element
The feDisplacementMap Element
The feTurbulence Element
Filter Reference Summary
12. Animating SVG
Animation Basics
How Time Is Measured
Repeated Action
The set Element
Animating Color, Polygons, and Paths
Animating with values
The animateTransform Element
The animateMotion Element
Specifying Key Times and Points
Animating SVG with CSS
About the Authors
Copyright