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. Interactive examples online make it easy for you to experiment with SVG features in your web browser. Geared toward experienced designers, this book also includes appendices that explain basic concepts such as XML markup and CSS styling, so even if you have no web design experience, you can start learning SVG.
Create and style graphics to match your web design in a way that looks great when printed or displayed on high-resolution screens
Make your charts and decorative headings accessible to search engines and assistive technologies
Add artistic effects to your graphics, text, and photographs using SVG masks, filters, and transformations
Create SVG from existing vector data or XML data, using programming languages and XSLT
Chapter 1Getting Started
Creating an SVG Graphic
Chapter 2Using SVG in Web Pages
SVG as an Image
SVG as an Application
SVG Markup in a Mixed Document
Using Default User Coordinates
Specifying User Coordinates for a Viewport
Preserving Aspect Ratio
Nested Systems of Coordinates
Chapter 4Basic Shapes
Circles and Ellipses
The <polygon> Element
The <polyline> Element
Line Caps and Joins
Basic Shapes Reference Summary
Chapter 5Document Structure
Structure and Presentation
Using Styles with SVG
Grouping and Referencing Objects
Chapter 6Transforming 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
moveto, lineto, and closepath
Relative moveto and lineto
Converting from Other Arc Formats
Path Reference Summary
Paths and Filling
The <marker> element
Chapter 8Patterns and Gradients
Transforming Patterns and Gradients
Simple Attributes and Properties of the <text> Element
The animal on the cover of SVG Essentials is a great argus pheasant (Argusianus argus). This pheasant can be found in Malaysia, Thailand, Sumatra, and Borneo, where it lives in tropical rainforests. The males have blue faces, black crowns, and short crests; their underparts are mottled brown. The iridescent spots on their wings and tail feathers aid in attracting females. Female argus pheasants are smaller than males and lack their ornate plumage.
The great argus pheasant’s wings can continue to grow into the bird’s sixth year. Its tail feathers are the longest of all birds, measuring up to 5.7 feet. Some cultures use these feathers in their headdresses.
Many of the animals on O'Reilly covers are endangered; all of them are important to the world. To learn more about how you can help, go to animals.oreilly.com.
The cover image is a 19th-century engraving from the Dover Pictorial Archive. The cover fonts are URW Typewriter and Guardian Sans. The text font is Adobe Minion Pro; the heading font is Adobe Myriad Condensed; and the code font is Dalton Maag's Ubuntu Mono.