SVG Essentials/Preface

From WikiContent

< SVG Essentials(Difference between revisions)
Jump to: navigation, search
(Initial conversion from Docbook)
Current revision (13:40, 7 March 2008) (edit) (undo)
(Initial conversion from Docbook)

Current revision

SVG Essentials

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 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 algorithms will make you a better writer. This book gives the technical details of scalable vector graphics; to create better art, you need to learn to see, and the book you should read in addition to this one is The New Drawing on the Right Side of the Brain, by Dr. Betty Edwards.

This book gives you the essentials of SVG; if you want to find out all the information, straight from the source, you should go to

About the Examples

All the examples in this book except for those in Chapter 11 have been tested with the Batik SVG viewer on a system running Linux (the Mandrake distribution). The Batik SVG viewer is an application of the software developed by the Apache Software Foundation's Batik project. This cross-platform software is written in Java and is available as open source under the Apache Software License. For full details, visit

Since Batik produces only static output, I could not use it for the examples in Chapter 11. Those examples were tested with the Adobe SVG Viewer. Adobe has been deeply involved in promoting SVG as a standard, and their viewer, which can be downloaded from, is a nearly complete implementation of the SVG 1.0 specification. It offers JavaScript and ECMA Script support in Netscape, Internet Explorer, and RealPlayer 8. As of this writing, it is available for Windows and Macintosh OS X. An unsupported Linux version is also available at

Another SVG viewer, also written in Java, is available from Australia's Commonwealth Scientific and Industrial Research Organization (CSIRO) Mathematical and Information Sciences department. This viewer, which has not been updated since December of 2000, is available at The same group has implemented a subset of SVG for Pocket PCs; it is available for license at

As you look through the illustrations in this book, you will find that they are utterly lacking in artistic merit. There are reasons for this. First, each example is intended to illustrate a particular aspect of SVG, and it should do so without additional visual distractions. Second, the author becomes terribly depressed when he looks at other books with impossibly beautiful examples; "I can never draw anything that looks like this," he thinks. In an effort to save you from similar distress, the examples are purposely as simple (or simplistic) as possible. As you look at them, your immediate reaction will be: "I can certainly use SVG to draw something that looks far better than this!" You can, and you will.

Organization of This Book

