SVG Tutorial – Sagt das SVG zum GIF: Du siehst aber alt aus!

SVG Tutorial – Sagt das SVG zum GIF: Du siehst aber alt aus!

Heute möchte ich Euch das SVG vorstellen. Es ist ziemlich von sich überzeugt und das zurecht. Gegen SVG Grafiken sehen die herkömmlichen Grafikformate wie bspw. GIFs ziemlich alt aus.
Warum ist das so? Das erkläre ich Euch jetzt in diesem Tutorial.

Wer von Euch noch nichts von SVGs gehört hat: SVG ist die Abkürzung von Scaleable Vector Graphics. Der Name besagt es schon: Beim SVG Format handelt es sich um Vektorgrafiken.
So mancher von Euch wird nun hellhörig. Vektorgrafiken kennt man von Adobe Flash, Illustrator oder auch dem kostenlosen Pendant: Inkscape.

Was ist denn nun das besondere an SVG Vektorgrafiken?

Vektorgrafiken kann man verlustfrei direkt im Browser vergrößern und verkleinern. Sie behalten immer ihre scharfen Konturen.
Jeder, der schon mit „normalen Grafikformaten“ wie bspw. JPGs gearbeitet hat und diese per CSS auch nur ein paar Pixel vergrößern oder verkleiner musste, weiss wie schnell die
Qualität der Grafik darunter leidet und wie unscharf das Ganze wird.
In Zeiten in denen man „Responsive Designs“ schon fast als Standard ansehen kann, ist es von immensen Wert wenn man Grafiken beliebig im Browser vergrößern oder verkleinern kann ohne
gleich das Gefühl zu bekommen, plötzlich den Optiker aufsuchen zu müssen.

Immer noch nicht vom SVG überzeugt? Ist das denn schon alles?

Weit gefehlt. SVGs sind nicht nur verlustfrei skalierbar… wir können sie sogar per CSS beeinflussen. Nein, damit meine ich nicht nur die Höhe oder Breite der Grafik, damit meine ich die Farbe. Ihr könnt tatsächlich beispielsweise bei SVG Icons die Farbe direkt per CSS ansteuern.

Und wenn ich kein Icon habe? Was kann man denn noch alles mit SVGs anstellen?

Auf SVGs kann man auch Filter anwenden. Ihr könnt den SVGs Schatten geben, Ihnen Unschärfe Filter mitgeben oder sie miteinander verschmelzen lassen.
SVGs sollten jetzt häufiger zum Einsatz kommen, da sie inzwischen von fast allen Browsern unterstützt werden. Sogar der Internet Explorer ab der Version 9 unterstützt SVGs.

Hier zeige ich Euch mal ein paar coole Beispiel Experimente von anderen Codern auf Codepen:

Hier wird der SVG Goo Effekt oder auch das Verschmelzen von SVGs von Lucas Bebber gezeigt:

See the Pen svg goo effect demonstration by Lucas Bebber (@lbebber) on CodePen.

Ein sehr schönes Experiment ist der SVG Polygon Löwe von Dennis Gaebel:

See the Pen SVG Low PolyLion: Animated Polygons by Dennis Gaebel (@grayghostvisuals) on CodePen.

Das man mit SVG Icons auch schöne Effekte erzielen kann zeigt Euch Hendry Sadrak:

See the Pen Lights out svg icon by Hendry Sadrak (@carmination) on CodePen.

In Zukunft wird es auf Tutorialwelt.de eine Reihe von SVG-Tutorials geben, in denen ich Euch die Fülle an Möglichkeiten von SVGs zeigen kann.