<svg>

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das <svg>-Element von SVG ist ein Container, der ein neues Koordinatensystem und einen neuen Viewport definiert. Es wird als äußerstes Element von SVG-Dokumenten verwendet, kann aber auch dazu dienen, 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 Attribut xmlns ist nur für das äußerste svg-Element von SVG-Dokumenten oder innerhalb von HTML-Dokumenten mit XML-Serialisierung erforderlich. Für innere svg-Elemente oder innerhalb von HTML-Dokumenten mit HTML-Serialisierung ist es nicht erforderlich.

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

Hinweis: Seit SVG2 sind x, y, width und height Geometrie-Eigenschaften. Das bedeutet, dass diese Attribute auch als CSS-Eigenschaften verwendet werden können.

DOM-Schnittstelle

Dieses Element implementiert die Schnittstelle SVGSVGElement.

Beispiele

Verschachteltes `svg`-Element

Dieses Beispiel zeigt, dass verschachtelte svg-Elemente das Attribut xmlns 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>

Dynamische Viewport-Einheiten verwenden

In diesem Beispiel werden die Attribute height und width des svg-Elements mit dem dynamischen Viewport-Wert 60vmin festgelegt. Das entspricht 60 % der Breite oder Höhe des Viewports, je nachdem, welcher Wert 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 Abmessungen des iframes zu ändern, ziehen Sie den gepunkteten roten Rahmen an der unteren rechten Ecke.

Spezifikationen

Spezifikation
Scalable Vector Graphics (SVG) 2 # NewDocument

Browser-Kompatibilität

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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