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 |
|
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 |
|
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.
1 2 3 4 5 6 |
|