Preface - World Wide Web Consortium

Outline

Preface

Chapter I - Overview

Laconism
Polemic
Brief History
Advantages of SVG
Brief examples
Getting started
1. Getting an SVG viewer (web browser).
2. Write and test a small SVG file.
3. Test it on your web server.
4. finish reading this book



Chapter II - SVG Basics

A. The coordinate system.
B. Simple objects
1. Colors and drawing order
2.
3.
4.
5.
6.
6a. Paths: M and L
6b. Paths: Q -- Quadratic Bézier curves.
6c. Paths: C -- Cubic Bézier curves.
6d. Paths: A - Elliptical arc
7. opacity
8.
9.

C. Operations: Grouping, Reusing, Scaling, Translation and Rotation
1. Transform/translate:
2. Transform/rotate:
3. Transform/scale
4. multiple transformations and more
5. grouping
Inheriting attributes from the group
6.
D. putting SVG in a web page


Chapter III - Fancier SVG Effects

A. Gradients
and stop-color
More s
Varying angles and centers
Stop-opacity
spreadMethod


B. Patterns
C. Masks and clip-paths
the
The

D. Filters: blurring, distortion, etc.
The basic
Simpler filter primitives
feGaussianBlur
feColorMatrix
feConvolveMatrix
feComponentTransfer
feMorphology
Filter primitives that stand alone
feFlood
feImage
feTurbulence
feDiffuseLighting and feSpecularLighting
Utility filters (feTile and feOffset)
feTile
feOffset
Combining Filter Primitives
feMerge
Filtering graphics along with their backgrounds
feBlend
feComposite
feDisplacementMap


Chapter IV - SMIL animations embedded in SVG



1. Overview of SMIL
2. Comparison with JavaScript animation
3. Basic SMIL animation
4. Multiple animations and timing
a. keyTimes
b. keySplines
5. Varieties of animation
6. animation of multi-valued attributes
7. Following paths
8. Animation of transformations
9. Animation of non-numeric attributes
10. Starting an animation, with time or events, and using to set the
value of an attribute
11. Stopping an animation

Chapter V - Dynamic SVG and JavaScript

1. Why scripting?
2. Getting started
3. Simple interactivity
a. simple events
b. CDATA and
c. getElementById, id, nodeName, and other properties of SVG nodes.
d. getAttribute and getAttributeNS
e. setAttribute and setAttributeNS
f. Changing xlink attributes
g. evt.target and evt.currentTarget
h. Changing text.
4. Creating new SVG objects
a. createElementNS and appendChild
b. createTextNode
c. cloneNode.
d. Other methods for managing new content
e.
5. More about events and .stopPropogation
6. Deleting or removing objects
7. XML and The SVG DOM
a. firstChild
b. nextSibling
c. childNodes
d. getElementsByTagNameNS
e. parentNode
f. node.attributes
g.
8. Special functions
a. getBBox()
b. getTotalLength() and getPointAtLength
c. Various text methods.
d. getCTM()
e.
9. SMIL to JavaScript event passing
a. onend (onbegin)
b. beginElement() (and endElement())
c. pauseAnimations (and unpauseAnimations)

Chapter VI - SVG and HTML

1. Why HTML
a. Inertia
b. Functionality
i. and
ii.
iii. and
iv.
v.
c.
2. Embedding SVG in HTML documents
a.
b. and
c.
d.
e. in-line content
3. Scripting between HTML and SVG
a. Calling Javascript functions in HTML documents from events in
SVG DOM
b. Using Javascript functions in HTML to create or modify SVG
objects
c.
4. An illustration of the joint use of HTML and SVG.



Chapter VII - Directions for Development


1. SVG's acceptance.
2. SVG's progress.
3. What don't I see yet in SVG 1.1 or SVG1.2 that would be nice?
4. Changes in the world around SVG.
a. The Semantic Web
b. XPath -
c. XSLT
d. XForms
e. AJAX
f. XBL, sXBL, XUL, RDF, OWL
g. Other developments


