One of the greatest aspects of SVG is found its ease of use. SVG is very similiar to HTML in that they both are composed of tags which are made up of elements and attributes.
VIEWING SVG
Both Microsoft and Netscape have committed to including native support for viewing SVG documents in the upcoming releases of their browsers. But currently the only way to view SVG documents in Internet Explorer or Netscape is by installing Adobe Systems SVG plug-in.
CREATING SVG
Let's get started by looking at Example 1 which is a complete SVG document.
<svg width="100%" height="100%">
<desc>Example 1 - Circle (Sun)</desc>
<circle id="circle" cx="15" cy="15" r="30" style="fill:#CC00FF;opacity:0.4;
stroke:orange; stroke-width:5" />
</svg>
SVG can also be embeded into an HTML document using HTML's <EMBED> tag. In Example 2 I show how embedding the SVG allows us to use the SVG graphic content while also displaying your HTML content.
<HTML>
<BODY>
<SPAN class="txtElement">Example 2 - Embeded Circle
<P><EMBED NAME="Example2" width="300" height="300" SRC="example1_circle.svg" TYPE="image/svg-xml"></P>
</SPAN>
</BODY>
</HTML>
Example 2 demonstrates a key point which is that SVG is compatible with Extensible Markup Language (XML) and conforms to the DOM. In other words, SVG is a new graphics format which is extensible!
SVG will become invaluable for many aspects of Web-based functionality.
Using the Document Object Model (DOM) and Javascript we can begin to manipulate the SVG content, but I'll save this type of interaction for a level 2 or level 3 tutorial.
With the increasing efficiency of XML parsers, SVG will be able to provide transformed data on the fly using the new powerful data transmormation langauge - XSL Transformations (XSLT).
