SVG-Grafiken (direkt eingebettet)

XML-Formate, die sich in der Praxis bereits verbreitet haben, und die das Portfolio möglicher Dokumentdaten sinnvoll ergänzen, können direkt in HTML5 eingebunden werden. Und zwar ohne die XML-typische Namensraumdeklaration. Neben MathML für mathematische Formeln gehört auch das Vektorgrafikformat SVG zu den XML-Formaten, die Sie direkt in HTML einbinden können.

Allerdings ist der Verzicht auf das Namensraumkonzept von XML mit einigen Nachteilen verbunden. So können eingebundene SVG-Grafiken zwar mit dem xmlns-Attribut Namensräume deklarieren, aber vom HTML-Parser werden diese nicht verarbeitet. XML-Prefix-Syntax innerhalb von SVG wird also nicht erkannt. HTML unterscheidet auch nicht zwischen Groß- und Kleinschreibung bei Element- und Attributnamen, SVG als XML-basierte Sprache hingegen wohl. Das ist ein für Browser lösbares Problem, aber grundsätzlich eine unsaubere Lösung.

Wegen dieser und einiger anderer Probleme ist gerade die direkte Einbindung von SVG in HTML5 noch umstritten. Unumstritten ist dagegen die Einbettung von SVG in XHTML über das dafür vorgesehene Namensraumkonzept, sofern die XHTML-Dokumente von XML-Parsern verarbeitet werden. Deshalb sollen hier beide Varianten an Hand eines Beispiels vorgestellt werden.

SVG in HTML5

Sie können in HTML einen Bereich definieren, in dem eine vollständige SVG-Grafik notiert ist.

Beispiel

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Information</title>
</head>
<body>
<h1>Informationsecke</h1>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="140" height="360" fill="#AAAAAA" />
  <rect x="20" y="130" width="100" height="200" fill="#FF8800" />
  <text x="20" y="325" stroke="#880088" 
        font-family="Arial,sans-serif" font-size="15">NFORMATION</text>
  <circle r="50" cx="70" cy="70"  fill="#880088" />
</svg>
</body>
</html>

Erläuterung

Zum besseren Verständnis zeigt das obige Beispiel ein vollständiges HTML-Dokument. Um eine SVG-Grafik zu platzieren, notieren Sie an der gewünschten Stelle im Inhalt des HTML-Dokuments einen Bereich, markiert durch <svg>…</svg>. Innerhalb davon ist SVG-Syntax möglich (siehe dazu weiter unten). Die obige Beispielgrafik definiert ein großes Info-Symbol.


So sollte das Info-Symbol aussehen, wenn der Browser die SVG-Grafik anzeigt

Weitere Hinweise

Halten Sie innerhalb von <svg> und </svg> die Syntax-Regeln von XML-Dokumenten ein. Dazu gehört beispielsweise die Unterscheidung von Groß- und Kleinschreibung und die Notation von Standalone-Elementen wie bei <circle … />.

Referenzinformationen

HTML5 MSIE FFOX4.0 CHROME SAF4.0 OPERA9.0

SVG in XHTML

Sie können in XHTML über das XML-Namensraumkonzept einen Bereich definieren, in dem eine vollständige SVG-Grafik notiert ist. Ein Browser muss, um dies zu verarbeiten, über einen XML-Parser verfügen, und das XHTML-Dokument muss vom Webserver als XML-Dokument ausgeliefert werden.

Beispiel

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="de">
<head>
<title>Information</title>
</head>
<body>
<h1>Informationsecke</h1>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="140" height="360" fill="#AAAAAA" />
  <rect x="20" y="130" width="100" height="200" fill="#FF8800" />
  <text x="20" y="325" stroke="#880088" 
        font-family="Arial,sans-serif" font-size="15">NFORMATION</text>
  <circle r="50" cx="70" cy="70"  fill="#880088" />
</svg>
</body>
</html>

Erläuterung

Es handelt sich um das gleiche Beispiel wie weiter oben. Der Unterschied zum Einbetten in HTML besteht darin, dass das gesamte Dokument mit einer XML-Deklaration beginnt, die sich an XML-Parser richtet. Sowohl das einleitende <html>-Tag als auch das einleitende <svg>-Tag enthalten mit dem xmlns-Attribut eine Namensraum-Deklaration, die es dem XML-Parser erlaubt, die beiden Sprachen auseinanderzuhalten.

