SVG: Evolution, Not Revolution

A Quick Introduction To SVG

The SVG language supports three types of graphical objects:

Vector shapes (circles, rectangles, paths)
text, and
raster graphics

These types of objects can be styled, transformed, decorated, animated and made interactive in various ways. Here is a simple SVG document that displays a circle and a rectangle:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="30" fill="blue" stroke="red"/>
  <rect x="10" y="10" width="80" height="40" fill="yellow"
        stroke="black"/>
</svg>

SVG provides many different general-purpose shapes: circle, ellipse, rectangle, line, polyline, polygon, and path elements.

Here is a simple SVG document that displays a raster graphic with the circle and rectangle drawn overtop:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <image xlink:href="calif3-thumb.jpg" x="20" y="20" width="100" height="75" />
  <circle cx="100" cy="100" r="30" fill="blue" stroke="red"/>
  <rect x="10" y="10" width="80" height="40" fill="yellow" stroke="black"/>
</svg>

The SVG image element is the equivalent of the HTML img element and simply displays a raster graphic in a viewport.

For those new to SVG documents in general, here are a couple important points to keep in mind:

It is important to include proper XML namespace declarations in the root svg element as we've done above, since SVG uses attributes from different namespaces
SVG elements can be styled using CSS just like HTML. You can either specify "style" attributes on elements, include style elements that describe the CSS rules, or reference external stylesheets using a mechanism similar to the HTML link element.
SVG documents have a Document Object Model (DOM). This means that, like HTML, each SVG tag corresponds to a DOM node that implements one or more interfaces. For example, the SVG image element results in a DOM node that implements the SVGImageElement interface.
SVG documents can be scripted. Just like HTML, the SVG script element allows you to define script processing instructions in JavaScript that operate on the DOM nodes in the document.

Integrating SVG with HTML

With this knowledge of SVG under our belts, how do we integrate such documents into the HTML "host" document? There are numerous ways of doing this: You can use HTML iframe, you can include SVG code inline with XHTML (properly namespaced of course), but currently the most broadly supported and useful technique is to include the SVG document in an HTML object element. The reason HTML object is so useful is because it allows the author to specify fall-back HTML content that will be rendered in browsers that do not support SVG content. Here is a simple example:

<html>
<body>
   <object type="image/svg+xml" data="foo.svg">
   <!-- fall-back HTML content goes here -->
      <p>Sorry! Your browser does not support SVG!  
       Please use a modern browser.</p>
   </object>
</body>
</html>

If you are able, turn your browser's SVG-rendering capabilities off (in Firefox, go to about:config and double-click svg.enabled) and then refresh the above example to see the behavior.

You can put any HTML content inside the object as your fallback content. For example, a link to download a SVG plugin or install a SVG-enabled browser. For our SVG Photo Gallery, we will tell the browser to "fall back" to render the Example 1 HTML-only code. In other words, our fall-back content will be an HTML img element.

Break On Through To The Other Side

Embedding SVG documents in HTML documents is useful, but where things become really interesting is being able to script between the documents. Remember, SVG documents are scriptable and have their own DOM. This means it is possible to affect the SVG documents from the HTML document and vice versa:

Scripting from HTML to SVG: The contentDocument property of the HTMLObjectElement interface is the SVG document (i.e. the SVGDocument interface).
Scripting from SVG to HTML: The frameElement property of the Window interface within the SVG DOM is the HTML object element. Note that this property only has a value if the SVG is embedded. If the SVG document is being viewed alone (non-embedded), the frameElement property is null.

Figure 1 - HTML-to-SVG Interface

Figure 1 shows how navigation between all elements (window, documents, objects, etc) is achieved in the DOM. The HTML document (the top-left block) has embedded an SVG document (represented by the bottom-right block) by using the HTML object element. The HTML object's contentDocument property points to the document in the SVG DOM. Similarly, you can follow how other attributes and objects give the author links to other pieces within the DOM.

Pages: 1 2 3 print

Login