<svg>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das <svg> SVG Element ist ein Container, der ein neues Koordinatensystem und einen Viewport definiert. Es wird als äußerstes Element von SVG-Dokumenten verwendet, kann aber auch verwendet werden, um ein SVG-Fragment innerhalb eines SVG- oder HTML-Dokuments einzubetten.

Hinweis: Das xmlns Attribut ist nur beim ä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.

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 sind die Attribute height und width im svg Element 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 gestrichelten roten Rahmen von der unteren rechten Ecke aus zu vergrößern oder zu verkleinern.

Attribute

baseProfile Veraltet: Das minimale 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 verzerrt 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 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: Ab SVG2 sind x, y, width und height Geometrie-Eigenschaften, was bedeutet, dass diese Attribute auch als CSS-Eigenschaften verwendet werden können.

Verwendungszusammenhang

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

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # NewDocument

Browser-Kompatibilität

BCD tables only load in the browser