WebReference.com - Scalable Vector Graphics: The Art is in the Code (2/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"
     "https://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>

• Line 1: Since SVG is an application of XML it must include the initial XML declaration <?xml version="1.0" standalone="no"?>

• Line 2: SVG must be identified by a standard set of rules. These rules are stored in a separate document called a Document Type Declaration or DTD and is utilized to validate the accuracy of the SVG document structure. The purpose of a DTD is to describe in precise terms the language and syntax allowed in SVG.

• Line 3: The <svg> tag denotes to the browser that this is a SVG document. The canvas of the SVG document is defined by the width and height properties. For example, increasing width and height to 500 respectively increases the size of the canvas where the content will be contained. Not defining the width and the height properties cause the SVG canvas to fill the browser dimensions. The x and y properties denote where the canvas will be placed in the browser window. The x property equates to the top position of the browser and the y property equates to the left position of the browser. You can also use percentages to achieve a liquid page design with SVG.

• Line 4: All the SVG content is placed between the <svg> </svg> tags. This will become increasingly clearer as we work through some examples.

• Line 5: Since SVG is an application of XML, all tags must be closed. The </svg> tag closes the document.

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.

[previous] [next]

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

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