SVG: Scalable Vector Graphics
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 dargestellt werden können, und speziell dafür entwickelt, gut mit anderen Webstandards wie CSS, DOM, JavaScript und SMIL zusammenzuarbeiten. SVG ist im Wesentlichen für Grafiken das, was HTML für Text ist.
SVG-Bilder und deren zugehörige Verhaltensweisen werden in XML-Textdateien definiert, was bedeutet, dass sie durchsucht, indexiert, gescriptet und komprimiert werden können. Außerdem bedeutet dies, dass sie mit jedem Texteditor oder mit Grafiksoftware erstellt und bearbeitet werden können.
Im Vergleich zu klassischen Rasterbildformaten wie JPEG oder PNG können SVG-Format-Vektorbilder in jeder Größe ohne Qualitätsverlust dargestellt werden und lassen sich leicht durch Aktualisierung des innerhalb von ihnen befindlichen Textes lokal anpassen, ohne dass dafür ein Grafikeditor erforderlich ist. Mit den richtigen Bibliotheken können SVG-Dateien sogar in Echtzeit lokalisiert werden.
SVG wurde seit 1999 vom World Wide Web Consortium (W3C) entwickelt.
Tutorials
Die SVG-Tutorials sind so konzipiert, dass sie Sie durch die Themen führen, ohne dass Vorkenntnisse erforderlich sind. Sie beginnen mit den Grundlagen und steigern sich zu fortgeschritteneren Techniken.
- SVG von Grund auf neu einführen
-
Dieses Tutorial zielt darauf ab, die Interna von SVG zu erklären und ist vollgepackt mit technischen Details. Wenn Sie einfach nur schöne Bilder zeichnen möchten, finden Sie nützlichere Ressourcen auf der Inkscape-Dokumentationsseite. Eine weitere gute Einführung in SVG bietet der SVG Primer des W3C. Sehen Sie sich auch dieses Adventskalender-Thema SVG-Tutorial an, das Ihnen beim Codieren von 25 festlichen SVGs hilft.
Leitfaden
Die SVG-Leitfäden helfen Ihnen, mit SVG im Web zu arbeiten, und behandeln Themen wie Einbettung, MIME-(Medien-)Typen, Umgang mit Skripten, Animationen, Filter und mehr.
- Anwenden von SVG-Effekten auf HTML-Inhalte
-
Moderne Browser unterstützen die Verwendung von SVG innerhalb von CSS-Stilen, um grafische Effekte auf HTML-Inhalte anzuwenden.
- Inhaltstyp
-
SVG verwendet eine Reihe von Datentypen. Dieser Artikel listet diese Typen zusammen mit ihrer Syntax und Beschreibungen, wofür sie verwendet werden, auf.
- Namespaces-Schnellkurs
-
Namespaces sind für Benutzeragenten, die mehrere XML-Dialekte unterstützen, unerlässlich. Browser müssen sehr streng sein; wenn Sie sich jetzt die Zeit nehmen, Namespaces zu verstehen, bewahrt Sie das vor zukünftigen Kopfschmerzen.
- Scripting
-
Es gibt mehrere Möglichkeiten, SVG mit JavaScript zu erstellen und zu manipulieren. Dieses Dokument beschreibt die Ereignisbehandlung, Interaktivität und das Arbeiten mit eingebetteten SVG-Inhalten.
- SVG-Animation mit SMIL
-
SMIL ist eine XML-basierte Sprache zum Schreiben interaktiver Multimedia-Präsentationen. Autoren können die SMIL-Syntax in SVG verwenden, um das Timing und Layout von Elementen für Animationen zu definieren.
- SVG als Bild
-
SVG kann als Bildformat in HTML, CSS, bestimmten SVG-Elementen und über die Canvas-API verwendet werden. Diese Seite listet die Funktionen auf, bei denen Sie SVG als Bildquelle bereitstellen können.
- SVG-Filter
-
SVG unterstützt Filter, sodass Autoren Effekte wie einen Schatten oder eine Unschärfe anwenden oder sogar die Ergebnisse verschiedener Filter zusammenführen können.
- Einführung in SVG in HTML
-
Dieser Artikel zeigt, wie Sie inline SVG verwenden und enthält Beispiele zur Veranschaulichung.
Referenz
Die SVG-Referenz-Dokumentation enthält umfassende Informationen zu Elementen, Attributen und DOM-Schnittstellen und listet relevante Spezifikationen und Standarddokumente auf.
- SVG-Elemente
-
Die SVG-Elemente, die verwendet werden, um Vektorgrafiken zu konstruieren, zu zeichnen und zu layouten.
- SVG-Attribute
-
Die verfügbaren SVG-Attribute, die verwendet werden können, um zu spezifizieren, wie ein Element behandelt oder dargestellt werden soll.
- SVG-DOM-Schnittstelle
-
Die SVG-DOM-API zur Interaktion mit SVG unter Verwendung von JavaScript.