Building Web Applications with SVG - Cdn.oreilly.com

The file is also visible at http://cs.sru.edu/~ddailey/svg/simplest.svg should you have any problems
seeing the file you’ve created.
You’ll see information about more advanced editing environments at the end of this chapter, and
you’ll of course see many more examples of SVG code throughout the rest of the book.
Thirteen Examples That Show the Capabilities of SVG
To fully appreciate the power of SVG, complete with its interactivity and animation capabilities, I
encourage you to take a look at the tutorial page on this book’s website (http://cs.sru.edu/~svg), which
contains links to interesting examples, and also to explore and read the examples illustrated and
briefly discussed below.
Note We haven’t yet defined the terms for the effects described below, but we’ll make
them clear later on. At this point, we simply want to ensure that you have some idea of
what SVG can accomplish before you begin working with it. How else to know the lay of
the land?
example 1: Dynamic random Landscape Drawn with
JavaScript and SVG
The scenery here, inspired by one author’s frequent drives from his homeland in New Mexico to his
graduate school in Colorado, shows the effect of motion parallax on the various mountain ranges
leading from the foothills to the Continental Divide. As the vantage point moves continually northward
toward the badlands of Wyoming, a slightly impressionistic hot-air balloon follows. Its vertical
position, speed, and wind deformation change somewhat randomly as we move. The various layers
of mountains recede behind us to the left, with the taller peaks remaining visible longer. Owing
to the use of random elements, no two landscapes will ever be the same (ignoring the infinitesimal
probability of extreme coincidence). The example can be seen at (http://srufaculty.sru.edu/david
.dailey/svg/balloon.svg).
6 Building Web Applications with SVG