SELFHTML Weblog - Ergänzung zur Dokumentation Übersicht

Denn das SVG-Format ist vermutlich die spannendste Entwicklung im Bereich Grafik, die derzeit überhaupt stattfindet, und es eignet sich wie kaum ein anderes für etliche statische und dynamische Grafiksorten im Web. Stefan Münz 27.10.2001

Seit über 20 Jahren wurde SVG als das nächste große Ding verkauft - bei der Umsetzung gab es aber immer wieder Probleme. Mit der Einführung von Edge Chromium gibt es nun volle Unterstützung von SVG in allen Browsern! SVG2, obwohl seit 2016 Candidate Recommendation, wurde bis zwar jetzt nicht offiziell verabschiedet. Trotzdem haben die Browser-Hersteller die Anpassung an die HTML5-Welt weiter vorangetrieben:

• Verweise mit dem a-Element benötigen nur noch href-Attribute anstelle von xlink:href (letzter Browser war Safari +12.1)
• mit tabindex können auch normale Elemente fokussierbar gemacht werden.
• Präsentationsattribute (auch die Geometrie-Attribute x, y, und width) lassen sich mit CSS formatieren + animieren
• SMIL läuft in allen Browsern (jetzt auch im Edge)

Zeit, unsere Tutorials zu überarbeiten!

•  Einstieg in SVG-Tutorial
  • Das erste Kapitel führt gleich in die Welt der Grundformen und zeigt praktische Beispiele
  • SVG mit CSS stylen - Hier fallen viele Ausnahmen weg.
  • SVG mit CSS animieren - da auch Geometrieattribute wie x und y animiert werden können, ist CSS nun das Mittel der Wahl, wie man an der SVG-Uhr sehen kann.
• Text-Effekte mit SVG
• SVG und JavaScript
  • Viele ältere Beispiele nutzten JavaScript, um :hover-Effekte mit mouseoverzu realisieren. Heute gibt es den vollen Zugriff auf die bekannten DOM-Methoden.
  • Die Web Animations API eignet sich auch für die Steuerung von Präsentationsattributen in SVG.

Wir wünschen euch viel Spaß bei der Lektüre! Es wäre nett, wenn Ihr Verbesserungen und Ergänzungen im SELF-Forum posten und evtl. Eure eigenen Beispiele dort vorstellen würdet!