| Ebenfalls auf XML basiert SVG (Scalable Vector Graphics). Sinn dieser Sprache ist es, Vektorgrafiken für das Internet verfügbar zu machen. Bisher konnten nur Pixelgrafiken in den Formaten GIF, JPG und PNG eingesetzt werden. Bei SVG kommen neue Tags zum Einsatz, über die die äußere Form eines Objekts festgelegt wird. Das Erstellen von Vektorgrafiken funktioniert nun über diese neuen Tags.
SVG wird vom W3-Konsortium standardisiert. Am 04.09.2001 wurde SVG 1.0 als Standard verabschiedet. Zum Darstellen von SVG ist ein Plug-in nötig, das von Adobe bereitgestellt wird. Ohne dieses Plugin können die SVG-Grafiken in den Standardbrowsern nicht angesehen werden. Neben dem Plugin SVG Viewer von Adobe existieren einige Programme, die SVG-Grafiken darstellen können, z.B. crockzilla. Auch SVG-Editoren sind schon verfügbar, sodass man die SVG-Dateien nicht mit einem ASCII-Editor erstellen braucht. Zu den SVG-Editoren gehört WebDraw von JASC.
Grundstruktur einer SVG-Datei
Die Dateiendung einer jeden SVG-Datei ist .svg oder .xml. Eine SVG-Datei verfügt über einen Prolog, der aus dem Tag <?xml?> und dem <!DOCTYPE>-Tag besteht. Der konkrete Inhalt einer jeden SVG-Datei befindet sich innerhalb des Tagpaars <svg> ... </svg>. Dies ist das Wurzelelement der SVG-Datei. Innerhalb von <svg> ... </svg> befinden sich weitere Tags, die die Objekte beschreiben. Ein Beispiel:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="5cm" height="4cm">
<desc>Ein SVG-Beispiel</desc>
<rect x="0.5cm" y="0.5cm" width="2cm" height="1cm" style="fill:blue"/>
<rect x="0.5cm" y="2cm" width="1cm" height="1.5cm" style="fill:red"/>
<rect x="3cm" y="0.5cm" width="1.5cm" height="2cm" style="fill:orange"/>
<rect x="3.5cm" y="3cm" width="1cm" height="0.5cm" style="fill:green"/>
</svg>
Sehen Sie sich diese SVG-Datei an (SVG-Plugin muß vorher installiert sein!)
Jede Vektorgrafik in SVG wird über das Tag <svg> eingeleitet. Über die Attribute width und height wird die Größe des Objekts angegeben. Die Angabe kann in Zentimeter erfolgen, aber auch in Pixeln. Das Tag <desc> ... </desc> gibt eine Beschreibung (engl. description) an. Das eigentliche Objekt wird über das <rect>-Tag erstellt. Es sind in SVG mehrere vordefinierte Objekte enthalten. <rect> erstellt ein Rechteck. Die Koordinaten des Rechtecks werden über die vier Attribute x, y, width und height festgelegt.
Links:
SVG-1.0-Spezifikation
s-v-g.net
|
