Building Web Applications with SVG - Cdn.oreilly.com

CHAPTER 1
SVG Basics
I decided that if I could paint that flower in a huge scale, you could not ignore its
beauty.
Georgia O’Keefe
In this chapter:
the What, Why, and Where of SVG. .........................1
Getting Started: A Simple Overview .........................5
thirteen examples that Show the Capabilities of SVG .........6
Diving In: A Step-by-Step Approach to Building
a Simple SVG Document. ..................................21
Scalable Vector Graphics (SVG) is a graphical standard maintained and endorsed by the World Wide
Web Consortium (W3C), the same group that created and continues to maintain HTML, CSS, XML,
and other technologies that constitute the World Wide Web.
The What, Why, and Where of SVG
SVG is much more than its name suggests. It is true that SVG is a language that allows for the creation
of two-dimensional vector elements, which are simply mathematical representations of graphical
objects, and that these vectors are infinitely scalable and can be transformed within the bounds of
the 2D coordinate system. However, SVG is unique in that it is an open standard defined by the W3C
(http://w3c.org/svg/), and like other W3C languages such as HTML and XML, it has its own Document
Object Model (DOM) that brings with it many benefits, and it’s interoperable with other open standard
languages such as JavaScript, CSS, and HTML.
SVG has been in the works over the past decade and has matured a great deal during that time,
with collaboration from interested parties around the world. The great appeal of SVG is that, like
HTML, it’s easy to read and edit, while allowing for complex interactivity and animations through
1