Was ist SVG? Skalierbare Vektorgrafiken einfach erklärt
Die kurze Antwort: SVG ist eine Textdatei, die Bilder zeichnet
SVG steht für Scalable Vector Graphics (skalierbare Vektorgrafiken). Im Kern ist eine SVG-Datei einfach eine Textdatei. Öffnest du eine SVG-Datei in einem Texteditor, siehst du kein Pixelraster wie bei einem JPEG oder PNG; stattdessen siehst du XML-Markup, das beschreibt, wie Formen gezeichnet werden sollen. Es ist eine Reihe mathematischer Anweisungen – Pfade, die durch Kurven definiert sind, Kreise mit Mittelpunkt und Radius, Rechtecke mit Breite und Höhe –, die einem Browser oder Bildbearbeitungsprogramm mitteilen, wie ein Bild gerendert werden soll. Ein einfaches Logo kann nur 2 KB Text umfassen. Die wahre Magie steckt im Namen: „skalierbar“. Da die Datei Geometrie statt eines festen Pixelrasters beschreibt, kannst du dieselbe SVG-Datei für ein winziges 16×16 Pixel Favicon und eine 3 Meter breite Werbetafel verwenden – ohne Qualitätsverlust. Versuchst du, ein PNG auf das Zehnfache seiner Originalgröße zu strecken, erhältst du ein verschwommenes Chaos. Ein SVG, das auf das Zehnfache seiner Größe gestreckt wird, sieht perfekt scharf aus, identisch mit dem Original. SVG ist ein offener Standard des W3C, wobei die aktuelle stabile Version SVG 1.1 ist (bereits 2011 veröffentlicht) und SVG 2 noch in Entwicklung ist. Die gute Nachricht ist, dass du dir keine Sorgen um die Kompatibilität machen musst. Jeder moderne Browser – Chrome, Firefox, Safari, Edge – unterstützt SVG nativ. Genau deshalb haben Webentwickler es für alles von Icons und Logos bis hin zu Diagrammen und komplexen Illustrationen übernommen.
Wie sich SVG von Rasterformaten (PNG, JPEG, WebP) unterscheidet
Rasterbilder wie PNG, JPEG und WebP sind im Wesentlichen riesige Gitter aus farbigen Quadraten. Eine 1920×1080 PNG-Datei speichert den spezifischen Farbwert für jedes ihrer 2.073.600 Pixel. Die Datei hat kein Konzept von einem „Kreis“ oder einer „Linie“; sie weiß nur, dass das Pixel an den Koordinaten (142, 87) einen bestimmten Blauton hat. Diese Methode ist perfekt für Fotos, bei denen du Millionen subtiler Farbvariationen hast, die keine Formel jemals effizient beschreiben könnte. Vektorformate wie SVG funktionieren in die andere Richtung. Ein SVG speichert keine Pixel. Stattdessen speichert es einen Befehl wie „zeichne einen gefüllten Kreis an den Koordinaten (150, 90) mit einem Radius von 40 Pixeln und der Füllfarbe #0057FF“. Der Browser oder Bildbetrachter übernimmt die Aufgabe, zu berechnen, welche Pixel eingefärbt werden sollen, wenn das Bild angezeigt wird. Das macht die Datei völlig auflösungsunabhängig. Dieser Unterschied hat enorme praktische Konsequenzen. Um ein Firmenlogo über verschiedene Medien hinweg zu verwenden, benötigst du möglicherweise ein 32px PNG für ein Favicon, eine 200px-Version für den Website-Header und eine 2000px-Version für eine Druckbroschüre. Mit SVG deckt eine einzige Datei all diese Anwendungsfälle fehlerfrei ab. Andererseits wäre der Versuch, ein Foto eines Berges als SVG darzustellen, eine Katastrophe. Die Datei bräuchte Millionen einzelner Pfadelemente, um die Details auch nur annähernd darzustellen, was zu einer gigantischen Datei führen würde, die immer noch schlechter aussieht als ein JPEG, das nur ein Zehntel ihrer Größe hat. Glaube niemandem, der dir erzählt, SVG sei *immer* kleiner. Die Dateigröße hängt ausschließlich von der Komplexität ab. Ein einfaches zweifarbiges Icon ist wahrscheinlich als 800-Byte-SVG kleiner als ein 4 KB PNG. Aber eine detaillierte Illustration mit vielen Farbverläufen und Hunderten von Pfaden könnte als SVG leicht 200 KB groß sein, während eine komprimierte PNG-Version nur 80 KB beträgt. Die Wahl des richtigen Formats erfordert, dass du weißt, was im Bild enthalten ist.
Was SVG-Dateien tatsächlich enthalten: Ein Blick ins Innere
Da SVG nur XML ist, benötigst du keine spezielle Software, um einen Blick hineinzuwerfen. Hier ist eine vollständige SVG-Datei, die einen roten Kreis mit einem dicken blauen Rand zeichnet: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#E63946" stroke="#1D3557" stroke-width="4"/></svg> Dieses ganze Bild besteht aus nur 141 Zeichen Text. Das `viewBox`-Attribut richtet unsere Zeichenfläche ein – ein 100×100 Koordinatensystem. Die Attribute `cx`, `cy` und `r` definieren die Position und Größe des Kreises. Du kannst diesen Code direkt in eine HTML-Datei kopieren und einfügen, und dein Webbrowser wird das Bild perfekt rendern. Natürlich sind SVGs in der Praxis meist komplexer. Designtools wie Adobe Illustrator oder Figma sind berüchtigt dafür, überladene Dateien zu exportieren, die mit Metadaten, editorspezifischen Tags und manchmal sogar versteckten Rasterbildern für Effekte gefüllt sind, die nicht als Vektoren ausgedrückt werden können. Ein mit Standardeinstellungen exportiertes SVG kann 15–20 Mal größer sein als dieselbe Datei nach der Optimierung. Die wahre Stärke von SVG liegt im `<path>`-Element. Das `d`-Attribut eines Pfades enthält eine eigene kleine Sprache mit Befehlen zum Bewegen eines virtuellen Stifts (`M`), Zeichnen von Linien (`L`), Erstellen komplexer Kurven (`C`) und Schließen von Formen (`Z`). Ein einziges, langes Pfadelement kann jede erdenkliche Form beschreiben, von der Umrisslinie eines Landes auf einer Karte bis hin zu einer benutzerdefinierten Schriftform. So erreichen Vektorgrafiken ihre charakteristischen glatten Kurven, die niemals verpixeln, egal wie weit du hineinzoomst.
Häufige Anwendungsfälle: Wo SVG glänzt und wo nicht
Logos sind das Paradebeispiel für SVG. Ein einzelnes Markenlogo muss auf einem 120px Website-Header, einer 0,75-Zoll-Visitenkarte und einem mehrere Meter großen Messestand-Banner scharf aussehen. Eine einzige Master-SVG-Datei zu verwenden, ist unendlich viel sinnvoller und zuverlässiger, als zu versuchen, einen Ordner mit Rasterdateien für jede mögliche Auflösung zu verwalten. Icons sind ein weiterer perfekter Anwendungsfall. Moderne Icon-Sets wie Font Awesome werden als SVGs verteilt. Bei einer kleinen Größe von 24×24 Pixeln kann ein SVG-Icon genauso scharf sein wie ein pixelgenaues PNG, aber es skaliert auch wunderbar auf 48px oder 96px für die hochauflösenden Bildschirme moderner Telefone und Laptops, alles aus derselben Quelldatei. Hier ist ein wichtiger Anwendungsfall, den viele oft vergessen: Datenvisualisierung. Wenn du ein interaktives Diagramm auf einer Nachrichtenseite siehst, ist die Wahrscheinlichkeit groß, dass es sich um SVG handelt. Bibliotheken wie D3.js erstellen diese Visualisierungen dynamisch im Browser. Jeder Balken in einem Balkendiagramm, jeder Punkt in einem Streudiagramm und jede Region auf einer Karte ist ein eigenständiges SVG-Element, das mit CSS gestaltet und mit JavaScript manipuliert werden kann. Nun zum Realitätscheck: Verwende SVG nicht für Fotos. Die kontinuierlichen Töne und komplexen Texturen eines Fotos können nicht effizient mit Vektorpfaden beschrieben werden. Jeder Versuch, ein Foto in ein SVG zu „vektorisieren“ (zu „tracen“), führt zu einer monströs großen Datei, die wie ein billiges vektorisiertes Kunstprojekt aussieht, nicht wie ein Foto. Für alles, was fotografisch ist, bleibe bei JPEG, WebP oder AVIF. Sie liefern dir wesentlich kleinere Dateien und eine weit überlegene Qualität. Sei auch vorsichtig mit SVG in professionellen Druck-Workflows. Die Druckwelt dreht sich immer noch um CMYK-Farben, Sonderfarben und Überdruckeinstellungen, und Formate wie PDF und EPS bieten eine viel tiefere, zuverlässigere Unterstützung für diese Funktionen. Der native Farbraum von SVG ist RGB, und obwohl du CMYK-Profile einbetten kannst, ist die Unterstützung in Druckerei-Software bestenfalls inkonsistent.
Konvertierung von und zu SVG: Was funktioniert und was nicht
Die Konvertierung zwischen Vektorformaten ist meist der einfache Teil. Von AI zu SVG, EPS zu SVG oder einem vektorbasierten PDF zu SVG zu wechseln, ist oft ein sauberer Prozess, da die zugrunde liegenden geometrischen Daten bereits vorhanden sind. Es ist hauptsächlich eine Übersetzung von der Sprache eines Dateiformats in ein anderes. CocoConvert führt diese Vektor-zu-Vektor-Konvertierungen zuverlässig durch und bewahrt dabei Pfade, Farben und Typografie. Ein Rasterbild wie ein PNG oder JPEG in ein SVG umzuwandeln, ist eine völlig andere Sache. Dieser Prozess, Auto-Tracing genannt, beinhaltet, dass Software errät, wo sich die Formen in deinem pixelbasierten Bild befinden, und Vektorpfade zeichnet, um sie zu approximieren. Jeder, der ein komplexes Logo in einen Online-Konverter eingegeben und ein klumpiges Chaos zurückbekommen hat, kennt den Schmerz. Die Ergebnisse können für eine sehr einfache, kontrastreiche Grafik akzeptabel sein, aber für alles Komplexe ist es eine Annäherung. Für eine wirklich saubere Vektorversion eines Logos geht nichts über einen Designer, der es manuell in einem Tool wie Illustrator oder Inkscape neu zeichnet. Den umgekehrten Weg zu gehen – von SVG zu einem Rasterformat wie PNG – ist unkompliziert. Da das SVG keine inhärente Pixelgröße hat, musst du dem Konverter lediglich mitteilen, wie groß das endgültige PNG sein soll. CocoConvert ermöglicht es dir, eine Zielbreite anzugeben, und die Höhe wird automatisch berechnet, um das Seitenverhältnis beizubehalten. Für die Webnutzung ist der Export in 1×- und 2×-Größen (z.B. 400px und 800px breit) eine gängige Praxis. Für hochwertigen 300 DPI-Druck denke daran, dass ein 4 Zoll breites Bild mit 1200 Pixeln Breite exportiert werden muss. Eine letzte Konvertierung, die oft Probleme bereitet, ist SVG zu PDF. Da beide Vektorformate sein können, ist die Konvertierung für das Artwork selbst meist verlustfrei. Der Haken sind die Schriftarten. Wenn dein SVG eine auf deinem System installierte Schriftart verwendet, diese aber nicht einbettet, könnte das resultierende PDF sie durch etwas anderes ersetzen und dein Design zerstören. Der Profi-Tipp ist, den gesamten Text in deiner Designsoftware *vor* dem Export des SVGs in Pfade umzuwandeln.
SVG in der Webentwicklung: Einbetten, Gestalten und Animieren
Es gibt mehrere Möglichkeiten, ein SVG auf eine Webseite zu bringen, und die von dir gewählte Methode hat echte Konsequenzen. Die einfachste ist ein `<img>`-Tag: `<img src="logo.svg" alt="Firmenlogo">`. Das ist einfach, aber es ist eine Black Box. Du kannst nicht mit CSS hineingreifen, um die Farbe einer Form zu ändern, noch kannst du es mit JavaScript animieren. Um die volle Kontrolle zu erhalten, musst du das SVG direkt in dein HTML einbetten (inlinen). Das SVG-Markup wird Teil des DOM, genau wie deine `<div>`- und `<p>`-Elemente. Hier glänzt SVG wirklich im Web. Du kannst jedes Element innerhalb des SVGs mit CSS-Selektoren ansprechen, um Füllungen beim Hovern zu ändern, oder JavaScript und die Web Animations API verwenden, um komplexe Interaktionen zu erstellen. So verwenden moderne Frontend-Frameworks SVGs für Icons – sie werden inline als Komponenten gerendert. Die Verwendung von `background-image: url('icon.svg')` in deinem CSS ist eine dritte Option, ideal für sich wiederholende Muster oder dekorative Elemente. Wie das `<img>`-Tag isoliert es jedoch das SVG und verhindert jegliches internes Styling. Du kannst dies umgehen, indem du verschiedene SVG-Dateien für verschiedene Zustände erstellst und verlinkst, aber es ist keine besonders elegante Lösung. Animationen sind der Punkt, an dem SVGs richtig Spaß machen. Du kannst Standard-CSS-Animationen und -Übergänge auf jedes Element in einem inline-SVG anwenden. Ein beliebter Trick für „Zeicheneffekte“ verwendet die CSS-Eigenschaften `stroke-dasharray` und `stroke-dashoffset`, um einen Pfad so erscheinen zu lassen, als würde er sich selbst auf dem Bildschirm zeichnen. Es gibt auch eine native SVG-Animationssyntax namens SMIL, aber aufgrund ihrer lückenhaften Unterstützungshistorie (sie funktionierte nie im Internet Explorer) bleiben die meisten Entwickler heute bei CSS oder JavaScript. Zuletzt noch ein Wort zur Performance. Lass nicht zu, dass Vektorreinheit die Geschwindigkeit deiner Website beeinträchtigt. Ein sehr großes, komplexes SVG mit Tausenden von Pfaden kann für einen Browser langsam zu rendern sein. Wenn du eine komplizierte Illustration als Hintergrund verwendest, bist du möglicherweise besser dran, sie in eine optimierte WebP-Datei zu rastern. Der geringe Verlust an Skalierbarkeit ist es wert, wenn er 300 ms Renderzeit auf einem mobilen Gerät einspart.
SVG-Dateien optimieren: Größe reduzieren ohne Qualitätsverlust
Vertraue niemals einer SVG-Datei direkt aus einem Designtool. Sie sind fast immer mit unnötigen Daten überladen. Illustrator und andere Editoren fügen tonnenweise XML-Metadaten, editorspezifische Attribute, versteckte Ebenen und ungenutzte Definitionen hinzu. Es ist nicht ungewöhnlich, dass eine 18 KB große Logodatei nach der Optimierung auf 3 KB schrumpft – eine Reduzierung um 80 % ohne jegliche visuelle Veränderung. Das Industriestandard-Tool für diese Aufgabe ist SVGO (SVG Optimizer). Obwohl es ein Kommandozeilen-Dienstprogramm ist, ist der einfachste Weg, es zu nutzen, über eine webbasierte GUI, und die beste ist SVGOMG von Jake Archibald. Du kannst deinen SVG-Code einfügen oder eine Datei hochladen und visuell verschiedene Optimierungseinstellungen umschalten, um deren Auswirkung auf Dateigröße und Rendering zu sehen. Die größten Erfolge erzielt man normalerweise durch das Entfernen von Metadaten, das Zusammenfassen von Gruppen, das Entfernen versteckter Elemente und das Umwandeln einfacher Formen wie `<rect>` in effizientere `<path>`-Elemente. Achte besonders auf den Schieberegler „Precision“, der die Dezimalstellen in Koordinaten steuert. Diesen Wert von 6 auf 2 zu senken, kann oft 20-30% der Dateigröße einsparen, ohne einen wahrnehmbaren Unterschied. Wenn du SVGs direkt in dein HTML für Icons einbettest (inlinest), kannst du sogar noch aggressiver vorgehen. Das `xmlns`-Attribut wird für inline-SVGs in HTML5 nicht benötigt, und du kannst sogar die `viewBox` entfernen, wenn du weißt, dass das Icon immer eine feste Größe haben wird (obwohl dies seltener ist und riskant sein kann). CocoConvert wendet automatisch einige grundlegende Optimierungen an, wie das Entfernen von Metadaten und die Reduzierung der Koordinatenpräzision. Das gibt dir einen guten Ausgangspunkt. Aber für den produktiven Webeinsatz, wo jedes Kilobyte zählt, empfehlen wir dringend, deine Dateien durch SVGOMG laufen zu lassen. Ein automatisiertes Tool muss konservativ sein, aber ein Mensch, der die Ausgabe überprüfen kann, kann die Optimierung sicher viel weiter treiben, um die kleinstmögliche Datei zu erhalten.