Anleitung: PNG zu SVG
- Zieh ein PNG-, GIF- oder WebP-Sprite hinein.
- Wähle einen Ausgabemodus: ein Pfad pro Farbe (am kleinsten), zusammengefasste Rechtecke oder ein Rechteck pro Pixel.
- Leg die Anzeigegröße fest; die viewBox bleibt in Pixeln, sodass das SVG ohnehin sauber skaliert.
- Füge optional einen einfarbigen Hintergrund hinzu.
- Lade die .svg herunter oder kopiere das Markup.
Was du bekommst
- SVG mit shape-rendering="crispEdges"
- Vergleich der Dateigröße pro Modus
- Kopierbarer SVG-Quellcode
Tipps aus der Spieleentwicklung damit
- Der Pfad-Modus ist meist am kleinsten und genau richtig fürs Web, für Icons und Lasercutter.
- Der Rechteck-Modus lässt sich am leichtesten von Hand bearbeiten oder per CSS animieren, da jeder Block ein eigenes Element ist.
- Halte Sprites klein. Ein 64×64-Sprite wird sofort umgewandelt; ein fotoähnliches Bild mit Tausenden Farben ergibt ein riesiges SVG.
- Halbtransparente Pixel werden zu fill-opacity, sodass weiche Schatten die Umwandlung überstehen.
Anwendungsfälle
- Sprites als scharfe Icons oder Logos auf einer Website verwenden
- Pixel-Art groß drucken (Poster, Sticker, Merch)
- Pixel-Art in Figma, Illustrator oder Inkscape importieren
- Laser- und Plotterschnitt aus Pixel-Designs
FAQ
Ist die Umwandlung verlustfrei?
Ja. Jeder Pixel wird von genau einer Form mit exakt seiner Farbe und seinem Alpha abgedeckt. Rasterisierst du das SVG in Originalgröße, bekommst du das ursprüngliche PNG zurück.
Warum das Bild nicht einfach vektorisieren (tracen)?
Tracing-Tools glätten Kanten zu Kurven, was Pixel-Art ruiniert. Dieser Konverter behält harte 90°-Kanten auf dem Pixelraster.
Welcher Modus ergibt die kleinste Datei?
Pfade. Gleichfarbige Rechtecke teilen sich ein Pfad-Element mit kurzen relativen Befehlen. Das Tool zeigt die Größe jedes Modus, damit du vergleichen kannst.
Wird es beim Skalieren unscharf?
Nein. Das SVG nutzt shape-rendering="crispEdges" und ganzzahlige Koordinaten, sodass die Kanten bei jedem Zoom scharf bleiben.
Gibt es eine Größenbegrenzung?
Bis 512×512 Pixel. Größere Bilder ergeben SVGs, die zu groß sind, um nützlich zu sein.
Wird mein Bild hochgeladen?
Nein, die Umwandlung passiert in deinem Browser.