Der Inhalt dieser Seite wurde von der Community übersetzt, jedoch wird er nicht mehr aktiv gepflegt und kann daher veraltet sein. Wenn du mithelfen möchtest, kannst du hier herausfinden wie deaktivierte Übersetzungen reaktiviert werden können.

<svg>

Das svg Element ist ein Container, der ein neues Koordinatensystem und ein Darstellungsfeld definiert. Es wird als das äußerste Element jedes SVG Dokuments verwendet, aber kann auch dazu dienen SVG Fragmente innerhalb von einem anderen SVG oder einem HTML Dokument einzubetten.

Anmerkung: Das xmlns Attribute wird nur benötigt wenn das svg-Element das äußerste Element eines SVG Dokuments ist.

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

  <svg viewBox="0 0 10 10" x="200" width="100">
    <circle cx="5" cy="5" r="4" stroke="red" fill="grey" />
  </svg>
</svg>

Beispiel

Berücksichtige das folgende SVG Bild (dies stellt die italienische Nationalflagge dar):

<svg xmlns="http://www.w3.org/2000/svg"
     width="150" height="100" viewBox="0 0 3 2">

  <rect width="1" height="2" x="0" fill="#008d46" />
  <rect width="1" height="2" x="1" fill="#ffffff" />
  <rect width="1" height="2" x="2" fill="#d2232c" />
</svg>

Es könnt folgendermaßen in ein HTML5 Dokument inkludiert werden:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>HTML/SVG Example</title>
</head>

<body>

  <svg width="150" height="100" viewBox="0 0 3 2">
    <rect width="1" height="2" x="0" fill="#008d46" />
    <rect width="1" height="2" x="1" fill="#ffffff" />
    <rect width="1" height="2" x="2" fill="#d2232c" />
  </svg>

</body>
</html>

Attribute

Globale Attribute

Spezifische Attribute

DOM Interface

Dieses Element implementiert das SVGSVGElement Interface.

Nutzungskontext

KategorienContainerelement, Strukturelement
Erlaubter InhaltBeliebige Anzahl der folgenden Elemente, in beliebiger Reihenfolge:
Animationselemente
Beschreibende Elemente
Formelemente
Strukturelemente
Farbverlaufselemente
<a> (en-US), <altGlyphDef> (en-US), <clipPath> (en-US), <color-profile>, <cursor> (en-US), <filter> (en-US), <font> (en-US), <font-face> (en-US), <foreignObject>, <image> (en-US), <marker> (en-US), <mask> (en-US), <pattern> (en-US), <script> (en-US), <style> (en-US), <switch> (en-US), <text> (en-US), <view>

Spezifikationen

Spezifikation Status Kommentar
Scalable Vector Graphics (SVG) 2
Die Definition von '<svg>' in dieser Spezifikation.		 Anwärter Empfehlung
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Die Definition von '<svg>' in dieser Spezifikation.		 Empfehlung Initial definition

Browserkompatibilität

BCD tables only load in the browser