SVG/Struktura
Istnieją trzy sposoby na wyświetlenie pliku SVG w internecie:
- oddzielny plik, renderowany poprzez przeglądarkę plików SVG
- obiekt włączony w zawartość strony internetowej
- przestrzeni nazw w dokumencie XHTML.
Plik SVG[edytuj]
Przykład #1.1[edytuj]
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250px" height="250px" x="10px" y="10px">
<rect x="10px" y="10px" width="100px" height="100px"/>
</svg>
Pierwsza linijka, rozpoczynająca dokument, to prolog (instrukcja przetwarzania) dokumentu XML, określająca kolejno: wersję, kodowanie znaków i czy dokument nie odwołuje się do zewnętrznych zasobów. Kolejna określa DTD (Document Type Declaration) jakie ma zostać wykorzystane - w nim określone są wszystkie elementy i atrybuty. Kolejna to element główny <svg> z atrybutami xmlns (eXtensible Markup Language Name Spaces - określa przestrzeń nazw), version (tutaj jest to 1.1) oraz wymiary i położenie.
Plusami pliku SVG jest jego niezależność od strony. Może on być wyświetlony oddzielnie od strony, jako inny dokument. Może być także włączony w stronę WWW za pomocą obiektów.
Obiekt XHTML[edytuj]
Przykład #1.2[edytuj]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<title>Obiekt SVG</title>
</head>
<body>
<h1>Obiekt SVG</h1>
<div id="svg_object">
<object type="image/svg+xml" data="image.svg"></object>
</div>
</body>
</html>
Pierwsze linijki określają DTD i XMLNS dokumentu. Wewnątrz body znajduje się element object, którego typ MIME to image/svg+xml. Odwołuje się on do pliku image.svg i wyświetla na stronie. Należy zaznaczyć, że zgodnie ze standardem element object powinien znajdować się np. wewnątrz div'a. Taki kod przejdzie walidację (choć mogą wystąpić ostrzeżenia dotyczące kodowania znaków).
Przestrzeń nazw[edytuj]
Przykład #1.3[edytuj]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<title>Obiekt SVG</title>
</head>
<body>
<h1>Obiekt SVG</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="200px">
<rect x="0px" y="0px" width="100px" height="100px" fill="red" stroke="black" stroke-width="2px"/>
</svg>
</body>
</html>
Pierwsze linijki określają DTD i XMLNS dokumentu. Wewnątrz body znajduje się element svg, którego XMLNS to http://www.w3.org/2000/svg (wersja to 1.1). Tworzy on wewnątrz pliku XHTML czerwony kwadrat i wyświetla na stronie. Należy zaznaczyć, że taki może nie działać (nie zadziała np. w Operze 9.62, Firefoxie 3.08 oraz IE 7) i nie przechodzi walidacji (nawet jako XHTML+MathML+SVG).