SVG/Element/svg

Das svg-Element (für scalable vector graphics) findet sich sowohl in HTML als auch im XML-Dialekt SVG.

Syntax

Start-Tag: notwendig

End-Tag: notwendig

Elternelemente

Darf vorkommen in:
In einem standalone SVG-Dokument: Keine, SVG ist das Wurzelelement

In einem HTML-Dokument darf SVG vorkommen in:

• allen Elementen, die fließenden Inhalt erlauben
• allen Elementen, die Stil-Inhalt erlauben

erlaubte Inhalte

* Animations-Elemente

• Beschreibungs-Elemente
• Container-Elemente
• grafische Elemente
• clipPath, cursor, filter, foreignObject, image, linearGradient, radialGradient, script, style, text, view

Attribute

Name	Inhalt	Standardwert	Bedeutung
version	CDATA
baseProfile	CDATA
x	NUMBER
y	NUMBER
width	NUMBER		Breitenangabe des SVG-Elements
height	NUMBER		Höhenangabe
preserveAspectRatio	CDATA		Angabe des Seitenverhältnisses/Proportion
viewBox	CDATA		Angabe der Größe des Koordinatensystems, in das gezeichnet wird.

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel

<svg width="300" height="200" viewbox="0 0 3 2">
 ...
</svg>

SVG-Elemente können sowohl in HTML als auch als SVG-Dokument neben den Präsentationsattributen weitere Attribute haben:

• x: X-Koordinate der linken, oberen Ecke
• y: Y-Koordinate der linken, oberen Ecke
• width: Breite
• height: Höhe
  Bei der Angabe einer Breite und Höhe wird das SVG im Browser entsprechend skaliert; ohne Festlegung nimmt es den gesamten verfügbaren Raum ein.
• viewBox: neues Rechteck mit fester Pixelbreite, das innerhalb des verfügbaren Viewports des Elternelements beliebig skaliert, verschoben und auch beschnitten werden kann. Wichtig: Im XML-Kontext muss viewBox als CamelCase geschrieben werden, HTML5 ist case-insensitiv.

Empfehlung: Für Standalone-SVGs benötigen Sie noch eine Namensraumangabe:

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  viewBox="0 0 790 230"
>

Siehe auch

• HTML/Elemente/svg
• SVG/Tutorials/Einstieg
  • SVG in Webseiten einbinden
  • SVG in responsiven Webseiten
• SVG/Tutorials/Standalone-SVGs
  • Welche DTDs und Grundstruktur sind in SVG-Dokumenten nötig?
• Verschachteln von svg-Elementen

Weblinks

• W3C: Defining an SVG document fragment: the ‘svg’ element

Verschachteln von svg-Elementen

ein SVG-Element in einer SVG-Grafik

Manchmal ist es nötig, eine SVG-Grafik oder ein Objekt zu verschieben oder zu verkleinern. Hierzu bietet es sich an, ein SVG-Element einzufügen, das mit seinen x- und y-Attributen dann verschoben werden kann.

Beispiel ansehen …

<svg viewBox="0 0 600 400" >
  <defs>
    <!--- Verlauf --->
  </defs>

  <svg x="200" y="100">
    <g id="schild">
      <rect x="20" y="5"  width="180" height="80" rx="10" ry="10"/>
      <text x="105" y="65" >Text</text>
      <path id="stern"
             d="M82,75 C83,76 66,61 63,61 60,61 44,78 42,77 40,75 50,54 49,51 48,49 26,39 27,36 
	        c0,-2 24,0 26,-1 2,-1 4,-24 7,-25 2,0 7,22 9,24 2,1 25,-3 26,0 0,2 -19,14 -20,16 
                0,2 10,23 8,24z"
      />
    </g> 
  </svg>
</svg>

Das g-Element wird innerhalb eines svg-Element verschachtelt und erbt dessen Position.