SVG: Scalable Vector Graphics

Einstieg mit SVG

Scalable Vector Graphics (SVG) ist eine auf XML basierende Auszeichnungssprache zur Beschreibung von zweidimensionalen Vektorgrafiken.

Als solche ist es ein textbasiertes, offenes Web-Standardformat zur Beschreibung von Bildern, die in jeder Größe sauber gerendert werden können und speziell dafür entwickelt wurden, gut mit anderen Webstandards wie CSS, DOM, JavaScript und SMIL zu funktionieren. SVG ist im Wesentlichen für Grafiken das, was HTML für Text ist.

SVG-Bilder und deren zugehöriges Verhalten sind in XML-Textdateien definiert, was bedeutet, dass sie durchsucht, indexiert, gescriptet und komprimiert werden können. Außerdem bedeutet das, dass sie mit jedem Texteditor oder mit Zeichenprogrammen erstellt und bearbeitet werden können.

Im Vergleich zu klassischen pixelbasierten Bildformaten wie JPEG oder PNG können SVG-Vektorbilder in jeder Größe ohne Qualitätsverlust gerendert werden und können leicht lokalisiert werden, indem der Text in ihnen aktualisiert wird, ohne dass ein grafischer Editor benötigt wird. Mit geeigneten Bibliotheken können SVG-Dateien sogar spontan lokalisiert werden.

SVG wird seit 1999 vom World Wide Web Consortium (W3C) entwickelt.

Siehe auch, SVG-Tutorial.

Dokumentation

SVG-Element-Referenz

Details zu jedem SVG-Element.

SVG-Attribut-Referenz

Details zu jedem SVG-Attribut.

SVG-DOM-Schnittstellenreferenz

Details zur SVG-DOM-API, zur Interaktion mit JavaScript.

SVG-Effekte auf HTML-Inhalt anwenden

SVG arbeitet zusammen mit HTML, CSS und JavaScript.

Werkzeuge

Beispiele