Mitgliederversammlung 2018


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 8.9.2018 um 10:00 Uhr in Dortmund statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite https://forum.selfhtml.org/events/3.

Interessierte Gäste sind gern gesehen.

SVG/Elemente/svg

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

Das Element svg (für scalable vector graphics) findet sich sowohl in HTML5 als auch im XML-Dialekt SVG. 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:

Attribute[Bearbeiten]

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

  • externalResourcesRequired: legt fest, ob externe Ressourcen verwendet werden. (obsolet)
  • x: X-Koordinate der linken, oberen Ecke
  • y: X-Koordinate der linken, oberen Ecke
  • width: Breite
  • height: Höhe
  • viewBox: neues Rechteck mit fester Pixelbreite, das innerhalb des verfügbaren Viewports des Elternelements beliebig skaliert, verschoben und auch beschnitten werden kann.
    Beachten Sie: Im XML-Kontext wird das Attribut in CamelCase geschrieben, HTML5 ist case-insensitiv.
  • preserveAspectRatio: legt Seitenverhältnis fest
  • version: Angabe einer Version
  • baseProfile
  • contentScriptType: obsolet
  • contentStyleType: obsolet

Grundgerüst eines XML-Dokuments[Bearbeiten]

SVG-Grafiken können als eigenständige Datei (standalone) gespeichert werden. Dabei müssen dann in einer Dokumenttyp-Deklaration (kurz:DTD) Definitionen und Einstellungen zur Verarbeitung des Dokuments festgelegt werden.

Prolog eines XML-Dokuments[Bearbeiten]

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)
Beispiel: XML-Prolog mit XML-Deklaration
<?xml version="1.0" encoding="utf-8" standalone="yes"? >
<svg ...>
  <!-- Inhalt -->
</svg>
Das SVG-Dokument enthält als erste Zeile eine XML-Deklaration, die Version, Zeichenkodierung und standalone-Attribut deklariert.
Die Deklaration enthält keinen schließenden Tag am Ende des Dokuments.
Empfehlung: Beide Attribute können im Regelfall weggelassen werden.

Doctype[Bearbeiten]

Im Beispiel folgt eine Doctype-Deklaration.

Beispiel: Angabe eines Doctypes
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
Beachten Sie: In SVG 2 können Sie auf die Angabe eines doctypes verzichten!

Namensraumangabe[Bearbeiten]

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.

Beispiel: Namensraumdeklaration
<?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>
Im Beispiel werden neben XML-Deklaration und Doctype noch zwei Namensräume eingebunden:
  • xmlns:xlink="http://www.w3.org/2000/svg" ist der Standardnamensraum für SVG
  • xmlns:xlink="http://www.w3.org/1999/xlink": Da XML/XLink ein eigener Dialekt ist, muss auch hierfür ein Namensraum angegeben werden.
    Beachten Sie: Diese Namensraumangabe ist nicht nur für externe Links, sondern auch für das Referenzieren von Verläufen, Mustern und Beschneidungen nötig.
Empfehlung: In HTML5-Dokumenten können Sie die Angabe eines Namensraums weglassen.

Verschachteln von svg-Elementen[Bearbeiten]

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]