<svg>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

* Some parts of this feature may have varying levels of support.

Das <svg> SVG-Element ist ein Container, der ein neues Koordinatensystem und einen viewport definiert. Es wird als äußeres Element von SVG-Dokumenten verwendet, kann aber auch genutzt werden, um ein SVG-Fragment in ein SVG- oder HTML-Dokument einzubetten.

Dieses Element dient zum Erstellen neuer SVG-Dokumente. Wenn Sie ein vorhandenes SVG-Dokument über eine URL in ein anderes Dokument einbetten möchten, verwenden Sie <img>, <object> oder <image>.

Hinweis: Das xmlns-Attribut ist nur auf dem äußersten svg-Element von SVG-Dokumenten erforderlich oder innerhalb von HTML-Dokumenten mit XML-Serialisierung. Es ist für innere svg-Elemente oder innerhalb von HTML-Dokumenten mit HTML-Serialisierung nicht notwendig.

Verwendungskontext

Kategorien	Container-Element, Strukturelement
Erlaubter Inhalt	Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente Formelemente Strukturelemente Gradient-Elemente `<a>`, `<clipPath>`, `<filter>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

Attribute

baseProfile Veraltet: Das minimale erforderliche SVG-Sprachprofil, das das Dokument benötigt. Wertetyp: <string>; Standardwert: keiner; Animierbar: nein
height: Die angezeigte Höhe des rechteckigen Viewports. (Nicht die Höhe seines Koordinatensystems.) Wertetyp: <length> | <percentage>; Standardwert: auto; Animierbar: ja
preserveAspectRatio: Wie das svg-Fragment verformt werden muss, wenn es mit einem anderen Seitenverhältnis angezeigt wird. Wertetyp: (none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax) (meet | slice)?; Standardwert: xMidYMid meet; Animierbar: ja
version Veraltet: Welche SVG-Version für den inneren Inhalt des Elements verwendet wird. Wertetyp: <number>; Standardwert: keiner; Animierbar: nein
viewBox: Die SVG-Viewport-Koordinaten für das aktuelle SVG-Fragment. Wertetyp: <list-of-numbers>; Standardwert: keiner; Animierbar: ja
width: Die angezeigte Breite des rechteckigen Viewports. (Nicht die Breite seines Koordinatensystems.) Wertetyp: <length> | <percentage>; Standardwert: auto; Animierbar: ja
x: Die angezeigte x-Koordinate des svg-Containers. Keine Auswirkung auf äußerste svg-Elemente. Wertetyp: <length> | <percentage>; Standardwert: 0; Animierbar: ja
y: Die angezeigte y-Koordinate des svg-Containers. Keine Auswirkung auf äußerste svg-Elemente. Wertetyp: <length> | <percentage>; Standardwert: 0; Animierbar: ja

Hinweis: Mit SVG2 sind x, y, width und height Geometriemerkmale, was bedeutet, dass diese Attribute auch als CSS-Eigenschaften genutzt werden können.

DOM-Schnittstelle

Dieses Element implementiert die SVGSVGElement-Schnittstelle.

Beispiele

Verschachteltes `svg`-Element

Dieses Beispiel zeigt, dass verschachtelte svg-Elemente das xmlns-Attribut nicht benötigen.

html, body, svg { height: 100%; }

html

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey"> <circle cx="50" cy="50" r="40" /> <circle cx="150" cy="50" r="4" /> <svg viewBox="0 0 10 10" x="200" width="100"> <circle cx="5" cy="5" r="4" /> </svg> </svg>

Verwendung von dynamischen Viewport-Einheiten

In diesem Beispiel werden die height- und width-Attribute des svg-Elements mit dem dynamischen Viewport-Wert 60vmin festgelegt, was 60% der Breite oder Höhe des Viewports entspricht, je nachdem, was kleiner ist.

<div class="resizer"> <iframe class="resized" srcdoc='

html

<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" height="60vmin" width="60vmin"> <rect x="0" y="0" width="50%" height="50%" fill="tomato" opacity="0.75" /> <rect x="25%" y="25%" width="50%" height="50%" fill="slategrey" opacity="0.75" /> <rect x="50%" y="50%" width="50%" height="50%" fill="olive" opacity="0.75" /> <rect x="0" y="0" width="100%" height="100%" stroke="cadetblue" stroke-width="0.5%" fill="none" /> </svg>

 '></iframe> </div>

.resizer { display: flex; margin: 1rem; padding: 0; resize: both; overflow: hidden; border: 5px dotted red; height: 400px; } .resizer > .resized { flex-grow: 1; margin: 0; padding: 0; border: 0; }

Um die Dimensionen des iframes zu ändern, versuchen Sie, den gepunkteten roten Rand von der unteren rechten Ecke aus zu vergrößern.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # NewDocument

Browser-Kompatibilität

Help improve MDN

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

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden