SVG (Skalierbare Vektorgrafiken)
[Materialsammlung]
SVG ist zeitgemäß
Das Grafikformat SVG schien schon totgesagt. Wir finden es kaum auf Webseiten, außer auf Wikipedia. Doch „Responsive Web“ und Smart Phones machen das Grafikformat SVG wieder interessant, das eine Darstellungsqualität in allen Größen gewährleistet.
Die Tücken liegen im Aufwand zum Erstellen und zum Einbinden in eine Webseite. Der wichtigste Editor Inkskape ist nicht barrierefrei zu bedienen und bei der optimalen Einbindung sind wir noch beim Experimentieren.
Wir fassen für Sie unseren aktuellen Stand an Informationen und Erfahrungen zusammen und zeigen Ihnen, was wir mit SVG schon gemacht haben.
SVG-Grafiken von Zweiter Blick
SVG-Dateien erstellen
Einbinden von SVG-Grafiken in HTML-Dateien
In HTML5 kann der Code der SVG-Datei direkt in den HTML-Code eingefügt werden. Bei älteren HTML-Versionen gibt es unterschiedliche Möglichkeiten zur Einbindung einer SVG-Datei.
Vorteile des Grafikformats SVG
SVG ist für viele Anwendungen zur Erzielung der Barrierefreiheit ein geeignetes Dateiformat. Anders als bei Pixelgrafiken wird die Bildschirmanzeifge beim Vergrößern (Skalieren) jeweils neu berechnet, wodurch Darstellungsprobleme, wie bei Pixelgrafiken üblich, vermieden werden.
Es empfiehlt sich daher insbesondere bei Grafiken, die Text enthalten, nach Möglichkeit eine SVG-Datei einzubinden. Dies gilt etwa besonders für Organigramme.
Mangelhafte Unterstützung durch Browser und Assistierende Technologien
Leider wird das grundsätzlich barrierefreie Dateiformat SVG weiterhin von Browsern und sogar von Assistierenden Technologien nicht ausreichend unterstützt, weshalb es nur mit einigen Vorbehalten eingesetzt werden kann.
So werden SVG-Animationen weiterhin vom Internet Explorer (Stand 2015) nicht umgesetzt. In Mozilla Firefox hingegen werden Animationen schon seit frühesten Versionen richtig präsentiert.
SVG und Assistierende Technologien
Die Testdatei, die durch das folgende Link aufgerufen werden kann, besteht aus einem TITLE und einer DESCRIPTION im HEADER, sowie zwei Textelementen und einem Kreis im Body. Die Textelemente und der Kreis haben versuchsweise ein TITLE-Attribut erhalten.
Testdatei: SVG Unterstützung durch Assistierende Technologien
Auswertung: (Stand Juni 2015)
- Jaws 16.0 liest ausschließlich den Titel des HEADERS.
- Zoomtext 10 macht keine Fontglättung.
- Internet Explorer 11 blendet beim Mouse Over die Titel der Elemente nicht ein.
Dynamische SVG-Dateien mittels PHP generieren
SVG-Dateien lassen sich auch dynamisch mittls PHP generieren. Dazu werden Variablen oder Codes einfach wie auch bei HTML-Dateien mittels PHP-Befeheln festgelegt oder eingefügt.