SVG: Scalable Vector Graphics

Scalable Vector Graphics (SVG) ist eine aufXML basierende Auszeichnungssprache zur Beschreibung von zweidimensionalenVektorgrafiken.

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 wieCSS,DOM,JavaScript undSMIL zusammenzuarbeiten. SVG ist im Wesentlichen für Grafiken das, wasHTML für Text ist.

SVG-Bilder und deren zugehörige Verhaltensweisen werden inXML-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 wieJPEG oderPNG 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 vomWorld Wide Web Consortium (W3C) entwickelt.

Tutorials

DieSVG-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 derInkscape-Dokumentationsseite. Eine weitere gute Einführung in SVG bietet derSVG Primer des W3C. Sehen Sie sich auch dieses Adventskalender-ThemaSVG-Tutorial an, das Ihnen beim Codieren von 25 festlichen SVGs hilft.

Leitfaden

DieSVG-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

DieSVG-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.

Ressourcen

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.