Referenzinformationen

XHTML1.0 MSIE FFOX4.0 CHROME SAF4.0 OPERA9.0

Basis-Funktionen von SVG

Einfache SVG-Grafiken, zum Beispiel Balkengrafiken für statistische Verteilungen, lassen sich mit ein paar Grundkenntnissen auch ohne Grafikeditor direkt erzeugen. Deshalb sollen die wichtigsten Gestaltungsfunktionen von SVG hier kurz vorgestellt werden.

Formen zeichnen

Mit SVG können Sie Rechtecke, Kreise, Ellipsen, Polygone (z.B. für Dreiecke, Vielecke, Sterne), Linien, Polylinien (Zickzack-Linien) und Pfade (z.B. für Bezier-Kurven) erstellen. Gezeigt werden hier die ersten fünf dieser Grundformen.

<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="40" y="20" width="200" height="40" rx ="5" ry ="5" />
  <circle cx="140" cy="140" r="60" />
  <ellipse cx="140" cy="240" rx="60" ry="20" />
  <polygon points="40,280 240,280 140,360" />
  <line x1="20" y1="20" x2="20" y2="380" stroke="black" stroke-width="3" />
  <line x1="10" y1="370" x2="240" y2="370" stroke="black" stroke-width="3" />
</svg>

So sieht die Beispielgrafik aus

Alle Elemente für geometrische Grundformen werden in Form von Standalone-Tags notiert, haben also keinen Elementinhalt. Wenn sich Formen auf Grund ihrer Position und Größe überdecken, überdecken später notierte Formen früher notierte. Durch einfaches Umstellen der Reihenfolge können Sie die Überdeckung also beeinflussen.

  • Rechteck
    Mit <rect … /> markieren Sie ein Rechteck.
    Das x-Attribut gibt den Horizontalversatz der linken oberen Ecke des Rechtecks an.
    Das y-Attribut gibt den Vertikalversatz der linken oberen Ecke des Rechtecks an.
    Das width-Attribut gibt die Breite des Rechtecks an.
    Das height-Attribut gibt die Höhe des Rechtecks an.
    Wenn das Rechteck abgerundete Ecken haben soll, können Sie mit dem rx-Attribut die horizontale Abrundung bestimmen, und mit dem ry-Attribut die vertikale Abrundung. Wenn das Rechteck scharfe Ecken haben soll, lassen Sie die Attribute rx und ry einfach weg.
  • Kreis
    Mit <circle … /> markieren Sie einen Kreis.
    Das cx-Attribut gibt den Horizontalversatz des Kreismittelpunktes an.
    Das cy-Attribut gibt den Vertikalversatz des Kreismittelpunktes an.
    Das r-Attribut gibt die Größe des Radius an.
  • Ellipse
    Mit <ellipse … /> markieren Sie eine Ellipse.
    Das cx-Attribut gibt den Horizontalversatz des Ellipsenmittelpunktes an.
    Das cy-Attribut gibt den Vertikalversatz des Ellipsenmittelpunktes an.
    Das rx-Attribut gibt die den horizontalen Radius bzw. die halbe Maximalbreite der Ellipse an.
    Das ry-Attribut gibt die den vertikalen Radius bzw. die halbe Maximalhöhe der Ellipse an.
  • Polygon
    Mit <polygon … /> markieren Sie ein Polygon.
    Das points-Attribut definiert die Eckpunkte des Polygons. Die Wertzuweisung besteht aus beliebig vielen Eckpunktdefinitionen. Die Eckpunktdefinitionen werden durch Leerzeichen getrennt. Jede Eckpunktdefinition besteht aus zwei Werten, die durch ein Komma getrennt werden. Der Wert vor dem Komma ist der Horizontalversatz des Eckpunkts, und der Wert hinter dem Komma der Vertikalversatz des Eckpunkts. Das Polygon wird automatisch geschlossen, indem der letzte Eckpunkt mit dem ersten verbunden wird. Mit drei Eckpunkten wie im Beispiel können Sie ein Dreieck erzeugen.
  • Linie
    Mit <line … /> markieren Sie eine Linie.
    Das x1-Attribut gibt den Horizontalversatz des einen Eckpunkts der Linie an.
    Das y1-Attribut gibt den Vertikalversatz des einen Eckpunkts der Linie an.
    Das x2-Attribut gibt den Horizontalversatz des anderen Eckpunkts der Linie an.
    Das y2-Attribut gibt den Vertikalversatz des anderen Eckpunkts der Linie an.
    Das stroke-Attribut gibt die Linienfarbe an.
    Das stroke-width-Attribut gibt die Linienstärke an.

