Typischer Aufbau einer SVG-Datei
Es gibt 3 Wege, um SVG zu konstruieren und definieren:
- als alleinstehende SVG-Datei,
- als ein mittels <objekt...> oder <embed...> in eine Webseite eingebettetes Objekt, oder
- als Teil eines größeren XML-Dokuments innerhalb einer SVG-Namensraum-Definition (namespace declaration)
Alleinstehende SVG-Datei
The following example defines a standalone SVG file. The file must be saved with an .svg extension:
<?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> |
The first line in the example above contains the XML declaration. Since SVG is an XML application it should always include the XML declaration.
The second and third line defines the Document Type Declaration (DTD) to use. The DTD describes the language and syntax allowed in SVG.
The fourth line contains the <svg> tag. This tag "tells" the browser that this is an SVG document. The canvas of the SVG document is defined by the width and height attributes. 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, sixth, and seventh line: Where to place all the SVG elements.
The last line, </svg>, closes the document.
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
The following example shows how to embed SVG within an XHTML document:
<!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.
