Bitte warten...

SVG: Strukturelemente

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

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

Code kopieren
  1. <?xml version='1.0' encoding='UTF-8' standalone='no'?>
  2. <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
  3. <svg version='1.1' baseProfile='full'
  4. xmlns='http://www.w3.org/2000/svg'
  5. xmlns:xlink='http://www.w3.org/1999/xlink'
  6. xmlns:ev='http://www.w3.org/2001/xml-events'
  7. width='800px' height='600px'>
  8. <!-- Hier folgen die Angaben zur Grafik -->
  9. </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:

Code kopieren
  1. <svg width='800px' height='600px'>
  2. <title>SVG-Beispiel 1</title>
  3. <desc>Beispiel für eine Grafik im SVG-Format</desc>
  4. <defs>
  5. <!-- hier folgen ggf. diverse Definitionen -->
  6. </defs>
  7. <g>
  8. <!-- Bei Bedarf können einzelne SVG-Elemente in Gruppen zusammengefasst werden. -->
  9. </g>
  10. </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.

Code kopieren
  1. <?xml version='1.0' encoding='UTF-8'?>
  2. <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
  3. <svg viewBox='-20 -20 390 220' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' version='1.1' baseProfile='full' width='350px' height='180px'>
  4. <rect x='0' y='0' width='350' height='180' fill='cyan' stroke='black' stroke-width='4'/>
  5. <circle cx='175' cy='90' r='20' fill='red' />
  6. </svg>
Beispiel für SVG-Maskierung Beispiel für SVG-Maskierung