SVG/Element/svg

Aus SELFHTML-Wiki
< SVG‎ | Element(Weitergeleitet von Grundgerüst eines XML-Dokuments)
Wechseln zu: Navigation, Suche

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

Weblinks

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.