SVG-Leitfäden

Diese Seite listet Leitfäden für SVG auf und behandelt Themen wie das Einbetten, 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.

Einführung in SVG in HTML

Dieser Artikel und das dazugehörige Beispiel zeigen, wie Sie eingebettetes SVG verwenden können.

Inhaltstyp

SVG verwendet eine Reihe von Datentypen. Dieser Artikel listet diese Typen zusammen mit ihrer Syntax und Beschreibung ihrer Verwendung auf.

Namespaces Crash-Kurs

Als XML-Dialekt ist SVG mit Namespaces versehen. Es ist wichtig, das Konzept der Namespaces und deren Verwendung zu verstehen, wenn Sie beabsichtigen, SVG-Inhalte zu erstellen. Namespaces sind für Benutzeragenten, die mehrere XML-Dialekte unterstützen, wesentlich; Browser müssen sehr strikt sein. Die Zeit, die Sie jetzt investieren, um Namespaces zu verstehen, wird Ihnen in Zukunft Kopfschmerzen ersparen.

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 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 angeben können.

SVG-Animation mit SMIL

Synchronized Multimedia Integration Language (SMIL) ist eine XML-basierte Sprache zum Schreiben interaktiver Multimedia-Präsentationen. Autoren können SMIL-Syntax in anderen XML-basierten Sprachen verwenden, um das Timing und Layout von Elementen für Animationen zu definieren.

SVG-Filter

SVG ermöglicht es uns, ähnliche Werkzeuge wie die Bitmap-Beschreibungssprache zu verwenden, wie zum Beispiel Schatten-, Weichzeichnereffekte oder sogar das Zusammenführen der Ergebnisse verschiedener Filter. Mit dem Filterelement <filter> ist es möglich, diese Effekte hinzuzufügen und später an ein Objekt anzuhängen.

Verlinkung

Das target Attribut auf dem SVG a Element funktioniert in Mozilla Firefox 1.5 nicht. Wenn SVG-Dokumente innerhalb eines übergeordneten HTML-Dokuments mit dem Tag eingebettet werden:

Siehe auch