Chapter 1
This chapter gives a brief history of SVG, compares raster and vector graphics systems, and ends with a brief tutorial introducing the main concepts of SVG.
Chapter 2
How do you determine the position of a point in a drawing? Which way is "up?" This chapter answers those questions, showing how to change the system by which coordinates are measured in a graphic.
Chapter 3
This chapter shows you how to construct drawings using the basic shapes available in SVG: lines, rectangles, polygons, circles, and ellipses. It also discusses how to determine the colors for the outline and interior of a shape.
Chapter 4
In a complex drawing, there are elements that are reused or repeated. This chapter tells you how to group objects together so they may be treated as a single entity and re-used. It also discusses use of external images, both vector and raster.
Chapter 5
If you draw a square on a sheet of stretchable material, and stretch the material horizontally, you get a rectangle. Skew the sides of the sheet, and you see a parallelogram. Now tilt the sheet 45 degrees, and you have a diamond. In this chapter, you will learn how to move, rotate, scale, and skew the coordinate system to affect the shapes drawn on it.
Chapter 6
All the basic shapes are actually specific instances of the general concept of a path. This chapter shows you how to describe a general outline for a shape by using lines, arcs, and complex curves.
Chapter 7
This chapter adds more to the discussion of color from Chapter 3, discussing how to create a color gradient or a fill pattern.
Chapter 8
Graphics aren't just lines and shapes; text is an integral part of a poster or a schematic diagram. This chapter shows how to add text to a drawing, both in a straight line and following a path.
Chapter 9
This chapter shows you how to use a clipping path to display a graphic as though it were viewed through a circular lens, keyhole, or any other arbitrary shape. It also shows how to use a mask to alter an object's transparency so that it appears to "fade out" at the edges.
Chapter 10
Although an SVG file describes vector graphics, the document is eventually rendered on a raster device. In this chapter, you'll learn how to apply raster-oriented filters to a graphic to blur an image, transform its colors, or produce lighting effects.
Chapter 11
Since SVG is an XML application, you can use Java and JavaScript to dynamically control a graphic's attributes. This chapter also shows you how to use SVG's built-in animation capabilities.
Chapter 12
Although you can create an SVG file from scratch, most people will have existing vector data or XML data that they wish to display in graphic form. This chapter discusses the use of programming languages such as Java, Perl, and XSLT to create SVG from these data sources.
Chapter 13
This chapter shows a servlet that transforms XML to SVG, and then to PNG format, for delivery to browsers that do not have SVG viewer plug-ins.
Appendix A
SVG is an application of XML, the Extensible Markup Language. If you haven't used XML before, you should read this appendix to familiarize yourself with this remarkably powerful and flexible format for structuring data and documents.
Appendix B
You can use stylesheets to apply visual properties to particular elements in your SVG document. These are exactly the same kind of stylesheets that can be used with HTML documents. If you've never used stylesheets before, you'll want to read this brief introduction to the anatomy of a stylesheet.
Appendix C
If you're a graphic designer who hasn't done much programming, you'll want to find out what programmers are talking about when they throw around words like "object model" and "function."
Appendix D
To fully understand coordinate transformations and filter effects in SVG it's helpful, though not necessary, to understand matrix algebra, the mathematics used to compute the coordinates and pixels. This appendix highlights the basics of matrix algebra.
Appendix E
TrueType fonts represent glyphs (characters) in a vector form. This appendix shows you how to take your favorite fonts and convert them to paths for use in SVG documents.
Appendix F
Since SVG is an application of XML, it can work with other XML applications. This appendix shows you how to put SVG into XHTML and XSL Formatting Objects.

Conventions Used in This Book

Is used to introduce new terms, as well as for email and URL addresses.
Constant width
Is used for code examples and fragments.
Constant width bold
Is used to highlight a section of code being discussed in the text.
Constant width italic
Is used for replaceable elements in code examples.


This is a note.


This is a warning.

This book uses callouts to denote "points of interest " in code listings. A callout is shown as a white number in a black circle; the corresponding number after the listing gives an explanation. Here's an example:

Roses are red,
   Violets are blue.     [1]
Some poems rhyme;
   This one doesn't.     [2]

[1] Violets actually have a color value of #9933cc.

[2] This poem uses the literary device known as a "surprise ending."

Request for Comments

Please address comments and questions concerning this book to the publisher:

O'Reilly & Associates, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
(800) 998-9938 (in the United States or Canada)
(707) 829-0515 (international/local)
(707) 829-0104 (fax)

We have a web page for this book where we list errata, examples, or any additional information. You can access this page at:

To comment or ask technical questions about this book, send email to:

For more information about our books, conferences, software, Resource Centers, and the O'Reilly Network, see our web site at:


I'd like to thank Simon St.Laurent, the editor of this book, for his guidance and comments, which were always right on the mark. He also told me in an email, "we already know that you know how to write," which is one of the nicest things anyone has ever told me.

Thanks also to Edd Dumbill, who wrote the document which I modified only slightly to create Appendix A. Of course, any errors in that appendix have been added by my modifications.

Thanks also go to Antoine Quint and to David Klaphaak and the SVG Quality Engineering team at Adobe, who did the technical review of the manuscript. Your comments have helped improve many aspects of this book.

Jeffrey Zeldman is the person who first put the idea in my head that I, too, could write a book, and for that I thank him most sincerely.

I also want to thank all the people, foremost among them my brother Steven, who, when I told them I was writing a book, believed in me enough to say, "Wow, that's great."

Personal tools