SVG Ansichts-Fenster (viewBox)

(viewBox)-Varianten der SVG-Verpackung


Die Diagramme gehen davon aus, dass eine allgemeine Objekt-Grafik diese 3 Bestandteile enthalten kann:
  • Grafik-(SVG)-Elemente, z.B. <circle> <line>
  • CSS-Formatierung in einem <style> Element
  • Javascript-Programme in einem <script>-Element


Inline-SVG

<html>
<head>
<meta />
<style> </style>
<script> </script>
</head>
<body>
<svg>
<circle />
<line />
<rect />
</svg>
</body>
</html>

Web-SVG

<svg>
<style> </style>
<script> </script>
<circle />
<line / >
<rect />
</svg>

Büro-SVG

<svg viewBox width height>
<style> </style>
<circle />
<line / >
<rect />
</svg>

Die Inline-SVG-Variante eignet sich, um einfache Zeichnungen in Webseiten einzufügen.
Man muss bei jeder einzelnen Verwendung alle Grafik-Elemente angeben.
Lässt sich Mobil-freundlich programmieren.
Details zur Variante Inline-SVG
Die Web-SVG-Variante eignet sich, um komplexe Grafik in Webseiten einzufügen.
Die Zeichnung ist portabel und wieder-verwendbar: Eine einzige Datei kann in beliebig vielen Webseiten beliebig oft angezeigt werden.
Details zur Variante Web-SVG
Die Büro-SVG-Variante eignet sich zum Import in Büro-Programme, z.B. Textverarbeitung, Tabellen-Kalkulation, Präsentation.
Hier sind normalerweise keine Javascript-Programme enthalten.
Details zur Variante Büro-SVG


Inline-SVG


Ausschnitt aus einem HTML-Quelltext mit Inline-SVG:
<body>
<h1>HTML + Inline-SVG</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:50px; height:50px;">
<circle cx="20" cy="20" r="15" style="fill:red;"/>
</svg>
</body>

Bei dieser Anwendung wird die Größe der Grafik durch die HTML-Elemente vorgegeben. Man sollte daher unbedingt die erwünschte Größe (width,height) des <svg>-Elements angeben.
Ein viewBox-Attribut ist weder notwendig noch sinnvoll.


Ausschnitt aus einem Mobil-freundlichen HTML-Quelltext:
<head>
<meta name="viewport" content="width=device-width"/>
</head>



Beispiel einer Mini-Webseite mit SVG-Grafik:
Mit diesem Link wird die ↗ Grafik in einem eigenen Browser-Tab geladen, mit diesem Link der ↗ HTML+SVG Quelltext der Mini-Webseite.

Einbettung einer Mini-Webseite:
<iframe src="minitest.html" style="height:80px; width:120px;">
</iframe>
Es ist sehr empfehlenswert, die gewünschte Größe des <iframe>-Elements anzugeben (hier: 120x80 Pixel).



CSS-Regeln sowohl für HTML-Elemente als auch für SVG-Elemente
<head>
<style>
h1{color:red;}
circle{fill:blue;}
</style>
</head>



Animation einer SVG-Grafik in einer Mini-Webseite:
Mit diesem Link wird die ↗ Grafik in einem eigenen Browser-Tab geladen, mit diesem Link der ↗ HTML+SVG Quelltext der Mini-Webseite.

Web-SVG


Quelltext einer Grafik-Datei:
<?xml version="1.0" encoding="utf-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>/* CSS-Regeln */</style>
<script>/* Javascript-Programme */</script>
<circle cx="20" cy="20" r="15" style="fill:green;"/>
</svg>

  Vor der XML-Deklaration darf sich kein anderer Text befinden, auch kein Leerzeichen und keine leeren Zeilen.



Wenn man keine xlink-Elemente verwendet, dann kann man diese Resource im <svg>-Element weglassen.



Ohne Angabe der Größe ist die Grafik theoretisch unendlich groß, praktisch so groß wie es die Umgebung (HTML-Element, Browser-Fenster) zulässt.

