Skip to main content

Scalable Vector Graphics (SVG): Eine Einführung

SVGs (scalable vector graphics) eröffnen völlig neue Möglichkeiten im Web. Ihr großer Vorteil besteht unbestritten darin, dass sie, wie der Name bereits sagt, skalierbar sind und dank ihrer Vektoreigenschaften dabei nicht an Qualität verlieren.

Accessibility von SVGs

Aber das ist längst nicht alles. SVGs können direkt in den HTML Code eingebunden werden und auch Textelemente beinhalten. Diese Textelemente können auch von Screenreadern erfasst werden und erfüllen somit - ganz im Gegenteil zu Texten auf Pixelbildern - die Web Content Accessiblity Guidelines (WCAG 2.0) des World Wide Web Consortiums (W3C). SVGs sind auch den Icon-Fonts vorzuziehen, da diese unter Umständen eine Barriere darstellen können. Denn es gibt User, die über Userstyles im Browser die Fonts austauschen, damit sie besser zu lesen sind (z.B. Legastheniker mit einer für sie eigens gestalteten Schrift). Wenn da dann der Font ausgetauscht wird, dann sind die Iconfonts visuell nicht mehr aussagekräftig. Bei Usern des Opera Mini (vor allem in Schwellenländern stark verbreitet) wird die Iconfläche sogar komplett schwarz dargestellt. Das ist also ein weiterer Grund aus der Sicht der Accessibility, der für SVGs spricht.

Um aber gänzlich barrierefreie SVGs zu erstellen, müssen einige Richtlinien befolgt werden. In einem Artikel von Léonie Watson (digital accessibility consultant, Mitglied der W3C HTML Working Group und der HTML Accessibility Task Force) auf sitepoint.com findet ihr eine ausführliche Anleitung wie man die Screenreader-Accessibility erreichen kann. Ein Screenreader ermöglicht es einem Blinden, dass die Inhalte einer Website vorgelesen werden. Um dies zu ermöglichen, braucht der Content eine klare semantische Struktur, sonst weiß man nicht, wo zum Beispiel die Überschrift ist und damit auch nicht, was wichtig ist. Was für den Blinden gut ist, ist dann auch für die Google-Suchmaschine gut, denn diese ist der weltweit größte blinde User.

Die wichtigsten Punkte aus Léonie Watsons Artikel:

  • Verwende SVGs, wenn immer es möglich ist. Allein ihre Skalierbarkeit ohne Qualitätsverlust macht sie barrierefreier als herkömmliche Pixelbilder.
  • Für Screenreader ist es einfacher, wenn du Inline SVG verwendest. Das heißt, wenn du bereits eine SVG Datei hast, öffne sie in einem Text- oder Code-Editor, kopiere den Code mit den Vektorinformationen innerhalb des <svg> Tags und füge ihn direkt in die HTML Datei in das Element <svg></svg> ein.
  • Das erste Kindelement des <svg> muss das Element <title> sein, das einen Titel für das SVG-Bild beinhaltet.
  • Darauf muss das Element <desc> folgen, das eine kurze Beschreibung des Inhalts des SVG-Bildes beinhaltet, also die Rolle des alt-Attributs übernimmt.
  • Manche Browser bzw. die entsprechenden Screenreader erkennen das title / desc-Element nicht von allein. Für diesen Fall ist es sinnvoll, das ARIA Label einzubauen, das zumindest ab IE9 interpretierbar ist. Es gibt lediglich an, welche Elemente im SVG die Beschreibung beinhalten. Angegeben wir dafür die id der jeweiligen Elemente:
<svg version="1.1" ... aria-labelledby="title desc">
     <title id="title">Header Animation</title>
     <desc id="desc">Bild mit 2 Quicklinks</desc>
     ....
</svg>
  • Wie oben bereits erwähnt, sollte jeder Text, der in der SVG Grafik vorkommt, als <text> Element eingebaut werden, um ihn für Screenreader klar als solchen hervorzuheben.
  • Mithilfe des <a> Elements werden auch Inhalte eines SVGs fokussierbar. Damit Screenreader das Ankerelement als Link erkennen, muss noch die Rolle zugewiesen werden: <a role=”link”>
  • Wenn die verwendete scalable vector graphic etwas komplexeres oder interaktives beinhaltet, dann muss eine Möglichkeit überlegt werden, wie diese Inhalte noch transportiert werden können. Im Idealfall gibt es zwei verschiedene Views für diesen Inhalt und der User kann selbst entscheiden, welchen er wählt.

Natürlich darf nicht vergessen werden, dass es noch andere Accessibility Themen gibt, die auch bei SVGs nicht außer Acht gelassen werden dürfen, wie z.B. Farbkontraste. Diese werden wir allerdings in einem gesonderten Blogbeitrag thematisieren und an dieser Stelle nicht genauer behandeln.

Line Icons und Drawing Animations

SVGs kann man nicht nur als barrierefreie Grafiken einsetzen, sie eröffnen uns auch eine Vielfalt an Animationsmöglichkeiten, z.B. für SVG Drawing Animations.

Erstellung der SVGs in Illustrator

Das Grundprinzip ist einfach. Die Grafik, die gezeichnet werden soll, muss einen stroke beinhalten. Wird die SVG Grafik beispielsweise in Illustrator erstellt, bedeutet das, dass das Objekt entweder eine Kontur benötigt oder selbst nur aus einer Linie oder einem Pfad besteht. Ein Objekt mit Kontur ist dann sinnvoll, wenn wie bei dem Beispiel unter tympanus.net ein detailliertes Objekt gezeichnet werden soll. Möchte man allerdings eine Animation von Line Icons erstellen, die sich selbst zeichnen, wie z.B. unter blog.teamtreehouse.com zu sehen ist, dann muss hierbei jede Linie wirklich ein einzelner Pfad sein und darf keine Fläche beinhalten. Das kann bei vorgefertigten Icons, die man nicht selbst from scratch erstellt, zu einem Problem führen, da diese meistens - auch wenn es sich um transparente “Line” Icons handelt - aus einer gefüllten Fläche bestehen.

