Hello SVG

At the same time VML was submitted to the W3C, Adobe and Sun, in conjunction with other companies, created another specification, Precision Graphics Markup Language (PGML). When faced with conflicting specifications, W3C took a little of one, a smidgen of the other, and created an amalgamation of both: Scalar Vector Graphics, or SVG.

Many of the concepts introduced in the section covering VML—such as the use of XML, predefined objects, and being able to transform, manipulate, and group objects—were ported into SVG. The main architectural difference between the two is that SVG is a completely separate XML vocabulary, whereas VML was designed as an extension to HTML.

For all the similarities, though, SVG is a much more powerful vector graphics markup than VML. More importantly, it has become the de facto industry standard, and most of the main browsers now implement some form of native support for SVG—that is, most of the main browser makers at the time this was written except one, unfortunately: Internet Explorer.

The best way to get a feel for SVG is to jump in immediately with the ubiquitous Hello World example.

A First Application

In this first look at SVG, I've created a separate SVG XML document. In the next chapter I'll cover the different ways we can embed SVG in web documents, but for now, we'll work with SVG independent of an HTML or XHTML web page.

The first look at SVG is a variation of the traditional "Hello, World!" application that programmers create when working ...

Get Painting the Web now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.