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.

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


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 […]

Ubuntu – Find – Mit der Konsole Dateien finden

March 5, 2021

Ein häufiges Problem ist, dass man Dateien, die man irgendwo abgelegt hatte, nicht finden kann. Man kann natürlich über die Linux Dist UI die Dateien in Files / Dateieinmanager suchen. Aber warum sollte man nicht das Kommandozeilen-Terminal dazu nutzen? Insbesondere wenn Du über SSH auf dem Server eingeloggt bist, geht es ja nur mit Konsole. […]

Ubuntu – Firefox Sessions Backup

February 7, 2021

Wenn irgendwann mal das Internet für längere Zeit ausfallen sollte – Stichwort Cloudausfall – wäre ich gewappnet. Ich habe das Internet bei Firefox in meinen Tabs offen. Vielleicht gehört ihr auch zu denen, die über 1000 Tabs offen haben. Warum auch immer. Wahrscheinlich könnte man darüber eine Doktorarbeit schreiben. Mit dem Titel: „Persönlichkeitsanalyse anhand des […]

Bash Script – kurz mal erklärt

February 2, 2021

Heute mal eine einfache Sache, falls man sie Klever einsetzt, eine Menge Arbeit abnehmen kann. Die Rede ist vom guten alten Shell-Script. Wer ständig die gleichen Befehle absetzen muss, der kann sich doch automatisieren. Ich zum Beispiel nutze Shell Script für das Deployment Prozess. Also den fertigen Code von der Entwicklungsumgebung in die Produktionsumgebung zu […]

MySQL Datenbankserver im lokalen Netzwerk einrichten

November 19, 2020

Es kommt mal vor, dass man beim Entwickeln die Test, Entwickler Datenbank nicht auf einem Liveserver sowie auf dem lokalen Rechner einrichten möchte. Und arbeiten an der Livedatenbank sollten sowieso keine Option sein. Jedenfalls kann der Wunsch nach einer Testdatenbank, die nicht auf dem Entwicklerrechner installiert ist unterschiedliche Gründe haben. Ein häufiger Grund ist wohl, […]

SSH Authentifizierung mit dem SSH Public Key einrichten

November 16, 2020

Die schlüsselbasierte Authentifizierung in SSH wird als Authentifizierung mit öffentlichem Schlüssel / Public Key bezeichnet. Mit ssh-copy-id kann man leicht die Authentifizierung mit dem SSH Public Key einrichten. Der Prozess läuft wie folgt ab. Generieren zuerst einen SSH-Schlüssel / SSH Key Mit OpenSSH wird ein SSH-Schlüssel mit ssh-keygen erzeugt. Führe den Befehl ssh-keygen aus und […]