CSS, HTML und Javascript mit {stil}

Tutorial: SVG in HTML

SVG Tutorial

SVG (Scalable Vector Graphics) ist Vektorgrafik mit Tags für Rechtecke, Kreise, Linien, Polygone, hat Elemente für Pfade, Text und Animationen und kann Rastergrafik (Bitmap- oder Pixel-Bilder) enthalten. SVG ist Klartext wie HTML, lässt sich mit Anwendungen wie Inkscape und Adobe Illustrator oder programmatisch mit PHP erzeugen, mit CSS formatieren und mit Javascript dynamisch ändern.

1999 hat Adobe dem W3C SVG als Standard für Vektorgrafik auf Webseiten vorgeschlagen. 2001 wurde SVG 1.0 vom W3C verabschiedet, aber erst mit dem Ende von IE8 rendern alle Browser SVG ohne Plugin in HTML5-Seiten.

SVG-Anwendungen

LesenSchreibenRechnenNaturwissenschaftenSozialkundeKombo: Lesen,Schreiben,NaturwissenschaftenKombo: Lesen,Rechnen,Naturwissensch.10075502509088888986908950505050505050
SVG-Icons und Icon-Fonts
SVG wird in der Kartografie eingesetzt, zur Visualisierung von Graphen und für Illustrationen aller Art: von der technischen Zeichnung mit hoher Exaktheit bis zum Logo und zum Icon.

Gerade bei Icons, die fast immer aufwändig in Icon-Fonts umgesetzt werden, ist der direkte Einsatz von SVG-Icons einfacher und effektiver.

Größe, Farben und Filter wie Schatten der Icons lassen sich bei SVG-Icons genauso steuern wie bei Schriften, title- und desc-Tag in SVG-Grafiken verbessern die Accessibility gegenüber Icon-Fonts. Ob Icon-Fonts oder SVG-Icons eingesetzt werden, hängt im Wesentlich von der Frage ab, ob alte Browser wie IE8 noch unterstützt werden müssen.

SVG ist offen und plattformunabhängig und weil SVG mit XML geschrieben wird, sind SVG-Grafiken durchsuchbar.

SVG kann in Adobe Illustrator, mit Corel und online mit SVG-edit erzeugt werden. Inkscape ist ein Open-Source-Programm für SVG mit grafischer Oberfläche für Mac, PC und Unix. Wer SVG »von Hand« schreibt oder ändern möchte, kann die Änderungen live in der Vorschau von Barebone BBEdit sehen.

Adobe Photoshop CC speichert Grafiken als SVG.

SVG Syntax

SVG-Tags werden wie HTML in spitze Klammern geschrieben, müssen geschlossen werden und können Attribute wie id und class, width und fill enthalten.

Anders als HTML legt SVG Wert auf korrekte Schreibweise und verzeiht keinen Fehler.

              viewBox-Attribut -----+
                                    |
                                    |
<svg width="100%" height="100%" viewBox="0 0 500 241">
   <title>SVG für Grafik, Icons und UI-Elemente</title>

   <circle cx="" cy="" r="" fill="" style="" id="" />
      |                 |             |       |
      +-- Element Name  |             +--     +-- style- und id-Attribut 
                        |
                        +-- individuelle Attribute
   …
</svg>

Anstelle des alt-Tags bei Bildern beschreibt ein title-Tag das Bild oder die Grafik für Screenreader. Das title-Tag muss das erste Kind in einem SVG-Container (svg, g, a, pattern, … ) sein. Sein Inhalt wird nicht angezeigt.

Neben dem title-Tag verbessert ein desc-Tag mit einer ausführlichen Beschreibung die Wiedergabe des SVG-Elements in den Screenreadern.

SVG Namespace

Mit einem html5-Doctype werden die Attribute für den Namespace der SVG-Editoren nicht benötigt:

  • xmlns:svg=­"http://www.w3.org/­2000/svg"
  • xmlns:inkscape=­"http://www.inkscape.org/­namespaces/inkscape"
  • xmlns:dc=­"http://purl.org/dc/­elements/1.1/"
  • xmlns:cc=­"http://creativecommons.org/ns#"
  • xmlns:rdf=­"http://www.w3.org/1999/­02/22-rdf-syntax-ns#"

Das SVG-Tag kann an jeder beliebigen Stelle im HTML-Dokument innerhalb des body-Tags sitzen.

SVG-Tag in HTML

<!DOCTYPE html>
<html lang="de">
…
<body>
<svg width="100%" height="100%" viewBox="0 0 560 110">
   <circle cx="200" cy="50" r="40" … />
   <rect x="100" y="10" width="80" height="60" … />
</svg>
</body>

Kleine Grafiken können direkt in das HTML-Markup eingesetzt werden.

SVG-Tag

Bilder in SVG-Grafik laden
<img src="bilder-in-svg.svg" width="700" height="172" alt="Bilder in SVG-Grafik laden" />

SVG kann – ähnlich wie EPS und TIFF – sowohl Vektorgrafik als auch Bitmap- oder Pixelbilder enthalten. Größere SVG-Bilder werden genauso mit einem img-Tag eingebunden wie JPG oder PNG.

Neben dem direkten Einbinden in den HTML-Quellcode und dem Einbinden in einem img-Tag kann SVG in einem iframe- oder einem object-Tag geladen werden.

SVG für mobile Geräte

Mit den mobilen Geräten wächst der Anspruch an die Grafik. Auf der einen Seite sollen die Bilder für die mobilen Geräte weniger Last mitbringen, auf der anderen Seite sind die Monitore immer häufiger Retina Displays.

Statt eine Grafik als PNG in verschiedenen Auflösungen auszuliefern, bringt SVG optimale Grafik für jede Monitorgröße zum kleinen Preis. SVG-Grafiken sind fast immer kleiner als die PNG-Bitmaps, die aus der Grafik erzeugt werden.

Als Vektorgrafik lässt sich SVG an die Größe des Viewports für responsive Webseiten anpassen. Das wichtigste Attribut für die flexible Größe von SVG ist das viewBox-Attribut zusammen mit width="100%" und height="100%".

<svg width="100%" height="100%" viewBox="0 0 500 110" xmlns="http://www.w3.org/2000/svg">
</svg>

Das würde im Grunde genommen schon reichen, um eine SVG-Grafik in eine responsive Webseite zu setzen:

<style>
.svgbox { width: 100%; }
.svgbox svg { width: 100%; height: auto; }
</style>

<div class="svgbox">
   <svg width="100%" height="100%" viewBox="0 0 300 300">
      …
   </svg>
</div>

Die modernen Browser können die Höhe der Grafik aus dem Seitenverhältnis im viewBox-Attribut berechnen und die SVG-Grafik an den umfassenden Block anpassen.

Dem stehen die älteren Version von Internet Explorer entgegen: Erst Microsoft Edge beherrscht diesen Rechentrick. IE9, IE10 und IE11 hingegen setzen eine Vorgabe ein – sie geben der SVG-Grafik eine Höhe von 150px und passen die Breite entsprechend den Seitenverhältnissen an. So lange die älteren Internet Explorer noch aktiv sind, müssen umständliche CSS-Regeln das SVG an seinen umfassenden Block anpassen.