<svg> - 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

Kategorien	Containerelement, Strukturelement
Erlaubter Inhalt	Beliebige Anzahl der folgenden Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente Formelemente Strukturelemente Farbverlaufselemente `<a>`, `<altGlyphDef>`, `<clipPath>`, `<color-profile>`, `<cursor>`, `<filter>`, `<font>`, `<font-face>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<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