<svg>

Springen zu:
  1. Beispiel
  2. Attribute
  3. DOM Interface
  4. Nutzungskontext
  5. Spezifikationen
  6. Browserkompatibilität

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Das svg Element ist ein Kontainer der ein neues Koordinatensystem und ein Darstellungsfeld definiert. Es wird verwendet als das äußerste Element jedes SVG Dokuments, aber kann auch verwendet werden um SVG Fragmente innerhalb von jedem SVG oder 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 AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome 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 JaEdge Mobile 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 ?
baseProfile
Veraltet
Chrome Vollständige Unterstützung JaEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
contentScriptType
Veraltet
Chrome Keine Unterstützung NeinEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
contentStyleType
Veraltet
Chrome Keine Unterstützung NeinEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
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 JaEdge Mobile 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 ?
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 JaEdge Mobile 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 ?
version
Veraltet
Chrome Vollständige Unterstützung JaEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
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 JaEdge Mobile 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 ?
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 JaEdge Mobile 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 ?
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 JaEdge Mobile 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 ?
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 JaEdge Mobile 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 ?
zoomAndPanChrome Vollständige Unterstützung JaEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

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.

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: Dschubba, mattenmad
Zuletzt aktualisiert von: Dschubba,