- XML Reference Guide
- Overview
- What Is XML?
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Table of Contents
- The Document Object Model
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- DOM and Java
- Informit Articles and Sample Chapters
- Books and e-Books
- Implementations
- DOM and JavaScript
- Using a Repeater
- Repeaters and XML
- Repeater Resources
- DOM and .NET
- Informit Articles and Sample Chapters
- Books and e-Books
- Documentation and Downloads
- DOM and C++
- DOM and C++ Resources
- DOM and Perl
- DOM and Perl Resources
- DOM and PHP
- DOM and PHP Resources
- DOM Level 3
- DOM Level 3 Core
- DOM Level 3 Load and Save
- DOM Level 3 XPath
- DOM Level 3 Validation
- Informit Articles and Sample Chapters
- Books and e-Books
- Documentation and Implementations
- The Simple API for XML (SAX)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- SAX and Java
- Informit Articles and Sample Chapters
- Books and e-Books
- SAX and .NET
- Informit Articles and Sample Chapters
- SAX and Perl
- SAX and Perl Resources
- SAX and PHP
- SAX and PHP Resources
- Validation
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Document Type Definitions (DTDs)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XML Schemas
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- RELAX NG
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Schematron
- Official Documentation and Implementations
- Validation in Applications
- Informit Articles and Sample Chapters
- Books and e-Books
- XSL Transformations (XSLT)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XSLT in Java
- Java in XSLT Resources
- XSLT and RSS in .NET
- XSLT and RSS in .NET Resources
- XSL-FO
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XPath
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XML Base
- Informit Articles and Sample Chapters
- Official Documentation
- XHTML
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XHTML 2.0
- Documentation
- Cascading Style Sheets
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XUL
- XUL References
- XML Events
- XML Events Resources
- XML Data Binding
- Informit Articles and Sample Chapters
- Books and e-Books
- Specifications
- Implementations
- XML and Databases
- Informit Articles and Sample Chapters
- Books and e-Books
- Online Resources
- Official Documentation
- SQL Server and FOR XML
- Informit Articles and Sample Chapters
- Books and e-Books
- Documentation and Implementations
- Service Oriented Architecture
- Web Services
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Creating a Perl Web Service Client
- SOAP::Lite
- Amazon Web Services
- Creating the Movable Type Plug-in
- Perl, Amazon, and Movable Type Resources
- Apache Axis2
- REST
- REST Resources
- SOAP
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- SOAP and Java
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- WSDL
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- UDDI
- UDDI Resources
- XML-RPC
- XML-RPC in PHP
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Ajax
- Asynchronous Javascript
- Client-side XSLT
- SAJAX and PHP
- Ajax Resources
- JSON
- Ruby on Rails
- Creating Objects
- Ruby Basics: Arrays and Other Sundry Bits
- Ruby Basics: Iterators and Persistence
- Starting on the Rails
- Rails and Databases
- Rails: Ajax and Partials
- Rails Resources
- Web Services Security
- Web Services Security Resources
- SAML
- Informit Articles and Sample Chapters
- Books and e-Books
- Specification and Implementation
- XML Digital Signatures
- XML Digital Signatures Resources
- XML Key Management Services
- Resources for XML Key Management Services
- Internationalization
- Resources
- Grid Computing
- Grid Resources
- Web Services Resource Framework
- Web Services Resource Framework Resources
- WS-Addressing
- WS-Addressing Resources
- WS-Notifications
- New Languages: XML in Use
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Google Web Toolkit
- GWT Basic Interactivity
- Google Sitemaps
- Google Sitemaps Resources
- Accessibility
- Web Accessibility
- XML Accessibility
- Accessibility Resources
- The Semantic Web
- Defining a New Ontology
- OWL: Web Ontology Language
- Semantic Web Resources
- Google Base
- Microformats
- StructuredBlogging
- Live Clipboard
- WML
- XHTML-MP
- WML Resources
- Google Web Services
- Google Web Services API
- Google Web Services Resources
- The Yahoo! Web Services Interface
- Yahoo! Web Services and PHP
- Yahoo! Web Services Resources
- eBay REST API
- WordML
- WordML Part 2: Lists
- WordML Part 3: Tables
- WordML Resources
- DocBook
- Articles
- Books and e-Books
- Official Documentation and Implementations
- XML Query
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XForms
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Resource Description Framework (RDF)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Topic Maps
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation, Implementations, and Other Resources
- Rich Site Summary (RSS)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Simple Sharing Extensions (SSE)
- Atom
- Podcasting
- Podcasting Resources
- Scalable Vector Graphics (SVG)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- OPML
- OPML Resources
- Summary
- Projects
- JavaScript TimeTracker: JSON and PHP
- The Javascript Timetracker
- Refactoring to Javascript Objects
- Creating the Yahoo! Widget
- Web Mashup
- Google Maps
- Indeed Mashup
- Mashup Part 3: Putting It All Together
- Additional Resources
- Frequently Asked Questions About XML
- What's XML, and why should I use it?
- What's a well-formed document?
- What's the difference between XML and HTML?
- What's the difference between HTML and XHTML?
- Can I use XML in a browser?
- Should I use elements or attributes for my document?
- What's a namespace?
- Where can I get an XML parser?
- What's the difference between a well-formed document and a valid document?
- What's a validating parser?
- Should I use DOM or SAX for my application?
- How can I stop a SAX parser before it has parsed the entire document?
- 2005 Predictions
- 2006 Predictions
- Nick's Book Picks
Scalable Vector Graphics (SVG) are a way to represent graphics using instructions in the form of XML elements and attributes. For example, an SVG document might contain the following instruction:
<circle cx="0" cy="-55" r="10" fill="pink" stroke="pink"/>
This tells the application to display a circle with the center at the point 0,-55 and a radius of 10. It should have a pink outline and be filled with pink.
Of course, this is just a very simple example. Detailed paths can also be specified, including lines and curves:
<path d="M0,0 S25,10 50,50 L150,200 S175,250 300,200" fill="none" stroke="brown" stroke-width="8" />
This creates a "ski slope" type of curve.
SVG doesn't stop there, though. It also enables you to create animations easily, using just commands such as these:
<animateMotion path="M0,0 S25,10 50,50 L150,200 S175,250 300,200 L500,100" dur="5s" rotate="auto" />
For example, we could put this all together into a simple animation of a skier taking a jump, as in the following figure.
Figure An SVG document can show not only graphics, but animation.
Before we move on to the SVG file itself, if you don't see the skier moving, you don't have an SVG viewer installed for your browser. (You can get one from Adobe at http://www.adobe.com/svg/viewer/install/main.html.) When we put the SVG image on the page, we used an object, which allows us to specify "fallback" content:
<object type="image/svg+xml" data="svg/skier.svg" width="500" height="300"> <img src="svg/skier.gif" alt="Static version of SVG image" /> </object>
If the browser supports the MIME-type image/svg+xml, the SVG will be displayed. If not, it will display the img file.
The SVG file itself is a plain XML file:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="500" height="300" xmlns="http://www.w3.org/2000/svg"> <!-- Ski slope and sky --> <rect x="0" y="0" width="498" height="300" fill="blue" stroke="blue" /> <path d="M0,0 S25,10 50,50 L150,200 S175,250 300,200" fill="none" stroke="brown" stroke-width="8" /> <path d="M0,0 S25,10 50,50 L150,200 S175,250 300,200 L300,300 L0,300 Z" fill="white"/> <!-- Group of elements --> <g stroke-width="5" stroke="red"> <!-- Skier --> <line x1="20" y1="-20" x2="0" y2="-35"/> <line x1="20" y1="-10" x2="0" y2="-20"/> <line x1="20" y1="-10" x2="0" y2="0"/> <line x1="0" y1="-20" x2="0" y2="-55"/> <circle cx="0" cy="-55" r="10" fill="pink" stroke="pink"/> <!-- Ski and pole --> <line x1="20" y1="-20" x2="-20" y2="-35" stroke-width="2" stroke="black"/> <line x1="-15" y1="-25" x2="-10" y2="-40" stroke-width="2" stroke="black"/> <path d="M-10,0 L30,0 S50,0 45,-10" fill="none" stroke="green" stroke-width="2" /> <!-- Animation --> <animateMotion dur="5s" rotate="auto" path="M0,0 S25,10 50,50 L150,200 S175,250 300,200 L500,100" /> </g> </svg>
First we define the outer bounds of the image in order to fill the entire sky with blue.
We create the ski slope and a similarly shaped object that we can then fill with white to make the snow.
We create a group, using the g element.
Within that group, we create a number of shapes, to which we can then add animation using the animateMotion element.
There are good reasons for using SVG, aside from enabling the artistically challenged (like yours truly) to create artwork much more graphically complicated than what's shown here. For one thing, it's possible to create a beautiful page that includes intense graphical treatment for textwithout making the text inaccessible to, say, text-only browsers.
Perhaps most powerfully, however, SVG enables a developer to dynamically create graphics based on a database, user input, or other interactive sources.