Warum dein SVG pixelig aussieht und wie du es behebst

Ein SVG sollte sauber skalieren. Wenn es trotzdem blockige Kanten zeigt, prüfe zuerst drei häufige Ursachen. Die Datei kann echte Pixel enthalten, eine App kann ihre Vorschau oder ihren Import rastern, oder ein echter Vektor wirkt auf einem winzigen Pixelraster einfach weich. Jede Ursache hat eine andere Lösung, und eine kurze Diagnose zeigt dir, welche du vor dir hast. Um eines geht es in diesem Beitrag nicht: ein PNG- oder JPG-Logo, das beim Vergrößern verpixelt. Diese Datei war nie ein SVG, und für dieses Problem gibt es eine eigene Lösung.

Die Diagnose in 30 Sekunden

• Zoome in zwei Betrachtern stark hinein (500 % oder mehr). Blockige Kanten in jedem Betrachter deuten auf Rasterinhalt hin. Sieht nur eine App blockig aus, rastert sie wahrscheinlich die Vorschau.
• Öffne das SVG in einem Texteditor. Ein <image>-Tag mit einem langen data:image/png;base64,…-Block bedeutet, dass dein „Vektor“ ein verkleidetes Bitmap ist.
• Entscheide anhand der Dateiprüfung. Zoomen weckt den Verdacht; ein <image>-Element oder ein rechteckiges Bildobjekt bestätigt eingebettete Pixel.

Ursache 1: In deinem SVG stecken Pixel

Das ist die Falle mit eingebetteten Bildern. SVG ist ein Containerformat, und die SVG-2-Spezifikation erlaubt einem <image>-Element, Rasterinhalt einzubetten oder zu referenzieren. Wenn du ein verknüpftes PNG von eingebetteten Daten oder einem verschachtelten SVG unterscheiden musst, nutze die Prüfung von SVGs mit gemischten Inhalten. Werkzeuge können diese Möglichkeit auf verschiedene Weise nutzen:

• Unechte Umwandlungen. Manche „PNG-zu-SVG“-Werkzeuge zeichnen nichts nach. Sie packen dein Bitmap in ein <image>-Tag und geben es mit .svg-Endung zurück. Es skaliert genauso schlecht wie das Original-PNG, weil es das Original-PNG ist.
• Exporte, die schwierige Teile rastern. Designprogramme exportieren als Pfade, was sie können, und rastern stillschweigend, was sie nicht können: Schlagschatten, Unschärfe, Verlaufsgitter, Bildfüllungen. So wird ein Logo überall scharf außer an einer Kurve oder einem Effekt — genau das Rätsel des „teilweise pixeligen“ Bilds, das Designforen füllt.
• Fotoinhalte. Ein Foto kann nicht zu sauberen Pfaden werden. Werkzeuge, die Fotos in SVG „umwandeln“, betten sie deshalb oft ein oder erzeugen eine posterisierte Annäherung. Kartenprogramme tun das bei Schattierungsebenen sogar absichtlich. Das ist legitim, weil Schattierung von Natur aus kontinuierliche Tonwerte hat.
• Formatcontainer. Eine Datei kann Vektordaten enthalten, die eine App liest und eine andere nicht. Trifft eine App auf Daten, die sie nicht versteht, greift sie auf die integrierte Rastervorschau zurück. Dann siehst du in einem Programm Pixel, während ein anderes saubere Vektoren zeigt.

So bestätigst du es: Öffne die .svg-Datei in einem beliebigen Texteditor und suche nach <image. Ein base64-Block ist der Verursacher. Klicke in Inkscape oder Illustrator auf den unscharfen Bereich: Wird ein einzelnes rechteckiges „Bild“-Objekt statt Pfaden ausgewählt, ist die Antwort dieselbe. Mit dieser Prüfung erkennst du auch unechte SVGs aus KI-Werkzeugen und Exportern, und sie dauert weniger als eine Minute.

Die Lösung: Die Pixel müssen zu Pfaden werden. Du musst den Rasterinhalt also tatsächlich vektorisieren. Wandle das Originalbild oder das eingebettete Bild mit einer echten Bild-zu-Vektor-Konvertierung um und ersetze das <image>-Element durch das nachgezeichnete Ergebnis. Ist der eingebettete Inhalt ein Foto, hat auch die Vektorisierung Grenzen; manchmal besteht die ehrliche Lösung darin, Rasterinhalt dort zu akzeptieren, wo er hingehört.

