SVG – Vektorgrafiken im Web nutzen

In Webseiten kannst Du nicht nur mit Pixelgrafik, also beispielsweise JPEG, PNG oder WebP arbeiten, es gibt auch andere Dateiformate wie zum Beispiel Canvas oder SVG.

In diesem Artikel geht es um SVG. Aber zunächst möchte ich einen Vergleich mit einer ähnlichen Technik, nämlich Canvas ziehen: Mit Canvas kannst du per Javascript Objekte in einer Zeichenfläche erzeugen, du kannst Rechtecke, Polygone, Pfade, Kurven und ähnliches zeichnen. Diese Grafik wird im Webbrowser allerdings als Bitmap angezeigt, im Gegensatz zu SVG hast Du bei Canvas also keine skalierbare Vektorgrafik. Allerdings ist Canvas Hardware-beschleunigt und kann schneller gerendert, also auf den Bildschirm gezeichnet werden. Barrierefrei ist ein solches Canvas-Element nicht, weil ein Screenreader beispielsweise Text in einer Bitmap Grafik nicht erkennen kann.
Mehr zu Canvas findest Du auf https://www.w3schools.com/html/html5_canvas.asp. 

Anders sieht es bei SVG aus, SVG steht für „Scalable Vector Graphic“ wir haben es hier, wie der Name schon andeutet, mit Vektorgrafik zu tun. Der Vorteil von Vektorgrafik ist, dass sie beliebig skalierbar ist, Du kannst Dich also rein Zoomen ohne dass die Grafik unscharf wird und Vektorgrafik-Dateien sind in der Regel kleiner als Pixelgrafik was sich positiv bei der Ladezeit unserer Webseiten bemerkbar macht.

Mit SVG kann man Rechtecke, Linien, Kreise oder Polygone zeichnen. SVG kann Text oder Animationen enthalten und Du kannst in Inline-SVG Dateien sogar Rastergrafik, also Pixelbilder integrieren. 
SVG-Grafiken werden mit Hilfe von Text beschrieben, genau genommen mit Hilfe von XML. 
Sie können per CSS gestylt werden. Zumindest, wenn du ein Inline-SVG hast, kannst Du es per CSS stylen, bei externen SVG-Dateien geht das Styling per CSS hingegen nicht. 
Du kannst SVG-Grafiken direkt in HTML einbinden, aber eine SVG-Grafik kann auch als externe Datei per img-Tag in Webseiten eingebaut werden. Wenn Du eine externe SVG-Datei in deine Webseite einbinden willst, geht das wie gewohnt über das img-Element:

<img src="/images/logo.svg" alt="Logo" />

Eine andere Möglichkeit eine SVG-Grafik zu nutzen, wäre sie inline in HTML zu erstellen. Das bietet einige Vorteile. Lass uns ein entsprechendes Beispiel analysieren:

    <svg>
        <circle r="50" cx="150" cy="100" />
        <!-- Das Attribut „r“ definiert den Radius des Kreises. Die Attribute „cx“ und „cy“ definieren die x- und y-Koordinaten des Kreismittelpunkts. -->
    </svg>

Zunächst haben wir das svg-Element selbst, das in sich geschlossen wird. Dort hinein zeichne ich einen Kreis mit dem Element „circle“.
Das Element circle erstellt einen Kreis. Damit wir den auch im Webbrowser sehen können, müssen wir diesen Element circle noch weitere Attribute zuweisen.
Das erste ist das Attribut „r“ und bedeutet Radius. Außerdem brauche ich noch die Angabe, wo der Mittelpunkt des Kreises stehen soll, das definiere ich mit den Attributen „cx“ und „cy“.
In html bist du es vielleicht gewohnt, ein in sich selbst schließendes Tag wie z.B. <hr> oder <br>
nicht mit einem Slash zu schließen. Das ist hier bei dem Element circle aber anders, wir schreiben nämlich SVG nicht mit HTML sondern XML.

Natürlich gibt es außer Kreisen noch mehr Objekte, die sich mit SVG erstellen lassen. Einen guten Überblick über alle Elemente, die Dir in SVG zur Verfügung stehen, bekommst du z.B. bei W3schools: https://www.w3schools.com/graphics/svg_intro.asp 

Die Viewbox

