Scalable Vector Graphics (SVG)

Die Scalable Vector Graphics (SVG) Spezifikation definiert eine Sprache zur Beschreibung zweidimensionaler Grafiken in XML.
Wie aus dem Namen ersichtlich, handelt es sich um die Beschreibung von Vektorgrafiken, also Bildern , die sich aus Linien und Kurven , als auch kleineren Bitmaps und Texten zusammen setzen. SVG ist nicht dafür geeignet um ein Bild pixelweise zu beschreiben. Grafische Objekte können gruppiert, gestaltet, transformiert und zusammengesetzt werden, in zuvor gerenderte Objekte (z.B geschachtelte Transformationen, Ausschneiden von Pfaden, Alpha-Masken, Filtereffekte, Vorlageobjekte).

SVG-Zeichnungen können interaktiv, dass heißt auf Nutzeraktionen reagieren (wie das Klicken auf einen Button) oder animiert sein, durch SVG's "animation elements [SMILANIM]", mit SVG DOM aufbauend auf [DOM2], als auch unter Verwendung von [SMIL1].
Ein weiterer Punkt ist die ausgeprägte Kompatibilität mit anderen XML-Standards. Z.B. [XML10], [XML-NS], für URI-Verweise[XLINK] mit Unterstätzung der Base URI Spezifikation [XML-BASE], um auf Element-IDs zu verweisen wird eine zu [XPointer] kompatible Untermenge [XPTR] verwendet, [CSS2] oder [XSLT] zum Gestalten von SVG-Inhalten , [DOM1], [SMIL1], [HTML4], [XHTML].

SVG-Quellcode:

Ergebnis:

Beispiel eines SVG-Dokumentes <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="5cm" height="5cm" xmlns="http://www.w3.org/2000/svg"> <desc>Two groups, each of two rectangles </desc> <g id="group1" fill="red" > <rect x="1cm" y="1cm" width="1cm" height="1cm" /> <rect x="3cm" y="1cm" width="1cm" height="1cm" /> </g> <g id="group2" fill="blue" > <rect x="1cm" y="3cm" width="1cm" height="1cm" /> <rect x="3cm" y="3cm" width="1cm" height="1cm" /> </g> <!-- Show outline of canvas using 'rect' element --> <rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm" fill="none" stroke="blue" stroke-width=".02cm" /> </svg>