Bei allen numerischen Angaben von x- und y-Koordinaten können Sie auch bestimmte Maßeinheiten erzwingen. Beispiele: x="2.3cm" oder ry="47mm". Erlaubt sind folgende Angaben:
px für Pixel (Defaulteinheit, wird verwendet, wenn keine andere Maßeinheit angegeben ist)
pt für Punkt (Maßeinheit aus der Typografie)
pc für Pica (Maßeinheit aus der Typografie)
mm für Millimeter
cm für Zentimeter
in für Inch (Zoll)
em relative Maßeinheit: aktuelle Schriftgröße
ex relative Maßeinheit: Höhe des Kleinbuchstabens x in der aktuellen Schriftgröße

Umrisse und Füllungen

Sie können Formen einfarbig füllen. Ferner können Sie die Umrisse der Formen gestalten.

<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="40" y="20" width="200" height="40" rx ="5" ry ="5" fill="#DD6600" />
  <circle cx="140" cy="140" r="60" stroke="rgb(50,50,200)" 
          stroke-width="6" fill="rgb(100%,80%,10%)" />
  <polygon points="40,220 240,220 140,360" fill="powderblue" />
</svg>

So sieht die Beispielgrafik aus

Mit dem Attribut fill definieren Sie Füllfarben. Mit dem Attribut stroke können Sie die Umrissfarbe bestimmen, und mit stroke-width die Umrissstärke.

Bei Farbangaben gelten die gleichen Regeln wie für Farbwerte und Farbnamen in CSS. Die Bedeutung von Angaben wie #DD6600, rgb(50,50,200), rgb(100%,80%,10%) oder powderblue wird dort erläutert.

Farbverläufe

Sie können gradiente oder radiale Farbverläufe bestimmen. Diese können Sie auf Formen anwenden.

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="lr" x1="0%" x2="100%">
      <stop offset="0%" stop-color="gray" />
      <stop offset="100%" stop-color="white" stop-opacity="20%" />
    </linearGradient>
    <linearGradient id="ou" x1="0%" x2="0%" y1="0%" y2="100%">
      <stop offset="0%" stop-color="gray" stop-opacity="70%" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
    <linearGradient id="olur" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="gray" stop-opacity="50%" />
      <stop offset="100%" stop-color="white" stop-opacity="50%" />
    </linearGradient>
    <radialGradient id="radial">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="gray" />
   </radialGradient>
  </defs>  
  <rect x="20" y="20" width="250" height="100" fill="url(#lr)" />
  <rect x="20" y="140" width="250" height="100" fill="url(#ou)" />
  <rect x="20" y="260" width="250" height="100" fill="url(#olur)" />
  <circle cx="140" cy="480" r="100" fill="url(#radial)" />
</svg>

So sieht die Beispielgrafik aus

Die Farbverläufe werden separat von den Formen zu Beginn des SVG-Dokument in einem Bereich definiert, der durch <def>…</def> markiert wird. Dieser Bereich dient dazu, Gestaltungselemente zu definieren, die dannn von Formen referenziert werden können.

Mit <linearGradient>…</linearGradient> definieren Sie einen linearen Farbverlauf, also zum Beispiel von links nach rechts oder von oben nach unten. Mit <radialGradient>…</radialGradient> definieren Sie einen radialen Farbverlauf, also beispielsweise vom Mittelpunkt zu den Rändern hin.

In den Start-Tags von <linearGradient> und <radialGradient> notieren Sie jeweils ein id-Attribut. Diesen Attributen weisen Sie jeweils einen frei wählbaren Name zu. Jeder id-Name darf innerhalb der SVG-Grafik nur einmal vorkommen. Um auch gleich für den Script-Zugriff gerüstet zu sein, sollte der Name nur aus Buchstaben, Ziffern und Unterstrich bestehen.

