Warum Dein Getractes SVG Größer Ist als das PNG

Du tracest ein PNG zu SVG und erwartest eine kleine, saubere, beliebig skalierbare Datei. Heraus kommt etwas um ein Vielfaches Größeres, das leicht falsch aussieht. Es ist nichts schiefgegangen - genau das tut Tracing, und zu verstehen warum dauert zwei Minuten und erspart viel Frust.

Tracing ist nicht die Umkehrung von Rastern#

Zuerst das Wichtigste: ein PNG in ein SVG zu wandeln holt die Vektordatei nicht zurück, aus der es entstanden ist. Diese Datei ist, falls sie je existierte, weg. Beim Rastern werden die Formen verworfen und ein Farbraster behalten, und nichts rekonstruiert sie.

Ein Tracer beginnt stattdessen bei den Pixeln und erfindet neue Formen. Er gruppiert Pixel zu Bereichen ähnlicher Farbe, zeichnet um jeden Bereich eine Kontur und füllt sie. Das Ergebnis nähert sich dem Bild an. Es ist eine neue Zeichnung, die der alten ähnelt.

Dieser Unterschied erklärt alles Weitere.

Warum die Datei größer wird#

PNG und SVG bezahlen für völlig verschiedene Dinge.

Ein PNG bezahlt für Pixel, und zwar günstig. Es komprimiert, indem es Muster findet - eine Folge gleicher Pixel kostet fast nichts, ein weicher Verlauf etwas mehr.

Ein SVG bezahlt für Grenzen, und zwar teuer. Jeder Bereich braucht seine Kontur als Koordinaten ausgeschrieben. Eine einzelne flache Form sind eine Handvoll Zahlen. Tausend kleine Bereiche sind tausend Konturen.

Die Größe eines SVG wächst also mit der Anzahl unterschiedlicher Bereiche im Bild, nicht mit der Anzahl der Pixel. Ein Logo hat etwa sechs. Ein Foto hat Zehntausende.

Dieselbe Beziehung, an drei echten Dateien gemessen:

Das Logo wird kleiner - vier Pfade beschreiben es vollständig, und es skaliert jetzt auf jede Größe. Die Illustration verdreifacht sich ungefähr. Das Foto bläht sich auf mehr als das Zehnfache des Originals auf und sieht dabei schlechter aus.

Warum Fotos aussichtslos sind#

Ein Foto hat keine flachen Bereiche. Jeder Teil davon ist ein weicher Übergang - Hauttöne, Himmel, Schatten, Unschärfe. Ein Tracer muss das alles mit flachen Formen annähern, also entweder mit wenigen großen (dann sieht es aus wie ein Poster) oder mit Tausenden winzigen (dann explodiert die Datei). Es gibt keine Einstellung, die diese Wahl umgeht.

JPEG dagegen ist außerordentlich gut in genau dieser Sache. Es speichert weiche Farbverläufe günstig, indem es Details verwirft, die niemand bemerkt. Von einem SVG zu verlangen, dabei mitzuhalten, heißt, das falsche Format um genau die Aufgabe zu bitten, in der es am schlechtesten ist.

Der Unterschied lässt sich vorab leicht erkennen, denn Fotos und Zeichnungen unterscheiden sich enorm in der Zahl ihrer verschiedenen Farben. An unseren drei Testdateien gemessen: das schwarze Logo hatte 244 verschiedene Farben, die flache Illustration 150 und das Foto 59.629. Drei Größenordnungen. Unsere Werkzeuge PNG zu SVG und JPG zu SVG zählen sie und warnen dich, bevor du wartest.

Die Farbanzahl ist der Regler, auf den es ankommt#

Wenn du nur eine Einstellung änderst, dann diese. An derselben flachen Illustration:

Zwei Farben ergaben eine dreißigmal kleinere Datei als sechzehn. Und beachte die Zeile, die nicht monoton ist: sechs Farben ergaben eine größere Datei als acht, weil eine etwas schlechtere Palette einen Bereich in mehrere zerlegte. Quantisierung verläuft nicht ordentlich, was ein weiterer Grund ist, ein paar Einstellungen auszuprobieren und hinzusehen, statt anzunehmen, mehr sei besser.

Fang niedrig an. Erhöhe nur, solange die Vorschau sichtbar besser wird - was bei den meisten flachen Zeichnungen deutlich früher aufhört, als man denkt.

Wann Tracing wirklich funktioniert#

Es funktioniert, wenn die Quelle tatsächlich aus flachen Formen besteht:

• Logos und Wortmarken, besonders schwarz auf weiß
• Strichzeichnungen und gescannte Zeichnungen
• Unterschriften und Stempel
• Alles, was eine Schneidemaschine ansteuert - Vinylschneider, Lasergravierer und Stickmaschinen brauchen Pfade, keine Pixel, hier ist Tracing keine Optimierung, sondern der einzige Weg hinein
• Ein grober Startpunkt zum Nachbearbeiten in Illustrator oder Inkscape

Und es funktioniert nicht bei Fotos, Verläufen, Schlagschatten, Weichzeichnung oder Screenshots von Text. Die beruhen alle auf weichen Übergängen, und flache Bereiche können einen weichen Übergang nicht darstellen, ohne entweder Streifen zu bilden oder eine gewaltige Zahl von Formen zu erzeugen.

Zwei Dinge, die einer schlechten Quelle helfen#

Wenn du etwas Gescanntes oder JPEG-Komprimiertes tracest, erledigen zwei Einstellungen die meiste Arbeit:

Erhöhe die Mindestfläche. JPEG-Kompression hinterlässt schwache blockige Artefakte in dem, was wie schlichtes weißes Papier aussieht, und ein Tracer zeichnet jeden einzelnen brav nach. Bereiche unter 16 oder 32 Pixeln zu verwerfen senkt die Pfadzahl meist deutlich, ohne sichtbaren Verlust.

Erhöhe vorher den Kontrast. Ist die Tinte richtig schwarz und das Papier richtig weiß, gibt es weniger Zwischengrautöne, also weniger Bereiche, weniger Pfade und eine kleinere Datei. Fünf Sekunden in einem beliebigen Bildeditor schlagen jedes nachträgliche Herumschrauben an den Tracer-Einstellungen.

Die Kurzfassung#

• Tracing erfindet aus Pixeln neue Formen. Es holt keine ursprüngliche Vektordatei zurück.
• Die SVG-Größe wächst mit der Zahl der Farbbereiche, nicht der Pixel - deshalb schrumpfen Logos und explodieren Fotos.
• Ein zu SVG getractes Foto ist typischerweise zehnmal größer und sieht schlechter aus. Behalte das Original.
• Die Farbanzahl ist die Einstellung, auf die es ankommt. Fang bei 2 an und arbeite dich hoch.
• Bei flachen Zeichnungen ist das Ergebnis wirklich ausgezeichnet: unser Testlogo ging von 7,7 KB auf 1,9 KB und vier Pfade und skaliert jetzt auf jede Größe.