Wie man JPG- und PNG-Bilder in SVG konvertiert

Herkömmliche Bildformate wie JPG, PNG oder GIF sind sehr beliebt, haben jedoch Nachteile, die ihre Verwendung für bestimmte Anwendungen nicht ideal machen.

Wenn Sie beispielsweise eine reaktionsschnelle Website erstellen, möchten Sie Bilder, die unabhängig von der Breite und Höhe, in der sie angezeigt werden, gut aussehen. Herkömmliche Bilder sehen schlecht aus, wenn Sie sie beispielsweise zu stark vergrößern.

Möglicherweise müssen Sie das Bild auch in verschiedenen Größen anzeigen, beispielsweise als Miniaturbild auf der Indexseite eines Blogs und als Bild in voller Auflösung im verknüpften Artikel.

Sie können zwar verschiedene Versionen eines einzelnen Bildes erstellen, um das am besten geeignete auszuwählen, dies bedeutet jedoch, dass Sie unter anderem mehr Speicherplatz dafür benötigen.

Das SVG-Bildformat ist ein Vektorformat. Dies bedeutet, dass die Größe ohne Qualitätsverlust verringert oder erhöht werden kann (skalierbar). Dies ist ideal, wenn Sie das Bild an mehreren Stellen mit unterschiedlichen Auflösungen anzeigen müssen.

Weitere Vorteile von SVG sind, dass es in der Regel viel kleiner ist und den Webmastern eine gewisse Flexibilität beim Vornehmen von Änderungen bietet, da einige Änderungen direkt in CSS vorgenommen werden können.

Ein Beispiel: Terence Eden hat die Logos bekannter Internetunternehmen wie Twitter, Amazon, WhatsApp, YouTube oder Reddit in SVG neu erstellt. Die Größe der Logos wurde auf weniger als 1 Kilobyte reduziert, manchmal sogar auf 200 Byte. Das Twitter-Logo im PNG-Format hat beispielsweise eine Größe von 20 Kilobyte, die SVG-Version eine Größe von 397 Bytes.

SVG ist ein gutes Format für Logos und Symbole, aber nicht wirklich geeignet für Fotos und andere Arten von Bildern, die viele verschiedene Objekte zeigen.

Umwandlung in SVG

Diese Anleitung konzentriert sich auf Anwendungen, mit denen Sie Bilder direkt in SVG konvertieren können. Dies ist kein Tutorial zur Verwendung von Anwendungen, mit denen Vektorgrafiken von Grund auf neu erstellt werden können. Sie können dafür Vektorgrafiken wie Adobe Illustrator (es bestehen noch keine Links zu Adobe-Richtlinien), Inkscape oder LibreOffice Draw verwenden.

Es stehen viele kostenlose Konverter zur Verfügung, die Sie online ausführen können. Sie sind jedoch in Bezug auf den Konvertierungsprozess recht begrenzt. Während sie ausreichen, um ein einfaches Logo, das als PNG oder JPG verfügbar ist, in SVG zu konvertieren, sind die Ergebnisse die meiste Zeit nicht besonders gut.

So habe ich die Dienste bewertet: Ich habe das Ghacks-Logo heruntergeladen und die Konvertierungen auf mehreren Dutzend SVG-Konvertern ausprobiert. Ich beurteilte das Ergebnis und verwarf jeden Dienst, der keine guten Ergebnisse lieferte.

  • Aconvert - Der Dienst verwendet eine lokale Datei oder eine URL als Eingabe. Die einzige Möglichkeit besteht darin, die Auflösung des Bildes zu ändern. Das resultierende Bild sah aus wie das Ghacks-Logo, war jedoch fast doppelt so groß wie die PNG-Version des Logos.
  • Vector Magic - Verfügbar als Online-Konverter und Desktop-Programm für Windows. Es ist jedoch nicht kostenlos (Online kostet 7, 95 USD pro Monat, Desktop Edition eine einmalige Zahlung von 295 USD). Die Ergebnisse der Online-Ausgabe sind jedoch großartig, und Sie erhalten viele Optionen zum Bearbeiten oder Ändern von Einstellungen sowie eine Anzeige des Originalbilds und der SVG-Kopie nebeneinander.
  • Vectorizer - Ein weiterer kostenloser Service. Dieser enthält einen Assistenten, mit dem Sie die besten Ausgabeparameter (Unschärfe, Farben) auswählen oder direkt festlegen können. Die Ergebnisse waren mit einigen Optimierungen gut und die Größe des resultierenden Bildes war ein Drittel geringer als das ursprüngliche PNG-Logo.

Jetzt kennen Sie: einen anderen Onlinedienst oder ein anderes Programm zum Konvertieren von Bildern in das SVG-Format?