Building Web Applications with SVG - Cdn.oreilly.com

Getting Started: A Simple Overview
You’ll see a more detailed step-by-step example at the end of this chapter, but it is important that you
gain some idea of what’s involved in viewing and creating SVG at the outset.
Viewing SVG
Start up any modern browser and point it at the website related to this book, http://cs.sru.edu/~svg
.com. Internet Explorer, Firefox, Chrome, Safari, and Opera all support viewing SVG on the web, so you
can use any of those. The most important exception is this: if you are using Internet Explorer, you will
either need to upgrade to Internet Explorer 9 (which requires Microsoft Windows Vista or later), or
you will need to download the free SVG plug-in (ASV version 3.03) from Adobe, at http://www.adobe
.com/svg/viewer/install/mainframed.html. For all the other browsers listed, using the latest version will
always prove helpful, because all of these browsers are making steady and frequent progress on their
implementations of the SVG specification.
SVG is a big specification—one that’s not trivial to implement. SVG 1.1 is generally the version
against which browsers are compared. As of this writing, no browser implements all of SVG 1.1,
despite the specification having reached recommendation status (meaning that it is officially a W3C
standard) in 2003 (http://www.w3.org/Graphics/SVG/History). Improvements to browser support tend
to appear on a monthly basis, so it is best to make sure that you’re using the latest release of whatever
browsers you use.
As another example of the importance of using current browser versions, Firefox 3.6 does
not support SMIL animation, while Firefox 4.0 does. You’ll see more about the idiosyncrasies of
browser support in the discussions of the relevant topics, but note that the parts of SVG that pertain
to animation, filters, and fonts are most likely to show browser differences.
Writing SVG
There are many different paths that one can follow to develop SVG. This book will show you several of
those in more detail in Chapter 6, “SVG Tools and Resources.” In the meantime, we recommend using
any simple text editor—for example, Notepad for Windows or TextEdit (properly configured for Mac;
see http://support.apple.com/kb/HT2523)—or any of the plethora of editing tools in Linux or UNIX
(nano, pico, emacs, vi, ed, kate, vim, kwrite, gEdit, etc.).
First, enter this very simple SVG file into your text editor, and save the file with the name
myfirstfile.svg (you can save the file to your local hard drive or a remote server, so long as you know
how to get to it from your web browser):
CHAPTER 1 SVG Basics 5