5. The future at large.

Appendix I: HTML basics
Appendix II: JavaScript basics


Preface

This is neither an introductory text book, nor a reference manual. Instead,
it is aimed so that any of these people:
. an upper division undergraduate student with a few semesters under
her belt of computing coursework;
. a professional web programmer;
. a graphic designer with a strong technical bent;
or
. a science teacher who wants to build graphical presentations


might be able to pick it up and then do any or all of the following:

. work through it over the course of a few days, developing a basic
understanding;
. be able, in a week or two, to make a decent graphical front-end to
a web site that demands innovative and interactive graphics;
. at any time during the next year or two of work with SVG, be able
to pick up the book, look up a new topic, and with little effort,
find an illustration of what they'd like to know about and with a
minimum of reading, to be able to make sense of the examples
provided.

Over the past 35 years of my involvement with computing, I have had the
occasion to use, as both learner and teacher, a wide variety of books on
computing and computing languages. I have gained much from many sources,
but at the same time my preferences have, no doubt, congealed somewhat.
Perhaps some of my preferences will coincide with those of the reader.

While this book is not intended for the beginning computer user, I would
hope it is approachable by any of these sorts of people:

. Someone with a good deal of HTML and JavaScript experience, but
little or no SVG experience.
. Someone who has done some work with SVG but little with HTML or
JavaScript.
. Someone who has programmed in other languages, is conversant with
XML, and wishes to learn about SVG.

That is, it aims to provide some of the purpose of an introduction to the
topic, and some of the purposes of a reference. At the same time, though,
it is not a comprehensive guide to SVG.

It attempts to discuss SVG in broader terms, but at the same time to
illustrate how one can write JavaScript programs that use and manipulate
SVG. It is not as broad in its coverage of stand-alone SVG as some existing
books, though I believe it goes deeper into scripting than many.

Several goals helped to guide the development of this book.

1. It should be hands-on and practical rather than theoretical.
2. It should illustrate existing technologies rather than future ones.
3. In addition to saying what should work (according to the standards) it
should illustrate what does or does not work.
4. Individual sections should be, to every extent possible, self-
contained.
5. Examples should be brief. So long as one is familiar with the basic
elements being used, then no one should have to read more than a page
or two to figure out what is going on with a particular example.


In short, I'd like it to be the book that did not seem to exist when I
started learning SVG.
Chapter I - Overview

Laconism

SVG or Scalable Vector Graphics is a relatively new World Wide Web
Consortium (W3C) standard, endorsed by several corporations, for the
creation and display of vector graphic material. SVG is an XML language
that allows dynamic creation of content using JavaScript within or outside
the context of the World Wide Web.

Polemic

If you ever close your eyes and see pictures that have never been drawn or
movies that have not yet been made, then SVG might be for you. Just as
typing or drawing or playing a musical instrument, developing hypertexts or
carving stone can help you to express a part of what is inside you, so
might SVG expand your expressive ability. Think of SVG as an expressive
medium. With it you can let your readers' browser build your vector
graphics, animate them, and let your readers interact with and change the
evolution of those graphics dynamically. Users can draw over them, append
to them, or use them to plot user-selected sources of data. And you can do
it in an open-standards environment that is rapidly growing in popularity
and cross-browser acceptance. It is good for less fanciful endeavors, like
business and science, too. It is sort of like HTML, only better.

Brief History

The first public draft of SVG was released by the World Wide Web consortium
in February of 1999[1]. During the preceding years, interest in the use of
vector graphics had grown. The PostScript page description language
developed by Adobe Systems Inc. during the 1980's had given the print-based
community a way of describing images in ways which could be rescaled to
adapt to the resolution of the display device, usually a printer. It was
natural to seek a similar vector-based approach to web-based presentation.

In 1998 an XML-based language, Vector Markup Language (VML) was introduced
by Microsoft. It contains many of th