SVG Programming: The Graphical Web KURT CAGLE APress Media, LLC SVG Programming: The Graphical Web Copyright © 2002 by Kurt Cagle Originally published by Apress in 2002 All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copy­ right owner and the publisher. ISBN 978-1-59059-019-5 ISBN 978-1-4302-0840-2 (eBook) DOI 10.1007/978-1-4302-0840-2 Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. Technical Reviewer: Don Demcsak Editorial Directors: Dan Appleman, Peter Blackburn, Gary Cornell, Jason Gilmore, Karen Watterson, John Zukowski Project Manager: Tracy Brown Collins Copy Editor: Kim Wirnpsett Production Editor: Grace Wong Compositor: Impressions Book and Journal Services, Inc. Indexer: Ron Strauss Cover Designer: Kurt Krames Manufacturing Manager: Tom Debolski Marketing Manager: Stephanie Rodriguez In the United States, phone 1-800-SPRINGER, email orders@springer-ny. com, or visit http:llwww.springer-ny.com. Outside the United States, fax +49 6221 345229, email orders@springer. de, or visit http:llwww.springer.de. For information on translations, please contact Apress directly at 2560 Ninth Street, Suite 219, Berkeley, CA94710. Phone 510-549-5930, fax: 510-549-5939, email [email protected], or visit http: I lwww. a press. com. The information in this book is distributed on an "as is" basis, without warranty. Although every precaution has been taken in the preparation of this work, neither the author nor Apress shalf have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. The source code for this book is available to readers at http: I lwww. apress. com in the Downloads section. To Katherine and Jennifer-may this be a part ofyour world-and to Anne, after a decade ofbuilding dreams. Contents at a Glance Michael Bierman's Foreword ................................................ .xi Don XML' s Foreword ......................................................... .xv About the Author ......................................................... .xvii About the Technical Reviewer ............................................ .xviii Acknowledgments ........................................................... .xix Introduction ............................................................. .xxi Chapter 1 Why SVG? ................................................ .. 1 Chapter 2 Getting Started:An SVG Tutorial .................... .21 Chapter 3 You Are Here: Coordinate Systems and Transformations .................................. .51 Chapter 4 Shaping the Spiral Path: Shapes and Paths ........101 Chapter 5 Painting and Drawing ............................... .. 151 Chapter 6 The Basics of Text .................................. ..205 Chapter 7 Incorporating Texture ............................... .259 Chapter 8 Animating SVG ........................................ .359 Chapter 9 Integrating SVG and HTML .......................... .. 431 Chapter 10 SVG Components ...................................... .475 Chapter 11 The Future of SVG .................................. ..545 Index ................................................................ .569 Contents Michael Bierman Is Foreword ........................................ .xi Don XML Is Foreword ................................................. .xv About the Author .................................................. .xvii About the Technical Reviewer .................................... .xviii Acknowledgments .................................................... .xix Introduction ........................................................ .xxi Chapter 1: Why SVG? .......................................... .. 1 A Short History of XML and SVG .................................... .3 SVG as a Piece of the Puzzle .................................... .. 11 Using SVG and Flash ................................................ .11 Programming and SVG ................................................ .16 Installing the Adobe SVG Viewer ................................ .. 17 Summary .............................................................. .19 Chapter 2: Getting Started: An SVG Tutoria 1 ................................ .21 Starting with a Stop .............................................. .21 Summary .............................................................. .49 Chapter 3: You Are Here: Coordinate Systems and Transformations .......................... .51 Understanding Coordinate Systems and Transformations ............................................ .52 Working with Viewports ............................................. .57 Abstracting with <g> and <use> .................................. .64 Understanding Transformations ..................................... 76 Summary ............................................................... 99 vii Contents Chapter 4: Shaping the Spiral Path: Shapes and Paths .............................. .101 Using Shape Primitives ........................................... .101 Creating Paths, Splines, and Curves ........................... .117 Using Shape References ........................................... .137 Summary ............................................................. .149 Chapter 5: Painting and Drawing ......................... .151 Working with Colors and Opacity ................................ .151 Great Gradients! .................................................. .166 Studying Strokes .................................................. .183 Summary ............................................................. .203 Chapter 6: The Basics of Text .......................... .205 Where Is My <text>? .............................................. .205 Spanning Text ...................................................... .210 Referencing Text .................................................. .213 Anchoring Text .................................................... .218 Setting Writing Modes ............................................. .228 Setting Font Properties .......................................... .232 Setting Spacing and Kerning Properties ........................ .236 Putting Text on a Path ........................................... .239 Using Text and CSS ................................................ .243 Summary ............................................................. .258 Chapter 1: Incorporating Texture ...................... .259 Getting Image Conscious .......................................... .259 Using Masking ...................................................... .273 Creating Patterns ................................................. .286 Creating a Clipping Region ...................................... .295 Adding Special Effects with Filters ............................ .304 Summary ............................................................. .357 viii Contents Chapter 8: Animating SVG ...................................359 SMIL: You're on SVG Camera ...................................... ..360 Creating Simple Event-Driven Animations ....................... .365 Introducing Event Bubbling and Cascading ...................... .370 Animating Key Presses ............................................. .376 Animating Simple Motion .......................................... .380 Creating Motions on a Path ...................................... .384 Swapping Graphics ................................................. .392 Animating Color .................................................... .400 Animating Transformations ....................................... .407 Animating Gradients ............................................... .414 Creating an Animated Stopwatch ................................. .420 Summary ............................................................. .429 Chapter 9: Integrating SVG and HTML .................... 431 Introducing Anchors and Links ................................... .432 Cursors, Foiled Again! ........................................... .439 Using SVG and the <embed> Tag .................................. .. 442 Working with wmode ................................................ .446 Understanding SVG Events and JavaScript ....................... .450 Interacting with Web Pages ...................................... .457 Controlling the Title Bar ........................................ .466 Passing Attributes into SVG from HTML .......................... .469 Summary ............................................................. .473 Chapter 10: SVG Components ............................... .475 Gauging Your Progress ............................................. .477 Scrolling On Down the Boulevard ................................ ..492 Loading External Libraries ...................................... .504 Formatting Blocks of Text ...................................... ..515 Building a Slide Show Application .............................. .525 Summary ............................................................. .543 ix Contents Chapter 11: The Future of SVG ........................... 545 SVG on the Road: SVG 1.0 Tiny, Basic, and Full .............. .547