Mit Attributen wie x1, x2, y1 und y2 definieren Sie Eckpunkte für den Farbverlauf. Es ist ratsam, dabei Prozentangaben zu verwenden. So bleiben die Verlaufsdefinitionen auf unterschiedliche Formen anwendbar, unabhängig von deren tatsächlichen Ausmaßen.

Die Elemente linearGradient und radialGradient haben einen Elementinhalt, der aus stop-Elementen besteht. Mit diesen Elementen bestimmen Sie eine Farbe (Attribut stop-color), deren Position (Attribut stop-offset) und ihre Deckkraft (Attribut stop-opacity).

Um einen so definierten Farbverlauf auf eine Form anzuwenden, notieren Sie in der gewünschten Form, also einem Element wie z.B. <rect… /> oder <circle … />, ein fill-Attribut. Diesem Attribut weisen Sie jedoch keine Farbe zu, sondern den Ausdruck url(#id_Name), wobei id_Name (ohne das Gatterzeichen) ein Name ist, den Sie im id-Attribut eines linearGradient- oder radialGradient-Elements vergeben haben. Sie können ein linearGradient- oder radialGradient-Element beliebig vielen Formen-Elementen zuweisen.

Text hinzufügen

Sie können Text innerhalb der Grafik positionieren und formatieren.

<svg xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="30" fill="#880088" font-size="28" 
        font-family="Arial">
     Der Hase im Pfeffer
  </text>
  <text x="20" y="70" fill="rgb(0,176,0)" font-size="36" 
        font-family="Trebuchet MS, serif">
     Des Pudels Kern
  </text>
  <text x="2" y="-300" fill="red" font-size="28" font-family="Arial" 
        font-weight="bold" transform="rotate(90,0,0)">
     Tiere
  </text>
  <text x="-68" y="340" fill="red" font-size="14" font-family="Arial" 
        font-weight="bold" transform="rotate(270,0,0)">
     Wahrheit
  </text>
</svg>

So sieht die Beispielgrafik aus

Text wird durch <text>…</text> markiert. Elementinhalt ist der Text, der angezeigt werden soll. Im einleitenden <text>-Tag erhält der Text seine Eigenschaften.

Mit den Attributen x und y werden Horizontalversatz und Vertikalversatz der Textanfangsposition angegeben. Beachten Sie beim y-Wert, dass die Basislinie des Textes dafür relevant ist, der Text also je nach Schriftgröße mehr oder weniger weiter oben beginnt.

Mit font-family können Sie eine Schriftart oder eine Reihenfolge gewünschter Schriftarten bestimmen. Mit font-size legen Sie die Schriftgröße fest. Mit font-weight="bold" können Sie Fettschrift erzwingen. Es gibt weitere Eigenschaften zur Schriftformatierung. Diese entsprechen denen von CSS. Es ist sogar möglich, die Eigenschaften direkt in HTML möglich mit Hilfe eines style-Attributs und CSS-Syntax zu notieren, also etwa <text style="font-size:14px; font-family:Arial,sans-serif; font-weight:bold">. Weitere Formatierungseigenschaften finden Sie im Handbuchabschnitt über CSS-Eigenschaften für Schriftformatierung.

Mit dem fill-Attribut legen Sie die Schriftfarbe fest. Mit einem stroke-Attribut können Sie außerdem eine Kontur/Umrissfarbe bestimmen.

Durch transform="rotate(…)" können Sie Text (und übrigens auch Formen wie Rechtecke) drehen. Innerhalb der Klammern bei rotate(…) werden drei Zahlen notiert. Die erste ist der Drehwinkel. Um Text senkrecht zu stellen, benutzen Sie 90 (für oben nach unten) oder 270 (für unten nach oben). Die zweite Zahl ist der X-Drehpunkt, die dritte der Y-Drehpunkt. Wenn Sie diesbezüglich keine besonderen Angaben machen möchten, notieren Sie 0. Beachten Sie, dass die Positionsangaben, die bei den Attributen x und y notiert werden, durch eine Rotation eine andere Bedeutung erhalten.

 


Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.

Sofern nicht anders angegeben, steht der Inhalt dieser Seite unter Lizenz Creative Commons Attribution-ShareAlike 3.0 License