If youve 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 didnt 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 chaptersand then put them in the back of the book as appendixes. If you havent 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 youre 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 (Tarcher).
This book gives you the essentials of SVG; if you want to find out all the details, you should go straight to the source, the W3C SVG specifications.
About the Examples
The examples in this book, except for those that involve HTML pages, have been tested with the Batik SVG viewer on a system running GNU/Linux. The Batik SVG viewer is an application of the software developed by the Apache Software Foundations Batik project. This cross-platform software, written in Java, is available as open source under the Apache Software License and can be freely downloaded from the project website.
All the examples (including those in Chapters that involve JavaScript and HTML) were tested by being loaded into the Firefox and Chrome web browsers. The level of support for the more sophisticated features of SVG differs depending upon the browser.
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, one of the authors (David) 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
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.This chapter shows you the various methods that you can use to put SVG into your HTML5 documents.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.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.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 reused. It also discusses use of external images, both vector and raster.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.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.This chapter adds more to the discussion of color from , discussing how to create a color gradient or a fill pattern.Graphics arent 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.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 objects transparency so that it appears to fade out at the edges.Although an SVG file describes vector graphics, the document is eventually rendered on a raster device. In this chapter, youll learn how to apply raster-oriented filters to a graphic to blur an image, transform its colors, or produce lighting effects.This chapter shows you how to use SVGs built-in animation capabilities.In addition to SVGs built-in animation, you can use both CSS and JavaScript to dynamically control a graphics attributes.This chapter goes further in depth with using JavaScript to manipulate the Document Object Model. It also gives a brief introduction to a JavaScript library designed for working with SVG.Although you can create an SVG file from scratch, many 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 and XSLT to create SVG from these data sources.SVG is an application of XML, the Extensible Markup Language. If you havent used XML before, you should read this appendix to familiarize yourself with this remarkably powerful and flexible format for structuring data and documents.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 youve never used stylesheets before, youll want to read this brief introduction to the anatomy of a stylesheet.If youre a graphic designer who hasnt done much programming, youll want to find out what programmers are talking about when they throw around words like