Scalable Vector Graphics - SVG
Ein Beispiel
<?xml version="1.0" standalone="no"?>
<svg viewBox="0 0 34 34" id="home" xmlns="http://www.w3.org/2000/svg">
<g stroke="gold" stroke-width="2">
<rect x="2" y="2" width="30" height="30" rx="5" ry="5" fill="yellow" fill-opacity="0.4"/>
<rect x="9" y="15" width="16" height="12" fill="none"/>
<path d="M6,18 l11,-11 l11,11" fill="none" stroke-width="3"/>
<rect x="15" y="19" width="4" height="8" fill="gold" stroke-width="1"/>
</g>
</svg>
Das SVG-Bild daraus
Zum Inhalt der Datei
SVG ist ein Bestandteil des XML-Sprachraumes. Daraus resultiert die erste Zeile. Im Beispiel ist der minimal nötige Umfang zur Anwendung gekommen. Wenn eine SVG-Datei mit Software erstellt wird kommen viele Informationen dazu. Es ist so zu sehen womit der Designer arbeitet, wer der Urheber ist und noch mehr.
In der 2. Zeile sind Angegeben zur Dimension des Bildes, die ID und der benutze Namensraum notiert. Nach der Konvention für XML muß dem öffnenden Tag <svg> ein schließender zugeordnet sein </svg>. Dazwischen kommt alles was notwendig ist um das Bild zu zeichnen.
Die erste Bildinfo - es besteht aus einer Gruppe. Wird mit dem Tag g realisiert. Die soll mit einem goldenen Stift der Dicke 2 gezeichnet werden. In der Gruppe sind 4 Aktionen zum Bildaufbau enthalten – drei Rechtecke und ein Pfad.
Um ein Rechteck zu definieren existiert der Tag <rect/>. Er braucht den Startpunkt als x und y Wert sowie Breite und Höhe.. Weiterhin sind Angaben möglich zu abgerundeten Ecken (rx ry) und zur Füllung des Rechteckes mit Farbe. Auch die Stiftdicke kann angegeben werden (hier wird die Angabe aus der Gruppe für dieses Element überschrieben).
Der Pfad besteht aus Punkten und der Information wie diese miteinander verbunden werden. Er beginnt mit einem Move zum Startpunkt. Mittels Linien werden die nächsten 2 Punkte relativ zum vorhergehenden angesteuert.