SVG als bessere Alternative zu PNG und JPG
Viele Unternehmen und DesignerInnen liefern Logos in den Formaten JPG oder PNG – oft sogar mit unerwünschtem Hintergrund. Dabei gibt es eine viel bessere Lösung: das SVG-Format. Doch was macht SVG so besonders, warum solltest du es bevorzugen und in welchen Programmen kannst du es bearbeiten?
In diesem Artikel erklären wir die Vorteile von SVG und zeigen dir, warum es sich lohnt, dieses Format für Logos und Grafiken zu nutzen.
Warum machen PNG und JPG Probleme?
JPG und PNG sind Rasterformate, die aus Pixeln bestehen.
Diese bringen einige Probleme mit sich.
- Qualitätsverlust
Bei Skalierung oder Komprimierung leidet die Qualität. - Treppeneffekt
Besonders bei schrägen Linien oder Rundungen entstehen unsaubere Kanten. - Dateigröße
PNGs können sehr groß sein, was die Ladezeiten auf Webseiten erhöht. - Fehlender Transparenz-Support
JPGs unterstützen keine Transparenz, sodass oft ein unerwünschter Hintergrund vorhanden ist. - Schlechte Anpassbarkeit
Rastergrafiken lassen sich schwer bearbeiten und an verschiedene Medien anpassen. - Farben schwer anpassbar
Die Farben in JPGs und PNGs lassen sich oft nur mit aufwendiger Bearbeitung oder Qualitätsverlust ändern.
Falls du mehr zu den Problemen mit JPG erfahren willst, schau dir unseren Artikel dazu an
Was ist das SVG-Format und warum ist es besser?
SVG (Scalable Vector Graphics) ist ein Vektorformat, das auf XML basiert. Statt Pixeln nutzt es mathematische Formen wie Linien und Kurven.
Stell dir vor, du müsstest jemandem am Telefon ein Bild beschreiben, damit dein Kontakt am anderen Ende es exakt nachzeichnen kann. Wie würdest du einen Kreis beschreiben?
Würdest du wie eine Rastergrafik sprechen, würdest du deinen Empfänger auffordern ein kariertes Papier zu nehmen und dann würdest du Zeile für Zeile jedes Karo durchgeben. Dein Kontakt malt dann nach deinen Anweisungen jedes Kästchen farbig, schwarz oder weiss aus, bis mit viel Phantasie ein Kreis ensteht. Je enger das Karomuster, desto runder erscheint der Kreis, aber desto länger geht auch euer Gespräch am Telefon. Und wenn dein Kontakt dann das bemalte Karopapier im Kopierer vergrössert, wird das Muster wieder gröber und der Kreis weniger rund.
Es geht auch einfacher.
Du gibst einfach nur Radius und Mittelpunkt des gewünschten Kreises durch und dein Kontakt kann einen exakt gleich grossen Kreis zeichnen. Da er einen Zirkel benutzt, ist der Kreis auch wirklich rund und die Linie hat keine Zacken. Wenn nun ein grösserer Kreis gewünscht ist, wird die fertige Zeichnung nicht kopiert, sondern gerechnet. Jeder kann deine ursprüngliche Formel für den Kreis vergrössern und ganz ohne deine Mitwirkung neu zeichnen. Auch den Stift kann sich jeder selbst aussuchen. So entsteht eine andere Farbe oder eine dickere Linie. Und das alles immer in perfekter Qualität und mit ganz wenig Telefonaufwand.
Ein Kreis ist natürlich eine sehr einfache Form. Aber auch komplexere Formen können mathematisch beschrieben werden. Zum Beispiel eine Maus. Du malst auf deinem Tablett und das Programm findet und notiert sich die Formeln dazu und speichert sie in der Datei.
Eine Vektorgrafik Datei ist also nicht wirklich ein Bild, sondern nur ein Text, der ein Bild mit einem Haufen Mathe Formeln beschreibt. Dein Computer macht aus diesen Anweisungen dann eine Darstellung auf dem Bildschirm. Dabei „malt“ dein Computer das Bild jedesmal frisch, je nachdem wie gross dein Bildschirm gerade ist. Auch wenn du zoomst, ist das Bild deshalb immer präzise.
Vielleicht hattest du Vektorgeometrie und Kurvendiskussion in Mathe. Wenn du Abitur hast, hattest du das sogar ganz bestimmt. Möglicherweise hast du es inzwischen erfolgreich verdrängt, weil du dich schon damals gefragt hast, wozu du das je brauchen wirst.
Good news! Heute ist der Tag! \o/ Und das Beste daran? Du musst es nichtmal selbst machen, denn du hast einen Computer dafür.
SVG-Format: Ein offenes Format mit Flexibilität und voller Kontrolle
Die mathematischen Formeln für deine Grafik werden innerhalb des SVG Formats in einem schlichten XML Dokument gespeichert. Stell dir noch einmal dein Telefonat vor. Das XML Dokument ist das Protokoll eures Gesprächs.
XML (Extensible Markup Language) kennst du vielleicht aus Webseiten (ähnlich wie HTML) oder aus Dateien wie digitalen Kalendern, Office-Dokumenten oder E-Book-Formaten.
Weil SVG auf XML basiert, kann es von vielen Programmen gelesen und bearbeitet werden – ganz ohne spezielle oder teure Software. Im Gegensatz zu z.B. Adobe Illustrator-Dateien, die oft nur mit Illustrator geöffnet werden können, bleibt SVG ein offenes und plattformunabhängiges Format. Das gibt dir volle Kontrolle über deine Grafiken, egal welches Programm du nutzt. Du kannst SVG deshalb auch sehr gut mit anderen austauschen.
Wenn du in ein Logo investierst, solltest du es in einem flexiblen und verlustfreien SVG-Format erhalten, damit du es jederzeit ohne Qualitätsverlust anpassen und wirklich nutzen kannst.
Alles andere ist unprofessionell und dein Geld nicht wert.
Vorteile von Vektorgrafiken
1. Skalierbarkeit ohne Qualitätsverlust
SVG-Grafiken bleiben in jeder Größe gestochen scharf – egal ob auf einem kleinen Smartphone-Display oder auf einem riesigen Werbebanner oder deiner Hauswand. Klare Kanten und scharfe Linien sind garantiert, ohne dass ein Treppeneffekt entsteht.
2. Geringe Dateigröße für schnellere Ladezeiten
SVG-Dateien sind oft kleiner als vergleichbare PNGs oder JPGs, da sie nur die mathematische Beschreibung der Formen speichern. Eine kleinere Dateigröße sorgt zudem für schnellere Ladezeiten auf Webseiten, was die Benutzererfahrung und das SEO-Ranking verbessert.
3. Einfache Bearbeitung
SVG-Dateien lassen sich mit Texteditoren oder Design-Programmen jederzeit leicht anpassen.
4. Farben lassen sich flexibel ändern
Im Gegensatz zu Pixelbildern kannst du bei SVGs die Farben einfach per CSS oder direkt im Code anpassen, ohne dass die Qualität darunter leidet. Das ist besonders nützlich für Icons, die auf einer Webseite je nach Kontext oder Designanforderung dynamisch eingefärbt werden können. Die Farbe kommt also nicht aus dem „Bild“, sondern dem Code deiner Website. Das Icon kann auf einer Webseite grün und auf der anderen Webseite rot sein.
5. Unterstützung für Transparenz und Animationen
SVG kann transparente Hintergründe und sogar Animationen enthalten, was es für Web-Design besonders wertvoll macht.
6. Perfekt für responsive Webdesign
SVGs passen sich automatisch an verschiedene Bildschirmgrößen und Auflösungen an – ideal für moderne Websites.
In welchen Programmen kannst du SVG erstellen und bearbeiten?
Es gibt zahlreiche Tools, um SVG-Dateien zu erstellen und zu bearbeiten:
- Adobe Illustrator
Professionelle Lösung mit umfangreichen Funktionen - Inkscape
Kostenlose Open-Source-Alternative zu Illustrator - Figma
Beliebt für Webdesign und UX/UI-Prototyping - Affinity Designer
Preisgünstige Alternative zu Illustrator - Krita
Besonders gut für das Zeichnen von Icons, die als SVG gespeichert und flexibel eingefärbt werden können - Vektor-Editoren im Browser
z.B. Boxy SVG
Wo sollte SVG eingesetzt werden?
SVG ist besonders nützlich für:
- Logos
Perfekte Darstellung auf jeder Plattform - Icons und UI-Elemente (Bedienelemente)
Klare, skalierbare Symbole für Webseiten und Apps, die sich per CSS farblich anpassen lassen - Illustrationen
Web- und Print-Grafiken ohne Qualitätsverlust - Infografiken und Diagramme
Dynamisch anpassbare Visualisierungen - Animationen
Leichtgewichtige und skalierbare Effekte für Webseiten
SVG-Upload in WordPress gesperrt? SVG Upload freischalten!
Möglicherweise kannst du auf deiner Website keine SVG-Dateien hochladen. Dann ist der SVG Upload aus Sicherheitsgründen in WordPress blockiert. Unsere Websites können das trotzdem, weil wir in jedem Projekt unser Plugin Creative Ninja Customizations integrieren, das neben anderen Funktionen auch den SVG Upload freischaltet.
Wenn du SVGs nutzen willst, brauchst du eine kleine Anpassung der functions.php.
Füge diese Codezeile ein:
// SVG-Uploads erlauben
function add_svg_to_upload_mimes($mimes) {
$mimes['svg'] = 'image/svg+xml';
$mimes['svgz'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'add_svg_to_upload_mimes');
Hinweis
Bitte nimm Änderungen am Code nur vor, wenn du damit bereits Erfahrung hast oder es auf einer Testwebsite lernen möchtest. Falls du unsicher bist – wir helfen dir gern dabei! Es gibt auch kostenlose Plugins, aber es lohnt sich nicht, extra eines nur für diese einzelne Funktion mitzuschleppen.
Dein Take Away
Wenn du Logos, Icons oder Illustrationen für das Web nutzt, ist SVG fast immer die bessere Wahl als JPG oder PNG. Es bietet eine verlustfreie Skalierung, kleinere Dateigrößen für schnellere Ladezeiten, flexible Farbänderungen und eine einfache Bearbeitung.
Falls du noch immer JPGs für Logos erhältst, solltest du von deinen Designern SVG anfordern – es wird dir viel Arbeit ersparen.
Tipp: Kostenlose Profi-Software für SVG
Krita und Inkscape sind kostenlose Programme, die teuren Programmen, die Abos erfordern, in nichts nachstehen. Sie laufen sowohl unter Windows als auch Linux. Beide Programme sind gut dokumentiert, und es gibt viele Lernvideos auf YouTube.
Hier findest du die Downloads:
Für beide Programme bieten wir auch Kurse an. Kontaktiere uns gerne für weitere Informationen!
