SVGs sind toll

Weil eine SVG-Datei nichts anderes ist als eine XML-Datei, kann man sie einfach in eine HTML-Datei kopieren. Also die SVG im Texteditor öffnen, Quelltext kopieren und in der HTML-Datei bzw. dem Template einfügen. Schon ist auf der Webseite, an entsprechender Stelle, das Bild zu sehen.

Weil es sich um XML handelt, kann man dieses dann auch mit CSS manipulieren. Man kann einzelne Linien, Formen und Gruppen über CSS-Selektoren ansteuern und diese "stylen".

Ich wollte auf meiner Webseite seit geraumer Zeit einen kleinen Baum aus dem Footer ragen lassen. Habe das aber immer vor mich hingeschoben, weil das nichts Wichtiges ist. Heute juckte es mich aber in den Fingern.

Ich habe mir beim wunderbaren Undraw einen schönen Baum mit Schaukel rausgesucht und als SVG in den Footer eingefügt. Das hat mir schon sehr gut gefallen.

Ich dachte mir dann allerdings, dass da doch mehr gehen müsste. Das ist ja schließlich eine SVG-Datei und da kann man ja dran rumschrauben. Also habe ich ein bisschen an den Stellschrauben gedreht und schnell konnte ich die Position der Beine ändern. Die habe ich einfach ein bisschen rotiert. Das selbe konnte ich auch mit der Schaukel machen.

Natürlich bringt das wenig, wenn man einfach nur ein bisschen was umpositioniert. Ich hatte da einen Hintergedanken: Ich wollte diese veränderten Positionen animieren. Und so habe ich mir eine kleine KeyFrame-Animation gebastelt und die Dame in der ehemals statischen SVG-Datei zum Schaukeln gebracht. Scroll einfach ein bisschen runter zum Footer und du kannst das Resultat sehen.

Ich mag solche Spielereien und ich finde es toll, dass dergleichen heute schon mit wenigen Handgriffen möglich ist.