An dieser Stelle nochmal ein paar Worte zum Thema viewbox: Sie wird mit vier Angaben definiert; die ersten beiden bestimmen die x und y Koordinate, die zwei weiteren Angaben beziehen sich auf width und height also die Breite und die Höhe der viewbox. 
Der Viewport, den ich mit width und height angeben kann, bestimmt die Größe des sichtbaren Bereichs meiner SVG Grafik. Die Viewbox hingegen bestimmt, was mir innerhalb dieses Bereiches angezeigt wird. Mit der Viewbox kann ich in meine Zeichnung rein oder rauszoomen oder sie innerhalb des sichtbaren Bereiches verschieben. Ich kann das Koordinatensystem der Viewbox verändern, das sind die ersten beiden Werte. Ich kann für die Koordinaten bespielsweise einen negativen Wert eingeben, was die Grafik selber dann nach rechts oder nach unten verschiebt. Ich kann auch die dritten und vierten Werte der Viewbox-Angabe manipulieren und damit bestimmen, ob ich mich aus der SVG Grafik rein oder raus zoome.
Also, die Angaben für width und height, falls ich sie denn überhaupt vergeben habe, legen fest, wie die SVG Grafik auf der Seite angezeigt wird und welchen Platz sie auf der Seite hat. Die Angabe der Viewbox hingegen definiert, wie die Grafik innerhalb dieses sichtbaren Bereiches angezeigt werden soll. Sehr schön kann man das im Video von Kevin Powell mit dem Namen “What are SVG viewport and view box?“ sehen, siehe https://www.youtube.com/watch?v=TBYJ2V1jAlA. Hier zeigt er auch ein schönes Anwendungsbeispiel anhand einer Sprite Grafik, bei der er jeweils nur Teile der Grafik innerhalb der Viewbox anzeigen lässt. 

Hinweise zur Syntax

Wenn du eine SVG-Grafik inline direkt in das html setzt, es also nicht als externe Datei geladen wird, dann braucht das öffnende SVG Tag keinen XML Namensraum, den kannst du einfach weglassen. Bei externen SVG Dateien hingegen ist die Angabe eines xml-Namensraumes Pflicht.

Wenn Du SVG inline in HTML einbettest, musst Du auf Groß- und Kleinschreibung nicht Rücksicht nehmen, aber ich würde Dir empfehlen, trotzdem darauf zu achten, denn externe SVG Dateien sind case-sensitive, hier wird auf Groß- und Kleinschreibung geachtet. 

Ein Alt-Attribut gibt es in SVG selbst nicht, aber du kannst eine Bildbeschreibung per title-Element oder im desc-Element einfügen.

SVG aus Grafik-Programmen exportieren

Du musst SVG-Dateien nicht notwendigerweise selber schreiben, sie lassen sich auch komfortabel aus diversen Grafik-Programmen exportieren, wie zum Beispiel Affinity Designer, Adobe Illustrator, Inkscape, Figma oder vergleichbarer Software.

Literaturhinweise

Schöne Beispiele für den Einsatz von SVG findest du bei selfhtml.org wie Diagramme auf https://wiki.selfhtml.org/wiki/Datenvisualisierung/Balken-_und_Kreisdiagramme oder Landkarten auf https://wiki.selfhtml.org/wiki/Datenvisualisierung/interaktive_Landkarten.
Tutorial bei MDN Web Docs / developer.mozilla.org: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial 
Eine Übersicht über alle SVG-Elemente: https://developer.mozilla.org/en-US/docs/Web/SVG/Element 
Ein gutes Tutorial zu SVG findest Du auf w3Schools: https://www.w3schools.com/graphics/svg_intro.asp
SVG-Filter-Effects: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Filter_effects
SVG Animationen siehe: https://web-einfach-machen.de/Kursmaterialien/Webproduktion/Ueber_die_Grundlagen_hinaus/Beispieldateien/Sweets/SVG-Animation.html oder https://web-einfach-machen.de/Kursmaterialien/Webproduktion/Ueber_die_Grundlagen_hinaus/Beispieldateien/Sweets/SVG-Animation-Scrollposition.html und „SVG Animation With Text Tutorial | HTML CSS“ https://www.youtube.com/watch?v=vJNVramny9k. 
SVG clipPath: https://www.mediaevent.de/tutorial/svg-clippath.html, https://www.mediaevent.de/css/clip-path.html, https://codepen.io/yoksel/pen/GRodvp und https://bennettfeely.com/clippy/
The Best Way to Embed SVG on HTML: https://vecta.io/blog/best-way-to-embed-svg
Weitere Bibliotheken: http://snapsvg.io/ 
Ein Onlinetool zum Säubern von SVGs: https://jakearchibald.github.io/svgomg/ 
„A beginners guide to SVG“ – Tutorial auf Youtube von Kevin Powell: https://www.youtube.com/watch?v=ZJSCl6XEdP8