"SVG Essentials
J. David Eisenberg
Publisher: O'Reilly
First Edition February 2002 ISBN: 0-596-00223-8, 364 pages
Copyright Table of Contents Index Full Description Reviews Examples Reader reviews Errata
Scalable Vector Graphics—or SVG—is the new XML-based graphics standard from the W3C that will enable Web documents to be smaller, faster and more interactive. This insightful book takes you through the ins and outs of SVG, from the basics to more complicated features. Whether you're a graphic designer looking for new tools, or a programmer creating and managing graphics, this book provides a solid foundation.
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 The feImage Filter........................................................................................... 147 10.5 The feComponentTransfer Filter .................................................................... 147 10.6 The feComposite Filter ................................................................................... 152 10.7 The feBlend Filter ........................................................................................... 154 10.8 The feFlood and feTile Filters ........................................................................ 155 10.9 Lighting Effects .............................................................................................. 157 10.10 Accessing the Background............................................................................ 162 10.11 The feMorphology Element.......................................................................... 163 10.12 The feConvolveMatrix Element ................................................................... 164 10.13 The feDisplacementMap Element................................................................. 165 10.14 The feTurbulence Element............................................................................ 167 10.15 Filter Reference Summary ............................................................................ 168 Chapter 11. Animating and Scripting SVG ................................................................ 172 11.1 Animation Basics ............................................................................................ 172
3
TEAM FLY PRESENTS
11.2 How Time Is Measured................................................................................... 174 11.3 Repeated Action.............................................................................................. 176 11.4 The set Element............................................................................................... 177 11.5 The animateColor Element ............................................................................. 178 11.6 The animateTransform Element ..................................................................... 178 11.7 The animateMotion Element........................................................................... 180 11.8 Using Links in SVG........................................................................................ 182 11.9 Scripting SVG................................................................................................. 183 Chapter 12. Generating SVG ...................................................................................... 202 12.1 Using Perl to Convert Custom Data to SVG .................................................. 202 12.2 Using Java to Convert XML to SVG.............................................................. 207 12.3 Using XSLT to Convert XML Data to SVG .................................................. 225 Chapter 13. Serving SVG Files................................................................................... 240 13.1 Serving Web Files -- The Task at Hand.......................................................... 240 13.2 Partitioning the Task ....................................................................................... 241 13.3 Setting up the Server....................................................................................... 255 Appendix A. The XML You Need for SVG............................................................... 258 A.1 What Is XML? ................................................................................................. 258 A.2 Anatomy of an XML Document ...................................................................... 259 A.3 Character Encodings ........................................................................................ 263 A.4 Validity............................................................................................................. 265 A.5 XML Namespaces............................................................................................ 267 A.6 Tools for Processing XML............................................................................... 268 Appendix B. Introduction to Stylesheets .................................................................... 270 B.1 Anatomy of a Style........................................................................................... 270 B.2 Style Selectors .................................................................................................. 270 B.3 Internal Stylesheets .......................................................................................... 270 B.4 Style Selector Classes....................................................................................... 271 Appendix C. Programming Concepts ......................................................................... 277 C.1 Constants .......................................................................................................... 277 C.2 Variables........................................................................................................... 277 C.3 Assignment and Operators ............................................................................... 278 C.4 Arrays ............................................................................................................... 279 C.5 Comments......................................................................................................... 280 C.6 Conditional Statements .................................................................................... 280 C.7 Repeated Actions.............................................................................................. 281 C.8 Functions .......................................................................................................... 281 C.9 Objects, Properties, and Methods..................................................................... 282 C.10 What, Not How .............................................................................................. 284 Appendix D. Matrix Algebra ...................................................................................... 285 D.1 Matrix Terminology......................................................................................... 285 D.2 Matrix Addition................................................................................................ 285 D.3 Matrix Multiplication....................................................................................... 286 D.4 How SVG Uses Matrix Algebra for Transformations ..................................... 288 Appendix E. Creating Fonts........................................................................................ 291 E.1 The ttf2svg Utility ............................................................................................ 291
4
TEAM FLY PRESENTS
Appendix F. Using SVG with Other XML Applications ........................................... 293 F.1 Referring to an SVG Document in HTML ....................................................... 293 F.2 Referring to an SVG Document in XHTML .................................................... 293 F.3 Placing SVG Directly Within XHTML Documents......................................... 293 F.4 Embedding SVG in XSL Formatting Objects .................................................. 295 Colophon..................................................................................................................... 299 Index ........................................................................................................................... 300
5
TEAM FLY PRESENTS
Dedication
To my Mother and my late Father, for their advice and love through the years.
Preface
SVG Essentials introduces you to the Scalable Vector Graphics XML application. SVG, a recommendation from the World Wide Web Consortium, uses XML to describe graphics that are made up of lines, curves, and text. This rather dry definition does not do justice to the scope and power of SVG. You can add SVG graphics to an Extensible Stylesheet Language Formatting Objects (XSL-FO) document, and convert the combined document to Adobe PDF format for high-quality printouts. Mapmakers and meteorologists are using SVG to create highly detailed graphic images in a truly portable format. All of the diagrams in this book were originally created in SVG before being sent to the art department at O'Reilly. As you learn and use SVG, you're sure to think of new and interesting uses for this emerging technology.
Who Should Read This Book?
You should read this book if you want to:
• • • • •
Create SVG files in a text or XML editor Create SVG files from existing vector data Transform other XML data to SVG Use JavaScript to manipulate the SVG document object tree Serve SVG or SVG-source graphics over the Web
Who Should Not Read This Book?
If you simply want to view SVG files, you need only acquire a viewer program or plug-in for the Web, download the files, and enjoy them. There's no need for you to know what's going on behind the scenes unless you wish to satisfy your lively intellectual curiosity. If you wish to create SVG files with a drawing program that has SVG export capability, just read that program's documentation to learn how to use that program feature.
If You're Still Reading This...
If you've decided that you should indeed read this book, you should also be aware that most of the people who use this book will be fairly advanced users, quite probably from a technical background rather than a graphics design background. We didn't want to burden them with a lot of basic material up front, but we did want the book to be accessible to people with no background in XML or programming, so we created a number of 6
TEAM FLY PRESENTS
introductory chapters — and then put them in the back of the book as appendixes. If you haven't used XML or stylesheets (and this could include some of the technical folks!) or have never programmed, you might want to turn first to the appendixes. A complete list of all the chapters and appendixes with details on what they contain is given later in this preface. If you're one of the technical types, you definitely need to be aware that this book will not make you a better artist, any more than a book on word processing algorithm..."
|
You need to upgrade your Flash Player , or try to enable javascript in order see this document properly.
|
|