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