Dieses Problem beschreibt das folgende Bild sehr gut: es wird nicht die gewünschte Linie animiert (wie erwartet, Abbildung rechts), sondern die Kontur der Fläche (Abbildung links).

Line Icon Outlines

Deshalb muss man diese Icons in tatsächliche Line Icons umwandeln. Das geht glücklicherweise relativ einfach. Zur Veranschaulichung sieht man unten im Bild ganz links ein Line Icon. Mit dem Befehl shift + x wird die Kontur des Objekts angezeigt. Diese sieht dann so aus wie die zweite Abbildung von links. Anschließend muss der zusammengesetzte Pfad zurückgewandelt werden und alle Teile gelöscht werden, die nicht nötig sind für das finale Icon (mittlere Abbildung unten). Mit dem Shortcut c wird das Schneidewerkzeug aktiviert, mit dem man Pfade zerteilen und somit danach noch weitere überflüssige Linien entfernen kann (vorletzte Abbildung unten). Im Anschluss müssen die letzten Linien so verlängert werden, dass die Lücken gefüllt sind. Somit entsteht wieder dasselbe Symbol, nur dass es jetzt nur noch aus (Kontur-)linien besteht (Abbildung rechts). Bei einem Icon wie aus unserem Beispiel würde es sich auch anbieten, es einfach nachzuzeichnen. Aber für komplexere Elemente wollte ich auch diesen Weg einmal durchgehen.

Vorgehensweite bei der Umwandlung in ein Line Icon

Je nachdem mit welchem Werkzeug die Objekte in Illustrator erstellt wurden, heißen sie im SVG unterschiedlich, z.B. rect, polygon, polyline, line oder ähnliches. Sie alle enthalten ein stroke Element und sind somit geeignet für die Line Animation. Möchte man allerdings mit einheitlichen Formen arbeiten, dann empfiehlt es sich, die verschiedenen Formen in zusammengesetzte Pfade umzuwandeln. Somit heißen sie im SVG alle <path> und ihre Koordinaten werden gesammelt in der description d beschrieben. Eine Anmerkung am Rande: Die Umwandlung in Pfade bleibt eine Ausnahme, die nur für die Drawing Animation für entsprechend kleine Line Icons, die wirklich nur aus einer Linie bestehen, benötigt wird. Im Normalfall wandelt man Icons in eine Fläche mit Kontur um. Diese enthalten dann standardmäßig im Code nur die description d und keinerlei sonstige Informationen (außer es gibt eine Kontur stroke="1px" und explizit keine Füllung fill="none")

Animation der SVGs

Grundsätzlich gibt es zwei Möglichkeiten, wie SVGs animiert werden können: mit CSS Animationen und mit SVG Animationen. Da uns CSS Animationen schon geläufig sind (siehe Blogartikel Workshop: CSS Animationen) und sie für Drawing Animations sehr gut geeignet sind, werde ich im folgenden Abschnitt näher darauf eingehen. Die SVG Animationen sind noch einmal ein ganz eigenes Thema, das ich bei Gelegenheit in einem zukünftigen Blogbeitrag behandeln werde.

Für die Drawing Animations fand ich ebenfalls eine sehr gute Quelle, die alles einfachst und präzise erklärt, was man wissen muss: css-tricks.com/svg-line-animation-works/. Das Wichtigste aus diesem Artikel möchte ich hier kurz anführen. Das zu animierende Objekt muss, wie oben bereits erwähnt, einen stroke aufweisen. Das haben wir beim Erstellen der Objekte sichergestellt. Diesen stroke kann man strichliert darstelllen - was ja bedeutet, ein Teil der Linie wird gezeigt und ein gleich langer Teil wird nicht angezeigt. Dieser Fakt kann genützt werden, um den einen Teil so lang zu machen, dass er die gesamte Kontur ausfüllt.

Dafür gibt man dem Objekt im CSS einen stroke-dasharray in der Länge der Linie. Die Länge kann mittels Javascript herausgefunden oder mit ein wenig Spielerei in etwa erraten werden. Dann gibt man diesem Objekt noch einen stroke-dashoffset in derselben Länge. Das bewirkt, dass die Kontur vorerst noch nicht angezeigt wird, weil jetzt der nicht sichtbare Teil des dashes dargestellt wird. Dann muss man dem Element noch eine Animation zuweisen, wie z.B. animation: dash 5s linear forwards. Bei den @keyframes dash muss jetzt der offset verändert werden, damit die sichtbare Linie langsam die unsichtbare verdrängt. Das geschieht indem man den stroke-dashoffset auf 0 setzt. Das Attribut forwards bei der animation stellt zudem sicher, dass die Animation nur einmal in eine Richtung stattfindet.


.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

Wenn der Fall eintritt, dass sich die Kontur in die falsche Richtung aufbaut, kann man einfach dem offset zuerst einen negativen Wert geben. Dadurch wird gewährleistet, dass sich die Kontur aus der anderen Richtung aufbaut.

Das ist nur einer von vielen Tricks zur Animation von SVGs. Hoffentlich habt ihr genauso viel Freude daran wie ich, denn weitere Beiträge zu diesem Thema werden noch folgen!

Wird nicht veröffentlicht