SVG/Warum

Aus SELFHTML-Wiki
< SVG
Wechseln zu: Navigation, Suche

Schon vor 15 Jahren galt SVG als optimal für die Darstellung vektorisierter Grafiken, die sogar animierbar sind. Leider spielten die damaligen Browser nicht mit und so war der Einsatz externer Plugins wie dem Adobe SVG-Viewer, bzw. Batik-Viewer von Apache, zwingend notwendig.

Nachdem sich in den letzten Jahren HTML5-fähige Browser durchgesetzt haben, können Sie nun SVG inline ohne Namensraum-Angaben direkt in HTML-Code einbetten, der dann mit dem HTML5-Parser (also keinem speziellem XML-Parser) verarbeitet wird.

Da nur noch der IE8 die Darstellung von SVG verweigert, können Sie für heutige und zukünftige Webprojekte auf Fallback-Strategien, wie die Einbindung von Plugins oder dem Bereitstellen alternativer png-Grafiken weitestgehend verzichten.

Vorteile[Bearbeiten]

präzise Beschreibung von Vektorformen[Bearbeiten]

SVG ist das einzige im Web breit einsetzbare Vektorgrafik-Format. Damit lassen sich in allen Viewport-Auflösungen gestochen scharfe Grafiken darstellen. Man sollte es einsetzen, wenn sich die meisten Bildelemente mit SVG-Formen ausdrücken lassen und eine clientseitige Skalierbarkeit oder eine Dynamik gewünscht ist. Letzteres ist in Zeiten von unterschiedlichen Device-Pixel-Ratios so gut wie immer der Fall.

Darunter fallen eine große Zahl von Grafiken im Web:

Für die wurden bisher Rastergrafiken, Flash-Plugins, HTML5-Canvas, Icon-Fonts usw. verwendet. SVG ersetzt diese Anwendungen zunehmend, aus praktischen Gründen aber nicht alle.

Animationen, Transformationen[Bearbeiten]

Besonders im Bereich interaktiver Grafiken und der Datenvisualisierung werden SVG-Grafiken nahtlos in HTML-Dokumente eingebunden und über JavaScript programmiert.


Formatierung mit CSS-Techniken[Bearbeiten]

Alle Präsentationsattribute können mit CSS bequem in externen Stylesheets zentral festgelegt und auch wieder geändert werden.

DOM-Scripting[Bearbeiten]

SVG bildet als XML-basierte Sprache ein eigenes SVG-DOM, das durch JavaScript interaktiv erzeugt und verändert werden. An jedes Element können Event-Handler gehängt werden, die für weitere Interaktivität sorgen.

Weitere Informationen finden Sie im Artikel SVG und JavaScript.

Zugänglichkeit[Bearbeiten]

Durch die Verwendung von Elementen wie title und desc können Metadaten hinterlegt werden, die Screenreadern semantische Hinweise zu den Grafiken geben können und so die Zugänglichkeit erhöhen.[1]


SVG vs. Canvas[Bearbeiten]

HTML5 Canvas erzeugt mit Hilfe von JavaScript 2D-Grafiken. Wenn ein Detail geändert wird, muss die gesamte Grafik neu gezeichnet werden. In SVG kann ein Element seine Form oder Größe ändern, ohne dass dies die anderen Objekte betrifft. Diese Änderung kann durch JavaScript, aber auch durch CSS-Animation oder :hover erreicht werden.

In Canvas ist die Größe der Leinwand festgelegt, während das SVG-Element durch die viewBox responsiv an vorhandene Viewport-Größen angepasst wird.

Andererseits wird die Anzeigefläche in Canvas sehr schnell gerendert, so dass es für schnelle, grafikintensive Spiele gut geeignet ist. Ein Canvas kann mit einer JavaScript-Anweisung in ein .jpg oder .png Bild gespeichert werden.

Allerdings ist Canvas ein Alptraum in Bezug auf die Zugänglichkeit, da die Inhalte eben nicht wie bei SVG Teil des DOM, sondern nur Teil einer Zeichnung sind. So müssen alternative Inhalte als Fallback dargestellt werden, die bei SVG schon im Markup vorhanden sind und von Screenreadern problemlos ausglesen werden können.

SVG 2[Bearbeiten]

Nach der Verabschiedung von SVG1.1 im Jahre 2003 kam es unter anderem durch die mangelhafte Browser-Unterstützung zu einem Stillstand in der Entwicklung. Erst seit einigen Jahren wird an einer neuen Version SVG 2 gearbeitet, die eigentlich Ende 2015 verabschiedet werden sollte. Sie hat seit September 2016 den Status einer Candidate Recommendation und soll im Juli 2017 endgültig als Empfehlung (Recommendation) verabschiedet werden.[2]

Im Kernpunkt der neuen Spezifikation soll nicht die Erweiterung durch neue Features, sondern die bessere Integration von SVG mit HTML, CSS und DOM und die Entfernung nicht unterstützer Eigenschaften stehen.

Browser-Support[Bearbeiten]

Auch wenn der neue Standard noch nicht verabschiedet ist, haben einige Browser-Hersteller bereits mit der Implementierung begonnen. Eine Übersicht finden sie bei github, wo Nikos Andronikos die Entwicklung dokumentiert: SVG 2 user agent support

Ausblick[Bearbeiten]

Auch wenn der Verwendung von SVG schon heute nichts mehr im Wege steht, gibt es noch einige Schwachpunkte:

  • mehrzeiliger Text mit automatischen Zeilenumbrüchen kann nur über den Umweg mehrerer tspan-Elemente erzeugt werden. Das für die Einbindung von HTML in SVG vorgesehene foreignObject ist eher umständlich in der Handhabung und wird erst von aktuellen Versionen des IE unterstützt.
    Beachten Sie: In SVG 2 soll das text-Element ein inline-size-Attribut erhalten, sodass ein automatischer Textumbruch möglich wird.[3]
  • Die Präsentationsattribute können bequem mit CSS gestylt werden, Angaben zur Breite, Höhe oder Position aber nicht, so dass sich zum Beispiel hover-Effekte auf Farbänderungen beschränken müssen.
    Beachten Sie: In SVG 2 sollen Layout-Eigenschaften zu den Präsentationsattributen gehören und so ebenfalls durch CSS stylbar werden.[4]
  • Die SVG-eigene Animationsmethode SMIL wurde von Chrome zugunsten der JavaScript-Methode Element.animate aufgegeben. Trotz einiger Gerüchte über ein Beibehalten von SMIL[5], da es einfacher als die Kombination von CSS-animation und JavaScript sei, ist Google bei der Abschaffung geblieben. Allerdings sind inzwischen gute Polyfills für SMIL entstanden.

Quellen[Bearbeiten]

  1. sitepoint: Tips for Creating Accessible SVG
  2. W3C: SVG - Roadmap
  3. W3C: Changes from SVG 1.1
  4. W3C: Presentation attributes
  5. Yahoo.groups: Good news concerning SVG SMIL/element-based animation syntax vom 20.03.2015

Weblinks[Bearbeiten]

Quellen[Bearbeiten]