WebReference.com - Scalable Vector Graphics: The Art is in the Code (2/8) | WebReference

WebReference.com - Scalable Vector Graphics: The Art is in the Code (2/8)

To page 1current pageTo page 3To page 4To page 5To page 6To page 7To page 8
[previous] [next]

SVG: The Art is in the Code

What is SVG?

Essentially, SVG is a bridge between design and programming because unlike traditional methods of creating graphics, graphics in SVG are created through a programming language. This programming language is XML based and consequently integrates well with other W3C standards such as the DOM.

A good way to think of SVG is to think of the browser as being a blank canvas that is defined by a multitude of x and y points. Each point in the canvas can then be utilized to create a shape via a mathematical formula. The term mathematics may conjure fear in people; however the reality is that Web developers have been using these same mathematical formulas when building HTML pages for a long time now. For example, absolute positioning of CSS layers uses a mathematical equation that allows developers to position a layer where they would like, by assigning left and top property values. Many of the equations used by SVG work on these same underlying principles.

SVG is much like a vector based graphics program; with the exception that it is void of a graphical program interface that one may typically associate with the creation of images. Instead, vector images are created through text based commands that are formatted to comply with XML specifications. In this instance, the code is literally the art, and the brush used to paint the art is XML based.

SVG can display 24 bit color with the additional benefit of producing lower weight graphics. The graphics produced by SVG don't lose any quality if they are zoomed or resized. Best of all every element and every attribute of an element can be animated. These are compelling reasons to utilize SVG.

SVG Document Structure

There are a couple of ways SVG can be defined in a Web document: as a standalone SVG page, as an embedded element, or it can be utilized in an XHTML document with a namespace declaration. Let us begin by taking a look at the standalone example:

1. <?xml version="1.0" standalone="no"?>
2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
     "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
3. <svg width="300" height="300" x="0" y="0">
4. <!--Your SVG content goes here -->
5. </svg>

This method, while useful for providing standalone examples (as is the case in this tutorial), has some shortcomings particularly in regard to search engine placement. There is a provision for Meta tags in the SVG specifications, but since SVG is XML based most of the popular search engines will not pick up a standalone SVG page. RDF enabled search engines will however pick up SVG. Nonetheless, for most of us, being listed by search engines is important and to overcome this problem we can use a combination of HTML/XHTML and SVG.

You can embed SVG within a HTML or XHTML document by using the following structure:

1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2.  <html>
3.  <head>
4.  <title>Object and Embed</title>
5.  </head>
6.  <body>
7.  <object data="test.svg" width="500" height="500" type="image/svg+xml">
8.  <embed src="test.svg" width="500" height="500" type="image/svg+xml" />
9.  </object>
10. </body>
11. </html>

The document is a straightforward HTML document. The important tags in the above example are the object and embed tags. If we wanted to adhere strictly to standards based coding then we would only use the object tag, but using this tag only causes the SVG file to not appear in Netscape version browsers. As a consequence it is best to use both the object and embed tags or just the embed tag. Lines 7 through 9 contain the appropriate object and embed tags. It is important to note that the object tag uses the data property to specify the url of the SVG document while the embed tag employs the src property.

One of the benefits of utilizing this method is that it is able to combine the advantages of HTML and XHTML with SVG. For example, the chances of your pages being picked up by search engines are considerably enhanced when employing a mixture of HTML / XHTML and SVG. It is also easier to integrate sound and music capabilities utilizing this method (note: The Adobe plug-in provides support for MP3 format and WAV files). For example, if we wanted to let Flash handle the sounds for the Web page, then we are free to do so. It is likely that the object/embed method will be the one of choice for a few years to come until full native SVG support is achieved by the major browser vendors.

Note: SVG supports the wmode="transparent" property in the object/embed statement but, like Flash, this is limited to IE only.

There is another way to allow SVG to be displayed by browsers and that is through the use of XML namespaces. While this method is the most powerful and flexible of the three, it would take some time to explain the concepts of how to best use this method. Consequently, I will reserve a discussion on this topic for another time.

In the meantime, it is time to get our hands dirty and delve into the world of building some basic SVG elements.


To page 1current pageTo page 3To page 4To page 5To page 6To page 7To page 8
[previous] [next]

Created: November 21, 2001
Revised: November 21, 2001


URL: http://webreference.com/authoring/languages/svg/intro/2.html