Table of Content
Introduction
- Graphics Systems
- Scalability
- SVG's Role
- Creating an SVG Graphic
Coordinates
- The Viewport
- Using Default User Coordinates
- Specifying User Coordinates for a Viewport
- Preserving Aspect Ratio
- Nested Systems of Coordinates
Basic Shapes
- Lines
- Stroke Characteristics
- Rectangles
- Circles and Ellipses
- The polygon Element
- The polyline Element
- Basic Shapes Reference Summary
Document Structure
- Structure and Presentation
- Using Styles with SVG
- Document Structure -- Grouping and Referencing Objects
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
Paths
- moveto, lineto, and closepath
- Relative moveto and lineto
- Path Shortcuts
- Elliptical Arc
- Technique: Converting from Other Arc Formats
- Bézier Curves
- Path Reference Summary
- Paths and Filling
- The marker element
- Marker Miscellanea
Patterns and Gradients
- Patterns
- Gradients
- radialGradient
- Gradient Reference Summary
- Transforming Gradients and Patterns
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
Clipping and Masking
- 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
Animating and Scripting SVG
- Animation Basics
- How Time Is Measured
- Repeated Action
- The set Element
- The animateColor Element
- The animateTransform Element
- The animateMotion Element
- Using Links in SVG
- Scripting SVG
Generating SVG
- Using Perl to Convert Custom Data to SVG
- Using Java to Convert XML to SVG
- Using XSLT to Convert XML Data to SVG
Serving SVG Files
- Serving Web Files -- The Task at Hand
- Partitioning the Task
- Setting up the Server
Apply for Certification