SVG/Tutorials/Einstieg

6x30min

einfach

Grundkenntnisse in
• HTML
• CSS

SVG (skalierbare Vektorgrafiken) ist eine Auszeichnungssprache für grafische Grundformen und Elemente, mit denen Sie Vektorgrafiken erstellen können, die viele Vorteile gegenüber Rastergrafiken haben.

Diese Tutorial-Reihe dient als Einstieg in SVG und ist als Rundgang angelegt.

1. Warum SVG nutzen?
   • SVG 2
   • SVG vs. Canvas
2. Grundformen
   • Flaggen zeichnen
     • Grundformen
     • Gruppierungen
     • Pfade
     • Vorlagen
3. SVG mit CSS stylen
   • Präsentationsattribute
   • Füllungen und Randlinien
   • Geometrie-Attribute
4. SVG mit CSS animieren
   • Transformationen
   • Line-Drawing
   • SVG-Uhr
5. barrierefreie SVGs
   • Metadaten
6. SVG in responsiven Webseiten
   • mit der viewBox skalieren
   • preserveAspectRatio
7. SVG in Webseiten einbinden
   • Einbindung externer SVGs
   • Einbindung in CSS
   • inline-SVG in HTML
   • Einsatz im CMS
     

Warum SVG nutzen?

Schon vor 20 Jahren galt SVG als optimal für die Darstellung vektorisierter Grafiken. 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 von allen modernen Browsern verarbeitet wird.

SVG kann …

• beliebig skaliert werden, ist also responsiv und immer gestochen scharf!
• Text als Text darstellen und wird daher von Screenreadern und von Suchmaschinen erkannt. 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.
• mit CSS in Stylesheets zentral formatiert und schnell geändert werden
• mit JavaScript interaktiv erzeugt (SVG-DOM) und verändert werden. An jedes Element können Event-Handler gehängt werden, die für weitere Interaktivität sorgen.

Typische Anwendungsfälle sind:

• Icons
• Logos
• Illustrationen und Zeichnungen
• Infografiken und responsive Imagemaps
• Datenvisualisierungen usw.
  • z. B. interaktive Landkarten

SVG 2

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. Seit September 2016 hat SVG 2 den Status einer Candidate Recommendation, wurde bis jetzt aber nicht endgültig als Empfehlung (Recommendation) verabschiedet.

Im Kernpunkt der neuen Spezifikation steht nicht die Erweiterung durch neue Features, sondern die bessere Integration von SVG mit HTML, CSS und DOM und die Entfernung nicht unterstützter Eigenschaften. Eine Übersicht des bisher Erreichten finden Sie bei github, wo Nikos Andronikos die Entwicklung dokumentiert: SVG 2 user agent support

Mit dem Rollout von Edge Chromium im Januar 2020 gibt es zum ersten Mal eine volle, browserübergreifende Unterstützung von SVG:

• Präsentationsattribute (in SVG 2 auch Layout-Eigenschaften wie x, y, width etc) können durch CSS gestylt werden.
• Hover-Effekte können dank tabindex="0" auch mit der Tastatur angetabbt werden.
• Verweise können mit dem href-Attribut anstelle des umständlicheren XLink:href notiert werden.
• SVG-Filter und SVG-Masken können per CSS auch auf HTML-Elemente angewandt werden.
• Die SVG-eigene Animationsmethode SMIL bleibt erhalten, obwohl Chrome sie zugunsten der JavaScript-Methode Element.animate aufgeben wollte.

Leider bleibt aber noch einiges zu tun:

• 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.
  In SVG 2 soll das text-Element ein inline-size-Attribut erhalten, sodass ein automatischer Textumbruch möglich wird.Hauptartikel: SVG/Tutorials/Text/mehrzeiliger Text

SVG vs. Canvas

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, sodass 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 ausgelesen werden können.

• Einstieg in SVG
  (Übersicht)
• Grundformen

Weblinks

• W3C: W3C SVG
• W3C: W3C Planning Page
• Mozilla Wiki: SVG:Language:Regrets (This is a place to collect a list of things about the SVG language that we might like to change if we could go back in time, or issues that we might be able to remedy in some way in a future version of the language. )

Quellen

• Einstieg in SVG
• Grundformen