SVG/Elemente/svg

Aus SELFHTML-Wiki
< SVG‎ | Elemente
Wechseln zu: Navigation, Suche

Die vorliegende Seite behandelt das SVG-Element svg und besonders eigene Dokumente im SVG-Format.

Informationen über das HTML-Element svg und die Einbindung in HTML5-Seiten finden Sie hier:

SVG als XML-Dokument[Bearbeiten]

Prolog eines XML-Dokuments[Bearbeiten]

SVG-Grafiken können als eigenständige Datei gespeichert werden.

Beispiel
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

 <!-- Inhalt -->

</svg>

Dazu benötigen Sie im Prolog eine XML-Deklaration. Sie kann folgende Attribute haben:

  • encoding: Angabe eines Zeichensatzes (Standardwert ist utf-8)
  • standalone: yes, no (Standardwert: no)

Beide Attribute können im Regelfall weggelassen werden.


Im Beispiel folgt eine Doctype-Deklaration.

Beachten Sie: In SVG 2 können Sie auf die Angabe eines doctypes verzichten!


Das SVG-Tag wird durch eine Angabe eines Namensraums erweitert. Mit dem Attribut xmlns wird festgelegt, welcher XML-Dialekt vom Browser interpretiert werden soll. So könnte es in einer Webseite, die aus XHTML und SVG besteht, zu Namenskonflikten kommen, da beide ein a-Element als Verweis kennen. Standardnamensraum für SVG ist "http://www.w3.org/2000/svg".

Da XML/XLink ein eigener Dialekt ist, muss auch hierfür ein Namensraum angegeben werden: (xmlns:xlink="http://www.w3.org/1999/xlink").

Empfehlung: In HTML5-Dokumenten können Sie die Angabe eines Namensraums weglassen.

ein SVG-Element in einer SVG-Grafik[Bearbeiten]

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.

view[Bearbeiten]

Mit dem View-Element können Sie für eine SVG-Grafik oder ein durch einen Fragmentbezeichner (fragment-identifier) definierten Teilbereich eine alternative Ansicht festlegen.

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Da das View-Element nicht gerendert wird, sollte es im Definitionsabschnitt festgelegt und dann innerhalb eines img-Element im HTML oder über das SVG-Element aufgerufen werden.

Folgende Attribute sind möglich:

  • viewBox: legt ein neues Koordinatensystem fest. (Damit lassen sich SVG-Grafiken responsiv skalieren.)
  • preserveAspectRatio: legt das Seitenverhältnis fest
  • zoomAndPan: legt fest, ob Dokument gezoomt werden kann
  • viewTarget: gibt einen Fragmentbezeichner an, der als Zentrum des Bildes verwendet werden soll.
Beispiel
<defs>
  <view id='warenkorb-icon' viewBox='64 0 32 32' />
</defs>

<img src='icons.svg#warenkorb-icon alt="Warenkorb Icon"/>
Das Warenkorb-Icon wird mit dem view-Element passend skaliert und dann im img referenziert.


Weblinks[Bearbeiten]