<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 einenviewport 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 Erstellenneuer 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:Dasxmlns-Attribut ist nur auf dem äußerstensvg-Element vonSVG-Dokumenten erforderlich oder innerhalb von HTML-Dokumenten mit XML-Serialisierung. Es ist für inneresvg-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

baseProfileVeraltet: 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 dassvg-Fragment verformt werden muss, wenn es mit einem anderenSeitenverhältnis angezeigt wird.Wertetyp: (none |xMinYMin |xMidYMin |xMaxYMin |xMinYMid |xMidYMid |xMaxYMid |xMinYMax |xMidYMax |xMaxYMax) (meet |slice)?;Standardwert:xMidYMid meet;Animierbar:ja
versionVeraltet: 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ßerstesvg-Elemente.Wertetyp:<length> |<percentage>;Standardwert:0;Animierbar:ja
y: Die angezeigte y-Koordinate des svg-Containers. Keine Auswirkung auf äußerstesvg-Elemente.Wertetyp:<length> |<percentage>;Standardwert:0;Animierbar:ja

Hinweis:Mit SVG2 sindx,y,width undheightGeometriemerkmale, was bedeutet, dass diese Attribute auch als CSS-Eigenschaften genutzt werden können.

DOM-Schnittstelle

Dieses Element implementiert dieSVGSVGElement-Schnittstelle.

Beispiele

Verschachteltes`svg`-Element

Dieses Beispiel zeigt, dass verschachteltesvg-Elemente dasxmlns-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 dieheight- undwidth-Attribute dessvg-Elements mit dem dynamischen Viewport-Wert60vmin festgelegt, was 60% der Breite oder Höhe des Viewports entspricht, je nachdem, was kleiner ist.

<div>  <iframe       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

Movatterモバイル変換

<svg>

Help improve MDN