Zwei Dateien, die beide auf .svg enden
Öffne zwei „umgewandelte“ SVGs in einem Texteditor. Das erste enthält ein einziges <image>-Element, dessen href eine lange Zeichenkette data:image/png;base64,… ist. Das zweite enthält <path>-Elemente mit Koordinatendaten wie d="M12 4 L…" und jeweils einer fill-Farbe. Beide öffnen sich im Browser, und beide sehen in Originalgröße richtig aus. Nur das zweite ist ein Vektor.
Die Verpackung ist genau das, wonach es klingt: die ursprüngliche Bitmap, in einem SVG-Container mitgeschleppt. Vergrößerst du sie, skaliert der Browser die Pixel hoch, und die Kanten verschwimmen genau wie beim PNG. Schneideplotter und Vektorprogramme können darin keine Form auswählen, weil es keine Formen gibt – nur ein Rechteck aus Pixeln.
Ein nachgezeichnetes SVG beschreibt das Bild als Geometrie. Jede Farbfläche wird zu einem geschlossenen Umriss aus geraden Segmenten und Bézierkurven; der Renderer füllt diesen Umriss in jeder gewünschten Größe, sodass die Kanten bei 10 mm genauso scharf bleiben wie bei 10 m.
Was png2svg.art ausgibt
Das Nachzeichnen fasst die Pixel deines Bildes zu einer kleinen Zahl flacher Farben zusammen und umreißt dann jede Farbfläche mit geraden Segmenten und Bézierkurven. Wo zwei Farben aufeinandertreffen, teilen sie sich eine Grenze, damit keine Lücken entstehen. Das Ergebnis ist ein <path> für jede Form, gefüllt mit ihrer Farbe, nach Objekten gruppiert und danach verschachtelt, was was umschließt (mit Ebenen auf Nach Farbe ein <path> pro Farbe). Löcher, etwa das Innere eines „O“, bleiben bei beiden SVG-Füllregeln offen. Es gibt kein <image>-Element, keine eingebettete Bitmap und kein Skript: Jedes Ergebnis wird vor dem Speichern geprüft und darf nur Pfade, Gruppen und Titel enthalten.
Weil die Geometrie echt ist, zeigt die Vorschau eine echte Zahl von Pfaden und die verwendete Palette. Kommt ein Logo mit 6 Pfaden und 6 Farben zurück, steht genau das in der Datei.
Das „Fe“ einer unserer Beispiel-Wortmarken, gleich stark vergrößert: Das PNG mit 256 px zeigt sein Pixelraster (links); das aus dem Bild in voller Größe nachgezeichnete SVG zeichnet dieselben Kanten als Kurven, scharf in jeder Größe (rechts).
So prüfst du jedes SVG selbst
- Öffne die Datei in einem einfachen Texteditor. Such nach
<path-,<polygon- oder<circle-Elementen – Geometrie. Such nach<image– eine Verpackung. - Öffne sie im Browser und zoom auf 800 %. Vektorkanten bleiben scharf; eine Verpackung wird unscharf oder pixelig.
- Importiere sie in ein Vektorprogramm wie Inkscape. Bei einer Nachzeichnung kannst du einzelne Formen anklicken; eine Verpackung lässt sich nur als ein Bild auswählen.
- Vergleich die Dateigröße. Ein verpacktes PNG ist mindestens so groß wie das PNG (Base64 legt etwa ein Drittel drauf); ein nachgezeichnetes Logo hat meist nur ein paar Kilobyte.
Was Nachzeichnen nicht kann
Nachzeichnen rekonstruiert flache Flächen. Es holt keine Details zurück, die nie in den Pixeln waren: Ein Icon mit 64 Pixeln Breite bleibt bei jeder Einstellung ein Entwurf mit 64 Pixeln Breite, dessen Kurven aus diesen Pixeln erraten werden. Fotos und weiche Verläufe werden zu Bändern aus flachen Farben (siehe die Anleitung dazu, warum Fotos wie Poster aussehen). Text wird zu Umrissen, nicht zu bearbeitbarer Schrift. Das sind Eigenschaften des Verfahrens, keine Einstellung, die man abschalten kann. Welche Bildarten sich gut vektorisieren lassen und welche nicht, steht auf der Seite Bild in Vektor umwandeln.
Warum die Vorschau wichtig ist
png2svg.art zeigt dir eine Vorschau des nachgezeichneten Ergebnisses mit Wasserzeichen, bevor du etwas freischaltest; das saubere SVG wird erst nach dem Freischalten zum Download erstellt. Die Vorschau wird aus denselben Pfaden gezeichnet, die du herunterladen würdest – sind also kleine Buchstaben verschmolzen oder ist eine dünne Linie gerissen, siehst du das, bevor du einen Credit ausgibst. Ein SVG ohne Wasserzeichen freizuschalten kostet 1 Credit; jedes bestätigte Konto bekommt 3 Gratis-Credits.