Der Hinweis in der Datei selbst

Ursache 2: Die Datei ist in Ordnung, der Betrachter rastert

Zeigen ein Browser oder Inkscape scharfe Pfade, während eine App blockig aussieht, bearbeite die Datei nicht weiter. Die Import- oder Vorschauverarbeitung dieser App ist das Problem:

• Manche Importabläufe in Apps rastern ein SVG auf Import- oder Vorschaugröße. Vergrößerst du dieses zwischengespeicherte Bild anschließend, skalierst du ein Bitmap. Die Lösung in der App besteht darin, in der Zielauflösung zu importieren oder zu rendern.
• After Effects kann Vektorebenen fortlaufend rastern, während die Ebene transformiert wird; Adobe dokumentiert den Schalter Continuously Rasterize für Vektorebenen. Sieht nur die Kompositionsvorschau grob aus, prüfe zuerst die Vorschauauflösung und den Ebenenschalter, bevor du das SVG änderst.
• Illustrator kann Grafik absichtlich in der Pixelvorschau zeigen. Deaktiviere Ansicht > Pixelvorschau, bevor du schließt, dass der Pfad selbst pixelig ist.
• Miniaturansichten und Vorschauen. Vorschaubilder im Dateimanager und Schnellansichten sind Rasterungen mit niedriger Auflösung. Sie sagen nichts über die Datei aus.

Der universelle Test: Öffne dieselbe Datei im Browser oder in Inkscape. Ist sie dort scharf, ist dein SVG in Ordnung, und die Lösung liegt in den Import- oder Vorschaueinstellungen der anderen App.

Prüfe bei Spielgrafiken Godots Workflow für SVG-Import und Rasterung oder den SVG-Importweg in Unity für deinen Editor und dein UI-System, bevor du annimmst, der Quelle fehlten Vektorpfade.

Ursache 3: Ein echter Vektor wirkt in kleinen Größen weich

Icons werden mit 16 bis 24 Pixeln dargestellt. Bei dieser Größe muss eine mathematisch perfekte Kurve auf einem groben Pixelraster landen. Kantenglättung verteilt die Kante auf graue Pixel, und das Ergebnis wirkt „leicht unscharf“, besonders bei feinen Konturen und Positionen auf halben Pixeln. Beim Hineinzoomen erscheinen vollkommen scharfe Vektorkanten. Daran erkennst du, dass es nicht die Falle mit dem eingebetteten Bild ist.

Die Lösungen liegen im Design: Richte horizontale und vertikale Kanten in der Zielgröße an ganzen Pixeln aus, halte Konturstärken bei ganzzahligen Pixelwerten und bevorzuge Icon-Sets, die für die verwendete Größe gezeichnet wurden. Sehr präzise Pfaddaten aus Designexporten können die Weichheit in winzigen Größen verschlimmern; vereinfachte Pfade werden berechenbarer dargestellt.

Ursache und Lösung auf einen Blick

So hältst du Pixel aus deinen SVGs heraus

Vorbeugung betrifft vor allem den Moment der Umwandlung oder des Exports. Bevor du dich auf ein SVG verlässt, prüfe es einmal im Texteditor: <path>-Elemente sind gut; <image>-Blöcke sind kein Vektor. Nutze beim Umwandeln von Bildern einen Konverter, der nachzeichnet statt einzubetten, und bestätige das Ergebnis durch Auswählen einzelner Formen. Wandle beim Export aus einem Designprogramm Effekte zuerst in Pfade um oder erweitere sie, denn alles, was der Exporter nicht als Vektoren ausdrücken kann, landet als Pixel in der Datei. Behalte im Kopf, was ein SVG tatsächlich ist: Die Endung verspricht ein Format, nicht einen bestimmten Inhalt.

So sieht das mit PerfectVector aus

