Ab in den Kaninchenbau von .svg-Grafiken

In den letzten ein, zwei Tagen habe ich mich für dieses kleine Projekt & den Relaunch meiner kleinen Website in das Thema SVG-Grafiken reingenerded. Wurde mal Zeit…

SVG Grafiken sind web-kompatible Vektorgrafiken. Der Vorteil: Vor allem Buttons, UI-Elemente und Logos können als SVG skalieren statt zu matschigem Brei zu werden; dadurch sind sie auch schärfer.

SVGs können mit Vektor-Tools erstellt werden. In Canva kann man erstellte Grafiken als Pro-Nutzer bspw. als SVG exportieren. Und mit Adobe Express lassen sich PNG und JPG hochladen und in SVG umwandeln – natürlich mit den Beschränkungen, die sich daraus ergeben.

Bei komplexen Bildern ist es sinnvoll, ein SVG-Bild zu nutzen, welches sich dann per HTML am Besten über das picture-Attribut (oder auch img) einbinden lässt. Die richtige Magie – und das richtige Nerdtum – aber ergibt sich, wenn man SVG einfach direkt vom Browser rendern lässt – dafür legt man einfach Code ins eigene
HTML ab. Josh Comeau hat dazu eine wunderbare 'Friendly Introduction to SVG' geschrieben.

SVG kann man ebenso in CSS einbinden – und so bspw. Hintergrund-Grafiken anzeigen. Nikita Hlopov zeigt das in einem kleinen Tutorial. Nikita hat auch ein kleines Tool, mit dem man eine – beispielsweise mit Canva exportierte – SVG-Grafik in SVG-Code übersetzen kann. Und mit dem SVG Viewer kann man den Code danach optimieren, schick machen – oder beispielsweise in der Größe ändern. Zudem bietet der Viewer jede Menge Icons, die man mit einem einzigen Klick statt als Grafik eben als SVG Code kopieren kann; praktisch für die Entwicklung.

Der Vorteil von solchen SVG-Grafiken im Entwickler-Alltag? Man hat alles im Code, kann Farben oder Interaktionen mit CSS beeinflussen und ist flexibel in der Handhabung, statt sich mit 100 kleinen Icons rumzuschlagen. Und vor allem skalieren die SVG-Grafiken und sind maschienenlesbar, ein unheimlicher Vorteil für flexible Anzeigen, Vergrößerungen etc.

(Ergänzung) Robert hat zudem noch eine schicke Lösung, wie man wiederkehrende Elemente als SVG Stack nutzen kann. Schick!

Mein kleiner Ausflug ins Thema SVG hat mir wirklich ein paar tolle Einblicke und Möglichkeiten gezeigt. Ich werde damit noch ein wenig rumspielen – vor allem auch für das obige kleine Projekt.