SVG: Strukturelemente

► W3C-Empfehlung: <svg> <title> <desc> <defs> <g>

Das Grundgerüst einer eigenständigen SVG-Datei sieht folgendermaßen aus:

1
2
3
4
5
6
7
8
9
10
11

<?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:

1
2
3
4
5
6
7
8
9
10
11

<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, 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.

1
2
3
4
5
6

<?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>