SVG: Strukturelemente
► W3C-Empfehlung: <svg> <title> <desc> <defs> <g>
Das Grundgerüst einer eigenständigen SVG-Datei sieht folgendermaßen aus:
<?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 version='1.1' baseProfile='full'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
xmlns:ev='http://www.w3.org/2001/xml-events'
width='800px' height='600px'>
<!-- Hier folgen die Angaben zur Grafik -->
</svg>
Die Einleitung des Quelltextes bilden die XML-Deklaration und die Dokumenttypdefinition.
Darauf folgt das eigentliche <svg>-Element, das sämtliche Elemente der Grafik enthält, mit Angaben zur verwendeten SVG-Version, dem Ausgabeprofil, den XML-Namensräumen (optional bei Bedarf) sowie zu den Dimensionen der Grafik. Bei in HTML eingebettetem SVG können all diese Angaben (bis auf die Dimensionen der Grafik) weggelassen werden:
<svg width='800px' height='600px'>
<title>SVG-Beispiel 1</title>
<desc>Beispiel für eine Grafik im SVG-Format</desc>
<defs>
<!-- hier folgen ggf. diverse Definitionen -->
</defs>
<g>
<!-- Bei Bedarf können einzelne SVG-Elemente in Gruppen zusammengefasst werden. -->
</g>
</svg>
Das <title>-Element dient zur Beschreibung des entsprechenden Eltern-Elements im Quelltext und wird häufig als Tooltip dargestellt, wenn der Benutzer den Mauszeiger über das Eltern-Element bewegt (sofern dieses Element keine transparente Füllfarbe besitzt). Es muss das erste Kind-Element sein. Ist <svg> sein Eltern-Element, wird sein Inhalt als Titel im Browser-Tab angezeigt.
Das <desc>-Element (description) hat eine ähnliche Funktion, es wird aber nicht grafisch dargestellt.
In einem besonderen Bereich, der durch das <defs>-Element (definitions) gekennzeichnet ist, werden konfigurative Angaben gemacht wie Filter, Muster, Farbverläufe, Marker, Masken oder zu klonende Elemente bzw. Gruppen.
viewBox
► W3C-Empfehlung: viewBox preserveAspectRatio
Über das Attribut viewBox im <svg>-Element lässt sich eine Projektionsfläche für die Inhalte simulieren, die von den Dimensionen der ursprünglichen Grafik abweicht. Dieses Attribut hat vier Werte:
• die x-Position der Fläche
• die y-Position der Fläche
• die Breite der Fläche
• die Höhe der Fläche
Alle diese Werte beziehen sich auf die ursprüngliche Grafik und werden dann in die Dimensionen des <svg>-Elements projiziert. Um den Erhalt der Seitenverhältnisse der enthaltenen Elemente aufzuheben, wird zusätzlich das Attribut preserveAspectRatio='none' gesetzt.
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg viewBox='-20 -20 390 220' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' version='1.1' baseProfile='full' width='350px' height='180px'>
<rect x='0' y='0' width='350' height='180' fill='cyan' stroke='black' stroke-width='4'/>
<circle cx='175' cy='90' r='20' fill='red' />
</svg>