SVG - Dynamisierbare Vektorgrafiken

Einfache Textdateien beschreiben zweidimensionale Grafiken. Vektorformen und Text werden direkt ausgezeichnet und Rasterbilder (wie GIF, JPG oder PNG-Bilder) können eingebunden werden. SVG unterstützt u.a. den Einsatz von Beschneidungspfaden, verschachtelten Transformationen, Animationen, Alphamasken, Filtereffekten und Interaktivität via Scripting. Zahlreiche Events wie onmouseover oder onclick sind möglich, und durch die XML-Textstruktur sind auch dynamische Bild-Inhalte z.B. über PHP (Datenbankabfragen, Formularauswertungen,...) schnell und einfach realisierbar.
SVG-Elemente (wie HTML-Tags in eckigen Klammern) beschreiben grafische Formen (u.a. Kreise, Rechtecke oder Pfade) und auch für Animationen gibt es spezielle Tags.

SVG in Webseiten einbinden:

SVG kann direkt über den <svg>-Tag in ein HTML-Dokument geschrieben werden:
<svg width="..." height="...">
...SVG-Elemente und -Definitionen...
</svg>
Optional kann man als Attribut "viewBox" setzen. Das ist dann sinnvoll wenn die SVG-Grafik automatisch an den zur Verfügung stehenden Raum skaliert werden soll (also responsiv gemacht wird). Dann setzt man die effektive Breite und Höhe der SVG-Grafik (also wie die SVG-Elemente pixelmässig definiert wurden) in die viewBox: viewBox="0 0 Breite Höhe", und bei width und height definiert man wieviel Platz die Grafik auf dem Bildschirm beanspruchen soll. Also z.B. <svg width="100%" height="100%" viewBox="0 0 300 200"> passt eine 300*200-SVG-Grafik automatisch maximal an den zur Verfügung stehenden Bildschirmplatz/Container an. Werden andere Zahlenwerte in die viewBox gesetzt, so wird die SVG-Grafik entsprechend beschnitten (die ersten zwei Zahlen definieren die Koordinaten des linken oberen Startpunkts des Ausschnitts). Das ist z.B. sinnvoll wenn man nur einen kleinen Ausschnitt einer grossen SVG-Landkarte darstellen will.

SVG kann aber auch in einer separaten SVG-Datei definiert werden, und dann wie ein Bild in HTML eingebunden werden:
<img src="Pfad zur SVG-Datei" alt="Alternativtext" width="..." height="...">
Links und Javascript in externen SVG-Dateien werden allerdings nicht ausgeführt, wenn die SVG-Datei über ein <img>-Tag eingebunden ist. Dann muss man das SVG-File via <object> einbinden:
<object data="Pfad zur SVG-Datei" type="image/svg+xml" width="..." height="...">
</object>
Eine externe SVG-Datei sollte mit *.svg benannt und XML-konform ausgezeichnet sein:
<?xml version="1.0" encoding="utf-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Titel</title>
...SVG-Elemente und -Definitionen...
</svg>
Formatierung und Scripting:

Wie HTML-Elemente können auch SVG-Elemente über CSS formatiert und mit Javascripts versehen werden. Die meisten Events und CSS-Eigenschaften gemäss DOM-Modell werden unterstützt. Zusätzlich gibt es spezifische SVG-Formatierungen. Die Wichtigsten:

  • fill: Füllfarbe
  • stroke: Linienfarbe
  • stroke-width: Liniendicke
  • stroke-dasharray: gestrichelte Linie
  • opacity: Deckkraft; Von 0 (transparent) bis 1 (nicht transparent)
Diese spezifischen SVG-Eigenschaften können direkt als Attribute angegeben werden (also ohne "style"). Bei der Auszeichnung muss aber auf die XML-Syntax geachtet werden. So müssen SVG-Elemente entweder ein öffnendes und schliessendes Tag oder als inhaltsleere Elemente ein /> am Ende haben (z.B. <rect ... />).
Anweisungen in CSS- oder JavaScript-Abschnitten innerhalb des <svg>-Elements müssen wegen der XML-Syntax mit <![CDATA[ und ]]> eingeschlossen werden:
<script type="text/javascript"> oder <style type="text/css">
<![CDATA[
JavaScript- oder CSS-Anweisungen
]]>
</script> oder </style>
Auch externe JavaScript-Files oder CSS-Stylesheets können gemäss XML-Syntax in externen SVG-Dateien eingebunden werden (Die Stylesheet-Anweisung muss allerdings vor dem Wurzelelement <svg> gleich nach dem <?xml...-Prolog eingefügt werden!):
JavaScript: <script xlink:href="Dateiname.js" type="text/javascript"></script>
CSS: <?xml-stylesheet type="text/css" href="Dateiname.css"?>
Dynamisch erzeugtes SVG:

Auch dynamisch durch PHP erzeugte SVG-Dateien sind möglich. Die entsprechende PHP-Datei (*.php) muss als erste Zeile einen header-Aufruf "Content-type: image/svg+xml" beinhalten, der dem Browser zu verstehen gibt, dass es sich um SVG-Code handelt. Zusätzlich muss der XML-Prolog in echo oder print gesetzt werden, damit die Zeile, die mit <? beginnt, nicht als PHP-Code interpretiert wird. Das Grundgerüst einer PHP-SVG-Datei sieht also so aus:
<?php
header("Content-type: image/svg+xml");
echo "<?xml version='1.0' encoding='utf-8' ?> \n";
?>
<svg xmlns="http://www.w3.org/2000/svg">
<title>Titel</title>
...SVG-Elemente und PHP-Code...
</svg>