Wenn man die Grafik alleinstehend im Browser öffnet, dann füllt der Hintergrund das gesamte Fenster aus. Das hat den Vorteil, dass man die Skalierung (Vergrößerung, Verkleinerung) der Grafik fast beliebig (Tasten Strg+, Strg-0, Strg-) wählen kann:
Mit diesem Link wird die ↗ Grafik in einem eigenen Browser-Tab geladen, mit diesem Link der ↗ HTML+SVG Quelltext der Mini-Webseite.



Einbettung der Grafik in diese Webseite:
<iframe src="ball_red.svg" style="height:50px; width:100px;">
</iframe>



Alleinstehend versucht (!) ein SmartPhone, die passende Größe der Grafik zu treffen. Diese Beispiel wird meist winzig angezeigt, man muss es nach dem Laden vergrößern.

Beispiel: Mit diesem Link wird die ↗ Grafik in einem eigenen Browser-Tab geladen. An einem PC können sie den hier beschriebenen Effekt nicht beobachten !



Wenn sie eine Objekt-Grafik dieser Variante in ein Büro-Programm importieren wollen, dann setzen sie sowohl die passende Größe als auch ein viewBox-Attribut so ein wie im ↓ nächsten Kapitel beschrieben.

Büro-SVG

Quelltext einer Grafik-Datei:
<?xml version="1.0" encoding="utf-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 50" style="width:150px; height:50px;">
<style>/* CSS-Regeln */</style>
<circle cx="20" cy="20" r="15" style="fill:blue;"/>
</svg>



Wenn man keine xlink-Elemente verwendet, dann kann man diese Resource im <svg>-Element weglassen.



Wenn man eine Grafik importieren will, die weder ein viewBox-Attribut noch Angaben zur Größe im <svg>-Element enthält, dann kann man das Problem realtiv einfach selbst lösen:

Öffnen sie die SVG-Datei mit einem Text-Editor-Programm (auf Windows z.B. mit Notepad++, keinesfalls mit Textverarbeitung).
Ergänzen sie mindestens das viewBox-Attribut, besser auch die Attribute width und height so wie im Beispiel vorgestellt.
Wenn sie die Größe nicht kennen, dann schätzen sie und experimentieren danach mit verschiedenen Werten.
Speichern sie die geänderte Datei.
Importieren sie die Datei in ein Büro-Dokument.


Das Gleiche gilt, wenn man die Grafik alleinstehend im Browser öffnet: Das Fenster wird zwar mit der Farbe des Hintergrunds gefüllt, die Grafik-Elemente werden jedoch von der viewBox (hier 50x50 Pixel) abgeschnitten.

Mit diesem Link wird die ↗ Grafik in einem eigenen Browser-Tab geladen, mit diesem Link der ↗ HTML+SVG Quelltext der Mini-Webseite.

Wenn man das viewBox-Attribut und die Angabe der Größe aus dem <svg>-Element entfernt, dann fällt die Begrenzung der Grafik weg, so wie im Kapitel ↑ Web-SVG gezeigt.



Je nach Version kann es kleine Unterschiede in Ansicht und Verarbeitung geben. Öffnen sie die SVG-Datei im Zweifel mit dem Programm-Teil Draw (Zeichnung).

Wenn die Grafik in maximaler Größe angezeigt wird, kann man sie skalieren (verkleinern): Grafik markieren, Shift-Taste gedrückt halten, Grafik an einem der 8 'Anfasser' kleiner ziehen.

Zur Bearbeitung Grafik mit RechtsKlick Aufbrechen. Einzelteile bearbeiten, zuletzt alle Teile markieren und mit RechtsKlick wieder zu einem einzigen SVG-Objekt Gruppieren.



Alternativen:
Grafik in das Objekt-Grafik-Format EPS ( Encapsulated Postscript) umwandeln (mit LibreOffice oder Inkscape)
Grafik in Pixel-Grafik (Bildpunkte) umwandeln, z.B. in eines der Formate PNG, GIF, JPEG (mit LibreOffice, GIMP, Inkscape) - Details zu → Pixel-Grafik-Formaten.
Gesamtes Dokument in das Format PDF ( Portable Document Format) umwandeln (LibreOffice, OpenOffice): Man kann die *.pdf-Datei in allen Betriebssystemen verwenden, jedoch nicht mehr bearbeiten.