Logos in SVG konvertieren

Text-Info

20min

einfach

• Formate und Größen
  (Rastergrafiken)
• Standalone-SVGs
• SVG mit CSS stylen

Logos und Cliparts existieren oft bereits als Rastergrafik. Diese haben den Nachteil, dass sie in größeren Auflösungen unscharf erscheinen und sich deren Farbe nicht mehr nachträglich ändern lässt.

Deshalb ist SVG das Format für Logos, Icons und andere Cliparts auf Deiner Webseite. Die einzelnen grafischen Objekte werden mit einer HTML-ähnlichen Sprache beschrieben und können dann mit CSS formatiert werden. Spätere Änderungen an einem Teilobjekt sind dann ein Klacks!

Dabei steht man oft vor dem Problem, wie man ein bestehendes Logo umwandeln kann. Dieses Tutorial zeigt, welche Schritte nötig und möglich sind und was Du dabei beachten solltest

In Adobe-Illustrator gibt es eine Importfunktion für Rastergrafiken, die bei einer Umwandlung in Vektoren jedoch schnell ein Vielfaches der Dateigröße benötigen, da jede Farbabweichung und Unregelmäßigkeit in den Konturen sofort zu einem neuen Vektor führt.

Online-Konverter

Es gibt viele Online-Tools, die damit werben, Rastergrafiken in das SVG-Format zu konvertieren. Häufig können diese ihr Versprechen aber nicht halten.

Beachten Sie: Einige Anbieter vektorisieren das Bild nicht, sondern wandeln es in ein Data-URL-Bild um, dass dann in eine SVG-Grafik eingebettet wird.
Besonders Verläufe und Farbschattierungen werden nicht klar erkannt. Im günstigsten Fall werden sie abgestuft dargestellt; oft werden Bilder gar nicht erkannt.

PicSVG

PicSVG ist einer der wenigen Online-Konverter, die die Umrisse eines Clipart richtig erkennt und konvertiert. So können die Flächen dann nachträglich koloriert werden.

VectorMagic

VectorMagic erkennt auch den Verlauf, wandelt ihn aber in abgestufte Schattierungen um. In der Online-Version ist ein eingeschränktes, in der Desktop-Version ein komfortableres Editieren möglich. Für den Download der fertigen Grafiken ist allerdings eine E-Mail-Registrierung nötig.

Fazit

Da alle konvertierten Grafiken trotzdem noch nachbearbeitet werden müssen, ist es oft schneller und zielführender Grafiken in SVG neu zu erstellen und sofort zu optimieren.

Mittlerweile gibt es umfangreiche Bibliotheken und Bildersammlungen für SVGs:

• Wikimedia Commons: Category:SVG by subject
• svgrepo.com

Beachten Sie, dass diese Grafiken oft nur nachgezeichnet wurden. Deshalb ist es empfehlenswert, das SVG-Markup anzuschauen und sie gegebenenfalls zu optimieren.

Empfehlung: Wenn Du bereits ein Logo als Rastergrafik hast, solltest Du spätestens jetzt versuchen, den Grafiker, der das Logo gezeichnet hat, zu kontaktieren und um das Original im .eps-Format des Illustrators oder gleich in SVG zu bekommen.
Das erspart Dir viel Arbeit!

bestehende SVGs optimieren

Es hat geklappt, wir haben unser Logo als SVG!

Ein erster Blick zeigt, dass das SVG mit 49,7KB viel kleiner als die Version im PNG-Format mit 170KB ist. Trotzdem wollen wir sie nun weiter optimieren!

ToDo (weitere ToDos)

--Matthias Scharwies (Diskussion) 07:18, 23. Jan. 2024 (CET)

Weblinks

• SELF-Forum: PNG in SVG umwandeln - best practice Tipps?? vom 22.02.2018