SVGs (scalable vector graphics) er\u00f6ffnen v\u00f6llig neue M\u00f6glichkeiten im Web. Ihr gro\u00dfer Vorteil besteht unbestritten darin, dass sie, wie der Name bereits sagt, skalierbar sind und dank ihrer Vektoreigenschaften dabei nicht an Qualit\u00e4t verlieren.<\/p>\n
Aber das ist l\u00e4ngst nicht alles. SVGs k\u00f6nnen direkt in den HTML Code eingebunden werden und auch Textelemente beinhalten. Diese Textelemente k\u00f6nnen auch von Screenreadern erfasst werden und erf\u00fcllen somit – ganz im Gegenteil zu Texten auf Pixelbildern – die\u00a0Web Content Accessiblity Guidelines (WCAG 2.0)<\/a>\u00a0des\u00a0World Wide Web Consortiums (W3C)<\/a>. SVGs sind auch den Icon-Fonts vorzuziehen, da diese unter Umst\u00e4nden eine Barriere darstellen k\u00f6nnen. Denn es gibt User, die \u00fcber Userstyles im Browser die Fonts austauschen, damit sie besser zu lesen sind (z.B. Legastheniker mit einer f\u00fcr sie eigens gestalteten Schrift). Wenn da dann der Font ausgetauscht wird, dann sind die Iconfonts visuell nicht mehr aussagekr\u00e4ftig. Bei Usern des Opera Mini (vor allem in Schwellenl\u00e4ndern stark verbreitet) wird die Iconfl\u00e4che sogar komplett schwarz dargestellt. Das ist also ein weiterer Grund aus der Sicht der Accessibility, der f\u00fcr SVGs spricht.<\/p>\n Um aber g\u00e4nzlich barrierefreie SVGs zu erstellen, m\u00fcssen einige Richtlinien befolgt werden. In einem Artikel von\u00a0L\u00e9onie Watson<\/a>\u00a0(digital accessibility consultant, Mitglied der\u00a0W3C HTML Working Group<\/a>\u00a0und der\u00a0HTML Accessibility Task Force<\/a>) auf\u00a0sitepoint.com<\/a>\u00a0findet ihr eine ausf\u00fchrliche Anleitung wie man die Screenreader-Accessibility erreichen kann. Ein Screenreader erm\u00f6glicht es einem Blinden, dass die Inhalte einer Website vorgelesen werden. Um dies zu erm\u00f6glichen, braucht der Content eine klare semantische Struktur, sonst wei\u00df man nicht, wo zum Beispiel die \u00dcberschrift ist und damit auch nicht, was wichtig ist. Was f\u00fcr den Blinden gut ist, ist dann auch f\u00fcr die Google-Suchmaschine gut, denn diese ist der weltweit gr\u00f6\u00dfte blinde User.<\/p>\n Nat\u00fcrlich darf nicht vergessen werden, dass es noch andere Accessibility Themen gibt, die auch bei SVGs nicht au\u00dfer Acht gelassen werden d\u00fcrfen, wie z.B. Farbkontraste. Diese werden wir allerdings in einem gesonderten Blogbeitrag thematisieren und an dieser Stelle nicht genauer behandeln.<\/p>\n SVGs kann man nicht nur als barrierefreie Grafiken einsetzen, sie er\u00f6ffnen uns auch eine Vielfalt an Animationsm\u00f6glichkeiten, z.B. f\u00fcr SVG Drawing Animations.<\/p>\n Das Grundprinzip ist einfach. Die Grafik, die gezeichnet werden soll, muss einen\u00a0 Dieses Problem beschreibt das folgende Bild sehr gut: es wird nicht die gew\u00fcnschte Linie animiert (wie erwartet, Abbildung rechts), sondern die Kontur der Fl\u00e4che (Abbildung links).<\/p>\n Deshalb muss man diese Icons in tats\u00e4chliche Line Icons umwandeln. Das geht gl\u00fccklicherweise relativ einfach. Zur Veranschaulichung sieht man unten im Bild ganz links ein Line Icon. Mit dem Befehl\u00a0 Je nachdem mit welchem Werkzeug die Objekte in Illustrator erstellt wurden, hei\u00dfen sie im SVG unterschiedlich, z.B.\u00a0 Grunds\u00e4tzlich gibt es zwei M\u00f6glichkeiten, wie SVGs animiert werden k\u00f6nnen: mit CSS Animationen und mit SVG Animationen. Da uns CSS Animationen schon gel\u00e4ufig sind (siehe Blogartikel\u00a0Workshop: CSS Animationen<\/a>) und sie f\u00fcr Drawing Animations sehr gut geeignet sind, werde ich im folgenden Abschnitt n\u00e4her darauf eingehen. Die SVG Animationen sind noch einmal ein ganz eigenes Thema, das ich bei Gelegenheit in einem zuk\u00fcnftigen Blogbeitrag behandeln werde.<\/p>\nDIE WICHTIGSTEN PUNKTE AUS L\u00c9ONIE WATSONS ARTIKEL:<\/h3>\n
\n
<svg><\/code>\u00a0Tags und f\u00fcge ihn direkt in die HTML Datei in das Element\u00a0<svg><\/svg><\/code>\u00a0ein.<\/li>\n<svg><\/code>\u00a0muss das Element\u00a0<title><\/code>\u00a0sein, das einen Titel f\u00fcr das SVG-Bild beinhaltet.<\/li>\n<desc><\/code>\u00a0folgen, das eine kurze Beschreibung des Inhalts des SVG-Bildes beinhaltet, also die Rolle des\u00a0alt<\/code>-Attributs \u00fcbernimmt.<\/li>\ntitle<\/code>\u00a0\/\u00a0desc<\/code>-Element nicht von allein. F\u00fcr diesen Fall ist es sinnvoll, das\u00a0ARIA<\/code>\u00a0Label einzubauen, das zumindest ab IE9 interpretierbar ist. Es gibt lediglich an, welche Elemente im SVG die Beschreibung beinhalten. Angegeben wir daf\u00fcr die\u00a0id<\/code>\u00a0der jeweiligen Elemente:<\/li>\n<\/ul>\n<svg version=\"1.1\" ... aria-labelledby=\"title desc\">\r\n <title id=\"title\">Header Animation<\/title>\r\n <desc id=\"desc\">Bild mit 2 Quicklinks<\/desc>\r\n ....\r\n<\/svg>\r\n<\/code><\/pre>\n\n
<text><\/code>\u00a0Element eingebaut werden, um ihn f\u00fcr Screenreader klar als solchen hervorzuheben.<\/li>\n<a><\/code>\u00a0Elements werden auch Inhalte eines SVGs fokussierbar. Damit Screenreader das Ankerelement als Link erkennen, muss noch die Rolle zugewiesen werden:\u00a0<a role=\u201dlink\u201d><\/code><\/li>\nLine Icons und Drawing Animations<\/h2>\n
Erstellung der SVGs in Illustrator<\/h2>\n
stroke<\/code>\u00a0beinhalten. Wird die SVG Grafik beispielsweise in Illustrator erstellt, bedeutet das, dass das Objekt entweder eine Kontur ben\u00f6tigt oder selbst nur aus einer Linie oder einem Pfad besteht. Ein Objekt mit Kontur ist dann sinnvoll, wenn wie bei dem Beispiel unter\u00a0tympanus.net<\/a>\u00a0ein detailliertes Objekt gezeichnet werden soll. M\u00f6chte man allerdings eine Animation von Line Icons erstellen, die sich selbst zeichnen, wie z.B. unter\u00a0blog.teamtreehouse.com<\/a>\u00a0zu sehen ist, dann muss hierbei jede Linie wirklich ein einzelner Pfad sein und darf keine Fl\u00e4che beinhalten. Das kann bei vorgefertigten Icons, die man nicht selbst from scratch erstellt, zu einem Problem f\u00fchren, da diese meistens – auch wenn es sich um transparente \u201cLine\u201d Icons handelt – aus einer gef\u00fcllten Fl\u00e4che bestehen.<\/p>\nshift + x<\/code>\u00a0wird die Kontur des Objekts angezeigt. Diese sieht dann so aus wie die zweite Abbildung von links. Anschlie\u00dfend muss der zusammengesetzte Pfad zur\u00fcckgewandelt werden und alle Teile gel\u00f6scht werden, die nicht n\u00f6tig sind f\u00fcr das finale Icon (mittlere Abbildung unten). Mit dem Shortcut\u00a0c<\/code>\u00a0wird das Schneidewerkzeug aktiviert, mit dem man Pfade zerteilen und somit danach noch weitere \u00fcberfl\u00fcssige Linien entfernen kann (vorletzte Abbildung unten). Im Anschluss m\u00fcssen die letzten Linien so verl\u00e4ngert werden, dass die L\u00fccken gef\u00fcllt 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\u00fcrde es sich auch anbieten, es einfach nachzuzeichnen. Aber f\u00fcr komplexere Elemente wollte ich auch diesen Weg einmal durchgehen.<\/p>\nrect<\/code>,\u00a0polygon<\/code>,\u00a0polyline<\/code>,\u00a0line<\/code>\u00a0oder \u00e4hnliches. Sie alle enthalten ein\u00a0stroke<\/code>\u00a0Element und sind somit geeignet f\u00fcr die Line Animation. M\u00f6chte man allerdings mit einheitlichen Formen arbeiten, dann empfiehlt es sich, die verschiedenen Formen in zusammengesetzte Pfade umzuwandeln. Somit hei\u00dfen sie im SVG alle\u00a0<path><\/code>\u00a0und ihre Koordinaten werden gesammelt in der description\u00a0d<\/code>\u00a0beschrieben. Eine Anmerkung am Rande: Die Umwandlung in Pfade bleibt eine Ausnahme, die nur f\u00fcr die Drawing Animation f\u00fcr entsprechend kleine Line Icons, die wirklich nur aus einer Linie bestehen, ben\u00f6tigt wird. Im Normalfall wandelt man Icons in eine Fl\u00e4che mit Kontur um. Diese enthalten dann standardm\u00e4\u00dfig im Code nur die description\u00a0d<\/code>\u00a0und keinerlei sonstige Informationen (au\u00dfer es gibt eine Kontur\u00a0stroke=\"1px\"<\/code>\u00a0und explizit keine F\u00fcllung\u00a0fill=\"none\"<\/code>)<\/p>\nAnimation der SVGs<\/h2>\n