SVG: Skalierbare Vektorgrafiken
Scalable Vector Graphics (SVG) ist eine auf XML basierende Auszeichnungssprache zur Beschreibung zweidimensionaler Vektorgrafiken.
SVG ist damit ein textbasierter, offener Webstandard zur Beschreibung von Bildern, die sich bei jeder Größe scharf darstellen lassen. SVG wurde speziell für die Zusammenarbeit mit anderen Webstandards entwickelt, darunter CSS, DOM, JavaScript und SMIL. Im Wesentlichen ist SVG für Grafiken das, was HTML für Text ist.
SVG-Bilder und ihr zugehöriges Verhalten werden in XML-Textdateien definiert. Dadurch lassen sie sich durchsuchen, indexieren, mit Skripten bearbeiten und komprimieren. Außerdem können sie mit jedem Texteditor oder mit Zeichenprogrammen erstellt und bearbeitet werden.
Im Gegensatz zu klassischen Bitmap-Bildformaten wie JPEG oder PNG lassen sich Vektorgrafiken im SVG-Format ohne Qualitätsverlust in jeder Größe darstellen. Sie können außerdem einfach lokalisiert werden, indem der enthaltene Text geändert wird – ein Grafikeditor ist dafür nicht erforderlich. Mit geeigneten Bibliotheken lassen sich SVG-Dateien sogar dynamisch lokalisieren.
SVG wird seit 1999 vom World Wide Web Consortium (W3C) entwickelt.
Tutorials
Die SVG-Tutorials führen Sie ohne vorausgesetzte Vorkenntnisse durch die Themen – von den Grundlagen bis hin zu fortgeschrittenen Techniken.
- Einführung in SVG von Grund auf
-
Dieses Tutorial erklärt die Funktionsweise von SVG im Detail und enthält viele technische Einzelheiten. Wenn Sie einfach nur ansprechende Bilder zeichnen möchten, finden Sie möglicherweise hilfreichere Ressourcen auf der Dokumentationsseite von Inkscape. Eine weitere gute Einführung in SVG bietet der SVG Primer des W3C. Sehen Sie sich auch dieses adventskalenderartige SVG-Tutorial an, das Sie durch die Programmierung von 25 festlichen SVG-Grafiken führt.
Leitfäden
Die SVG-Leitfäden helfen Ihnen bei der Arbeit mit SVG im Web. Sie behandeln Themen wie Einbettung, MIME-Typen (Medientypen), den Umgang mit Skripten, Animationen, Filter und mehr.
- Effekte mit SVG-Filtern anwenden
-
Filter können die von einem Element gezeichneten Pixel weichzeichnen, verschieben, umfärben und kombinieren – sowohl in SVG als auch in HTML-Inhalten.
- SVG-Effekte auf HTML-Inhalte anwenden
-
Moderne Browser unterstützen die Verwendung von SVG in CSS-Stilen, um grafische Effekte auf HTML-Inhalte anzuwenden.
- Inhaltstypen
-
SVG verwendet verschiedene Datentypen. Dieser Artikel führt sie mit ihrer Syntax auf und beschreibt, wofür sie verwendet werden.
- Schnelleinstieg in Namespaces
-
Namespaces sind für User Agents, die mehrere XML-Dialekte unterstützen, unerlässlich. Browser müssen dabei sehr strikt sein. Wenn Sie sich jetzt mit Namespaces vertraut machen, ersparen Sie sich später Probleme.
- Skripting
-
Es gibt verschiedene Möglichkeiten, SVG mit JavaScript zu erstellen und zu bearbeiten. Dieses Dokument beschreibt die Ereignisbehandlung, Interaktivität und die Arbeit mit eingebetteten SVG-Inhalten.
- SVG-Animation mit SMIL
-
SMIL ist eine XML-basierte Sprache zum Erstellen interaktiver Multimedia-Präsentationen. Mit der SMIL-Syntax können Sie in SVG den zeitlichen Ablauf und das Layout von Elementen für Animationen festlegen.
- SVG als Bild
-
SVG kann in HTML, CSS, bestimmten SVG-Elementen und über die Canvas API als Bildformat verwendet werden. Diese Seite listet die Funktionen auf, bei denen Sie SVG als Bildquelle angeben können.
- Einführung in SVG in HTML
-
Dieser Artikel zeigt anhand von Beispielen, wie Sie Inline-SVG verwenden.
Referenz
Die SVG-Referenz enthält umfassende Informationen zu Elementen, Attributen und DOM-Schnittstellen sowie eine Liste relevanter Spezifikationen und Standarddokumente.
- SVG-Elemente
-
Die SVG-Elemente zum Erstellen, Zeichnen und Anordnen von Vektorgrafiken.
- SVG-Attribute
-
Die verfügbaren SVG-Attribute, mit denen Sie festlegen können, wie ein Element behandelt oder dargestellt werden soll.
- SVG-DOM-Schnittstelle
-
Die SVG DOM API für die Interaktion mit SVG mithilfe von JavaScript.