Als Webentwickler kommt man um das SVG Format nicht mehr herum. Und das ist auch gut so! Das Thema SVG in der Webentwicklung ist vielseitig und umfänglich. Es fängt an, wie man SVG Grafiken am elegantesten in sein Projekt einbindet und endet wie man sein Webpack diesbezüglich konfiguriert. Wenn man überhaupt mit Webpack arbeitet und das wiederum ist ein ganz anderes Thema. Im aktuellen Projekt habe ich mir ein Ticket gezogen, wo ich die Favicons und Logos der Wesbite austauschen soll. Ich habe ein Bundle an SVG Grafiken bekommen. Aber keine PNGs und genau diese werden an wenigen Stellen dennoch benötigt. Ich sage nur apple-touch-icon. Es ist Freitag und das Designteam ist mental schon voll im Wochenende und ich will ja nicht stressen. Am Freitag wird sowieso nichts deployed.
Aber kein Problem ich kann ja alles soweit schon mal selbst vorbereiten . Dafür muss ich nicht mal meine Komfortzone – die Konsole – verlassen, denn ich hab ja Ubuntu. Hier gibt es Programme die genau für diese Arbeiten, also das arbeiten mit vektorisierten Grafiken prädestiniert sind.
Mit Inkscape SVG zu PNG konvertieren
Ein Programm heißt Inkscape. Es ist zwar nicht standardmäßig in der Distribution von Ubuntu enthalten aber in der offizielle Packed Library von Ubuntu schon. Also können wir einfach mit:
sudo apt install inkscape Inkscape installieren.
Nach der fertigen Installation verbleiben wir im Terminal und navigieren zum Ordner wo wir unsere SVG Grafiken abgelegt haben. Dann geben wir ein:
inkscape -w 1024 -h 1024 input.svg -o output.png Und erhalten ein PNG mit der Skalierung 1024 zu 1024. Das war es auch schon mit Inkscape. Wenn der Parameter -o Probleme macht, dann verscuht es mit dem Parameter -e. Das ist von der inkscape Version abhängig.
Mit Imagemagick (convert) SVG zu PNG konvertieren
Die geniale Bildbearbeitungsbibliothek Imagemagick bietet ein Bundel an Konvertierungsmöglichkeiten an. Deshalb ist es auch nicht verwunderlich, dass man mit ihr SVG Grafiken zu PNG Grafiken konvertieren kann.
Wer jetzt, wie in meinem Fall, nur Favicons erstellen muss, kann getrost convert von Imagemagick nutzen. Bei komplexeren SVG Grafiken (Farben, viele Rundungen (zum Beispiel Blumen)) würde ich Inkscape nutzen. Da ihr hier echt unschöne und unbrauchbare Ergebnisse erhalten könntet. Wer Imagemagick noch nicht installiert hat, kann es mit:
sudo apt install imagemagick nachholen. Um zu testen, ob ihr es bereits installiert habt könnt ihr in der Konsole mit: convert.
Um zu konvertieren nutzt ihr den Command:
convert -density 1200 -resize 180x180 favicon\ 180x180.svg favicon\ 180x180.png Und weil wir schon dabei sind, können wir ganz leicht mit convert das Fallback Favicon generieren lassen.
Aus dem PNG ein ICO konvertieren
Mit dem Konsolen Command:
convert -resize x16 -gravity center -crop 16x16+0+0 input.png -flatten -colors 256 -background transparent output/favicon.ico Optimierung von SVG Grafiken
Ein Kollege hatte mich im Zuge dieses Tickets darauf aufmerksam gemacht, dass man SVG Grafiken in der Dateigröße verkleinern sollte, wenn man sie im Web einsetzt. SVG Grafiken die im Web häufig aufgerufen werden. Wie zum Beispiel das Logo oder Favicons können im Nachgang ihrer Erstellung minifyed werden. Das kann man auch online machen. Dafür gibt es ein Reihe von Webseiten. Ich nutze seit kurzem diese hier:
https://jakearchibald.github.io/svgomg/
Und Fertig!
