SVG Essentials
Total Page:16
File Type:pdf, Size:1020Kb
SVG Essentials J. David Eisenberg Publisher: O'Reilly First Edition February 2002 ISBN: 0-596-00223-8, 364 pages Scalable Vector Graphics—or SVG—is the new XML-based graphics standard Copyright Table of Contents from the W3C that will enable Web documents to be smaller, faster and more Index interactive. This insightful book takes you through the ins and outs of SVG, Full Description from the basics to more complicated features. Whether you're a graphic Reviews designer looking for new tools, or a programmer creating and managing Examples graphics, this book provides a solid foundation. Reader reviews Errata 1 TEAM FLY PRESENTS Table of Content Table of Content ............................................................................................................. 2 Dedication..................................................................................................................... .. 6 Preface........................................................................................................................ ..... 6 Who Should Read This Book?.................................................................................... 6 Who Should Not Read This Book?............................................................................. 6 If You're Still Reading This........................................................................................ 6 About the Examples.................................................................................................... 7 Request for Comments.............................................................................................. 11 Acknowledgments..................................................................................................... 12 Chapter 1. Getting Started............................................................................................. 13 1.1 Graphics Systems................................................................................................ 13 1.2 Scalability ........................................................................................................... 15 1.3 SVG's Role.......................................................................................................... 17 1.4 Creating an SVG Graphic ................................................................................... 17 Chapter 2. Coordinates.................................................................................................. 24 2.1 The Viewport ...................................................................................................... 24 2.2 Using Default User Coordinates ......................................................................... 25 2.3 Specifying User Coordinates for a Viewport...................................................... 27 2.4 Preserving Aspect Ratio...................................................................................... 28 2.5 Nested Systems of Coordinates .......................................................................... 32 Chapter 3. Basic Shapes................................................................................................ 35 3.1 Lines.................................................................................................................... 35 3.2 Stroke Characteristics ......................................................................................... 35 3.3 Rectangles........................................................................................................... 39 3.4 Circles and Ellipses............................................................................................. 41 3.5 The polygon Element.......................................................................................... 42 3.6 The polyline Element.......................................................................................... 45 3.7 Line Caps and Joins ............................................................................................ 45 3.8 Basic Shapes Reference Summary...................................................................... 46 Chapter 4. Document Structure..................................................................................... 49 4.1 Structure and Presentation .................................................................................. 49 4.2 Using Styles with SVG ....................................................................................... 49 4.3 Document Structure – Grouping and Referencing Objects ................................ 52 Chapter 5. Transforming the Coordinate System ......................................................... 60 5.1 The translate Transformation.............................................................................. 60 5.2 The scale Transformation ................................................................................... 62 5.3 Sequences of Transformations............................................................................ 65 5.4 Technique: Converting from Cartesian Coordinates .......................................... 67 5.5 The rotate Transformation .................................................................................. 69 5.6 Technique: Scaling Around a Center Point ........................................................ 71 5.7 The skewX and skewY Transformations............................................................ 72 5.8 Transformation Reference Summary.................................................................. 73 Chapter 6. Paths ............................................................................................................ 74 6.1 moveto, lineto, and closepath.............................................................................. 74 2 TEAM FLY PRESENTS 6.2 Relative moveto and lineto ................................................................................. 76 6.3 Path Shortcuts ..................................................................................................... 76 6.4 Elliptical Arc....................................................................................................... 78 6.5 Technique: Converting from Other Arc Formats................................................ 80 6.6 Bézier Curves...................................................................................................... 87 6.7 Path Reference Summary.................................................................................... 92 6.8 Paths and Filling ................................................................................................. 93 6.9 The marker element ............................................................................................ 94 6.10 Marker Miscellanea .......................................................................................... 97 Chapter 7. Patterns and Gradients................................................................................. 99 7.1 Patterns................................................................................................................ 99 7.2 Gradients........................................................................................................... 104 7.3 Transforming Gradients and Patterns ............................................................... 112 Chapter 8. Text............................................................................................................ 114 8.1 Text Terminology ............................................................................................. 114 8.2 Simple Attributes and Properties of the text Element....................................... 115 8.3 Text Alignment ................................................................................................. 117 8.4 The tspan element ............................................................................................. 118 8.5 Setting textLength............................................................................................. 120 8.6 Vertical Text ..................................................................................................... 121 8.7 Internationalization and Text ............................................................................ 122 8.8 Text on a Path ................................................................................................... 125 8.9 Whitespace and Text......................................................................................... 128 8.10 Case Study -- Adding Text to a Graphic......................................................... 129 Chapter 9. Clipping and Masking ............................................................................... 131 9.1 Clipping to a Path.............................................................................................. 131 9.2 Masking............................................................................................................. 134 9.3 Case Study -- Masking a Graphic ..................................................................... 137 Chapter 10. Filters....................................................................................................... 140 10.1 How Filters Work ........................................................................................... 140 10.2 Creating a Drop Shadow................................................................................. 141 10.3 Creating a Glowing Shadow ........................................................................... 143 10.4