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.
Funktionen, die SVG unterstützen
Browser unterstützen SVG-Bilder in:
- HTML
<img>oder<svg>Elementen - CSS
background-image - CSS
list-style-image - CSS
content - SVG
<image>Element - SVG
<feImage>Element - Canvas
drawImageFunktion
Einschränkungen
Aus Sicherheitsgründen legen einige Browser Einschränkungen für SVG-Inhalte fest, wenn sie als Bild verwendet werden. Insbesondere können die folgenden Einschränkungen gelten:
- JavaScript ist deaktiviert.
- Externe Ressourcen (z. B. Bilder, Stylesheets) können nicht geladen werden, obwohl sie verwendet werden können, wenn sie durch
data:URLs eingebettet sind. :visited-Link-Stile werden nicht dargestellt.- Plattform-natives Widget-Styling (basierend auf dem Betriebssystem-Thema) ist deaktiviert.
Beachten Sie, dass die oben genannten Einschränkungen spezifisch für Bildkontexte sind; sie gelten nicht, wenn SVG-Inhalte direkt betrachtet werden oder wenn sie als Dokument über die <iframe>, <object>, oder <embed> Elemente eingebettet werden.
Spezifikationen
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # the-background-image |