Chapter 2: SVG Document Structure

There are three ways of defining SVG in a Web document:

  • as a standalone SVG page
  • as an embedded element
  • in an XHTML document with a namespace declaration

However, we are just going to tackle the first two methods because we do not know how to use namespace declaration.

Standalone SVG page

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="300" x="0" y="0">
....
....
....
</svg>

This example defines a standalone SVG file. It is important that the file is saved in .svg extension.

The first line contains an XML declaration. Since SVG is an XML application, it should always include an XML declaration.

The second and third lines define the Document Type Declaration (DTD). This calls for what SVG documentation you are going to use for your SVG. Since 1.1 is the most recent stable version, we used that for this tutorial.

The fourth line is the <svg> tag. This let the browser know the height, width, and location of the SVG file would be placed in. If you do not define the width and height attributes the svg canvas will fill the browser dimensions. The x and y attributes specifies where the canvas will be placed in the browser window.

The fifth and sixth lines are where you will be placing your SVG codes and elements.

Since SVG is XML-based most of the search engines will not pick up a standalone SVG page. To solve this problem we can add SVG as an embedded element in an XHTML page.

SVG as an Embedded Element

<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">

<html>
<body>
<object data="test.svg" width="500"
height="500" type="image/svg+xml">
<embed src="test.svg" width="500"
height="500" type="image/svg+xml" />
</object>
</body>
</html>

The example above is a straightforward XHTML document.

Notice the use of the <object> and <embed> tags. According to the XHTML standard we should only use the <object> tag, but since Netscape does not support this tag we find it best to use both the <object> and <embed> tags.

By using this method the document will be picked up by search engines. This method also makes it easier to integrate other objects (e.g. sound, music, Flash) on the same web page. I think this method is the preferred one, until SVG is supported by the major browsers.

TIP: In coding SVG, you can use the comments by adding <!-- in the first line and --> in the end of the comment.

QUIZ: LEARN SVG - CHAPTER 2
TOP | CHAPTER 3: BASIC SHAPES


powered by BYC