SVG zu PNG konvertieren

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!


Leave a Comment

Your email address will not be published. Required fields are marked *

*

*

Empfholende Artikel


Odt Dateien in ein PDF konvertieren

January 4, 2022

Möchte man über die Commandline aus einer odt Datei eine PDF machen, brinbt libre Office von Hause auch gleich ein Headless Tool mit. libreoffice –headless –convert-to pdf textdatei.odt und schubdiwup, da ist das neue PDF.

Mit sed Text in einer Datei ändern

November 20, 2021

Wer über die CLI in einer Textdatei etwas editieren möchte greift für gewöhnlich zu nano, vim etc. Aber es gibt auch eine andere Möglichkeit in einer Textdatei etwas zu ändern. Über eine Stream (Stream Edit). Das kann zum Beispiel bei einem Deploymentscript sinnvoll sein. Wenn man zum Beispiel ein Deploymentscript hat und mit Release Ordner […]

Verschlüsseltes Zip über die Kommandozeile erstellen

November 9, 2021

Folgendes Szenario. Ihr seid via SSH auf einem Server der nicht mehr ansprechbar ist. Um die Dateien zu sichern erstellt ihr rasch ein ZIP von den Dateien die gesichert werden müssen. Das geht schnell mit: zip -re outputfileName.zip input folder/file r = rekursive = encryption

What does the -p option stand for in mkdir?

November 4, 2021

If you want to create several directories with the command mkdir you use the -p option. But what does the -p stand for? One could assume it stands for “Path”. But no. It stands for “parent”. And the flag is needed to create a parent directory if it is required. If you try to create […]

Wofür steht das -p option bei mkdir?

November 4, 2021

Wenn man mit mkdir mehrere Verzeichnis mit Unterverzeichnis anlegen möchte benutzt man die -p Option. Aber wofür steht das -p eigentlich? Man könnte annehmen für “Path”. Es steht für “Parent”. Und der Flag ist erforedlich um ein Übergeordnetes Verzeichnis anzulegen, wenn es erforderlich ist. Wenn man ohne p Option versucht ein Parent und ein Child […]

Ubuntu VLC Player DVD spielt nicht ab

March 14, 2021

Man hat sich eine DVD Bestellt. In meinem Fall war es Fargo. Nicht die Serie sondern der Originalfilm aus dem Jahr 1996. Für alle die den Film nicht kennen: „Es lohnt sich“. Jedenfalls wollte ich den Film über Laptop schauen. Ich leg die Scheibe ein und öffne den VLC Player. Menüpunkt Media → Open Disc […]