PerfectVector umgeht diese Falle: Es zeichnet dein Bild in echte Pfade nach und bettet es nie nur ein. Lade ein PNG oder JPG hoch, und das Ergebnis besteht aus Formen, die du auswählen, umfärben und beliebig vergrößern kannst. Jede Farbe ist ein eigenes bearbeitbares Objekt, und nirgends in der Datei gibt es ein <image>-Element. Wenn du gerade entdeckt hast, dass dein „SVG“ ein verkleidetes Bitmap war, wandle das Originalbild richtig um und prüfe die Ausgabe genauso im Texteditor. Den Unterschied einmal zu sehen ist der schnellste Weg, nie wieder darauf hereinzufallen. Die ersten Umwandlungen sind kostenlos, ohne Kreditkarte.

FAQ

Warum sieht mein SVG beim Hineinzoomen pixelig aus? Zoomen allein beweist nicht, dass das SVG Pixel enthält, weil manche Apps ihre Vorschauen rastern. Öffne die Datei im Browser oder in Inkscape und prüfe dann ihren Quelltext auf ein <image>-Element. Oder wähle den unscharfen Bereich aus und prüfe, ob er ein rechteckiges Bildobjekt ist. Bestätigen diese Prüfungen eingebetteten Rasterinhalt, vektorisiere ihn und ersetze das Bildelement.

Wie erkenne ich, ob mein SVG ein eingebettetes Bild enthält? Öffne es in einem beliebigen Texteditor und suche nach <image. Eine lange data:image/png;base64-Zeichenfolge ist ein in die Datei eingebettetes Bitmap. Du kannst in Inkscape oder Illustrator auch den unscharfen Bereich anklicken: Wird ein einzelnes rechteckiges Bildobjekt statt Pfaden ausgewählt, ist es eingebettet.

Warum ist mein SVG in einer App pixelig, im Browser aber in Ordnung? Die App rastert es. Spiele-Engines rastern SVGs auf Importgröße, After-Effects-Vorschauen auf Kompositionsauflösung, und manche Apps rendern eingebettete Bilder standardmäßig mit blockiger Interpolation. Zeigen ein Browser oder Inkscape es scharf, ist die Datei in Ordnung; passe die App-Einstellungen an.

Kann ich ein SVG mit einem eingebetteten Bild reparieren? Ja. Nimm das ursprüngliche Rasterbild oder extrahiere das eingebettete und vektorisiere es mit einem echten Vektorisierungswerkzeug. Verwende dann das nachgezeichnete Ergebnis anstelle des Bildelements. Ist der eingebettete Inhalt ein Foto, erwarte eine stilisierte Vektorannäherung statt einer originalgetreuen Kopie, denn Fotos lassen sich nicht auf saubere Pfade reduzieren.

Warum sehen meine SVG-Icons in kleinen Größen unscharf aus? Das ist meist pixelrasterbedingte Weichheit, kein eingebettetes Bild. Bei 16 bis 24 Pixeln macht Kantenglättung aus nicht ausgerichteten Kanten graue Pixel. Richte Kanten und Konturstärken in der Zielgröße an ganzen Pixeln aus, dann werden die Icons schärfer. Zoome hinein, um zu bestätigen, dass die Pfade selbst scharf sind.

Erzeugt die Umwandlung von PNG in SVG immer echte Vektoren? Nein. Manche Werkzeuge zeichnen das Bild tatsächlich in Pfade nach, andere betten das PNG nur in einen SVG-Container ein. Nur im ersten Fall skaliert die Ausgabe sauber. Prüfe jede umgewandelte Datei auf image-Tags und bevorzuge einen Konverter, dessen Ergebnis bearbeitbare Formen zeigt.

Quellen

1. W3C: Eingebettete Inhalte in SVG 2 — Definiert das SVG-Element <image> und Rasterinhalt innerhalb eines SVG-Dokuments.
2. Adobe Illustrator: Grafiken anzeigen — Dokumentiert Pixelvorschau und andere Anzeigemodi.
3. Adobe After Effects: Ebenen — Dokumentiert den Schalter Continuously Rasterize für Vektorebenen.
4. Adobe Illustrator: Pixelgenaue Grafik erstellen — Erklärt die Ausrichtung am Pixelraster für kleine Grafiken.

---

Du bist bei einer Datei misstrauisch? Mache den Zoomtest, wandle dann das Originalbild in ein echtes SVG aus Pfaden um und vergleiche. Pixel verstecken sich; Pfade nicht.