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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
svgChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 1.5IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 8Safari Vollständige Unterstützung 3WebView Android Vollständige Unterstützung 3Chrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 3Samsung Internet Android Vollständige Unterstützung Ja
baseProfile
Veraltet
Chrome Vollständige Unterstützung JaEdge ? Firefox ? IE ? Opera Vollständige Unterstützung JaSafari ? WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Vollständige Unterstützung Ja
contentScriptType
Veraltet
Chrome Keine Unterstützung NeinEdge ? Firefox ? IE ? Opera Keine Unterstützung NeinSafari ? WebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Keine Unterstützung Nein
contentStyleType
Veraltet
Chrome Keine Unterstützung NeinEdge ? Firefox ? IE ? Opera Keine Unterstützung NeinSafari ? WebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Keine Unterstützung Nein
heightChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 1.5IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 8Safari Vollständige Unterstützung 3WebView Android Vollständige Unterstützung 3Chrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 3Samsung Internet Android Vollständige Unterstützung Ja
preserveAspectRatioChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 1.5IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 8Safari Vollständige Unterstützung 3WebView Android Vollständige Unterstützung 3Chrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 3Samsung Internet Android Vollständige Unterstützung Ja
version
Veraltet
Chrome Vollständige Unterstützung JaEdge ? Firefox ? IE ? Opera Vollständige Unterstützung JaSafari ? WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Vollständige Unterstützung Ja
viewBoxChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 1.5IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 8Safari Vollständige Unterstützung 3WebView Android Vollständige Unterstützung 3Chrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 3Samsung Internet Android Vollständige Unterstützung Ja
widthChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 1.5IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 8Safari Vollständige Unterstützung 3WebView Android Vollständige Unterstützung 3Chrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 3Samsung Internet Android Vollständige Unterstützung Ja
xChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 1.5IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 8Safari Vollständige Unterstützung 3WebView Android Vollständige Unterstützung 3Chrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 3Samsung Internet Android Vollständige Unterstützung Ja
yChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 1.5IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 8Safari Vollständige Unterstützung 3WebView Android Vollständige Unterstützung 3Chrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 3Samsung Internet Android Vollständige Unterstützung Ja
zoomAndPanChrome Vollständige Unterstützung JaEdge ? Firefox ? IE ? Opera Vollständige Unterstützung JaSafari ? WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Vollständige Unterstützung Ja

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
Verwandte Themen
  1. <svg>
  2. SVG Elements
    1. A
      1. <a>
      2. <altGlyph>
      3. <altGlyphDef>
      4. <altGlyphItem>
      5. <animate>
      6. <animateColor>
      7. <animateMotion>
      8. <animateTransform>
    2. B-C
      1. <circle>
      2. <clipPath>
      3. <color-profile>
      4. <cursor>
    3. D
      1. <defs>
      2. <desc>
    4. E
      1. <ellipse>
    5. F
      1. <feBlend>
      2. <feColorMatrix>
      3. <feComponentTransfer>
      4. <feComposite>
      5. <feConvolveMatrix>
      6. <feDiffuseLighting>
      7. <feDisplacementMap>
      8. <feDistantLight>
      9. <feFlood>
      10. <feFuncA>
      11. <feFuncB>
      12. <feFuncG>
      13. <feFuncR>
      14. <feGaussianBlur>
      15. <feImage>
      16. <feMerge>
      17. <feMergeNode>
      18. <feMorphology>
      19. <feOffset>
      20. <fePointLight>
      21. <feSpecularLighting>
      22. <feSpotLight>
      23. <feTile>
      24. <feTurbulence>
      25. <filter>
      26. <font>
      27. <font-face>
      28. <font-face-format>
      29. <font-face-name>
      30. <font-face-src>
      31. <font-face-uri>
      32. <foreignObject>
    6. G
      1. <g>
      2. <glyph>
      3. <glyphRef>
    7. H
      1. <hkern>
    8. I
      1. <image>
    9. J-L
      1. <line>
      2. <linearGradient>
    10. M
      1. <marker>
      2. <mask>
      3. <metadata>
      4. <missing-glyph>
      5. <mpath>
    11. N-P
      1. <path>
      2. <pattern>
      3. <polygon>
      4. <polyline>
    12. Q-R
      1. <radialGradient>
      2. <rect>
    13. S
      1. <script>
      2. <set>
      3. <stop>
      4. <style>
      5. <svg>
      6. <switch>
      7. <symbol>
    14. T
      1. <text>
      2. <textPath>
      3. <title>
      4. <tref>
      5. <tspan>
    15. U
      1. <use>
    16. V-Z
      1. <view>
      2. <vkern>