Bild in SVG

Über das Umwandeln eines Bildes in ein SVG

Ein PNG ist ein Raster aus Pixeln. Vergrößern Sie es, bekommen Sie größere Pixel. Ein SVG ist eine Menge von Formen, die mit Mathematik beschrieben sind, und bleibt deshalb in jeder Größe gestochen scharf — auf einer Visitenkarte, auf einer Plakatwand, auf einem Bildschirm, den es noch gar nicht gibt.

Das Problem ist, dass man das SVG selten hat. Man hat ein Logo, das jemand als 400-px-PNG geschickt hat, und nun soll es auf ein Schild.

Dieses Werkzeug zeichnet das Bild in Formen nach. Es findet die Kanten zwischen den Farben und legt echte Vektorpfade darauf, sodass am Ende ein richtiges SVG herauskommt, das Sie skalieren, umfärben und in jedem Grafikprogramm öffnen können.

Was Nachzeichnen kann und was nicht

Nachzeichnen stellt nicht die Originaldatei wieder her. Es zeichnet um das herum, was es sehen kann, und das Ergebnis hängt vollständig davon ab, was Sie hineingeben.

Gut funktioniert es bei:

• Logos und Wortmarken mit flachen Farben
• Symbolen, Zeichen und Piktogrammen
• Strichzeichnungen, Skizzen und Tuschegrafik
• Diagrammen, Karten und Grundrissen
• Schablonen, Silhouetten und Stempeln

Bei Fotos funktioniert es nicht. Ein Foto hat keine sauberen Kanten zwischen Farben — es hat Millionen allmählicher Übergänge. Nachzeichnen macht daraus tausende winzige farbige Flecken: technisch ein SVG, meist *größer* als das Foto, aus dem es stammt, und zu nichts zu gebrauchen. Das Werkzeug erkennt ein wahrscheinliches Foto und sagt es, statt Ihnen eine 12-MB-Datei zu geben, die wie verschüttete Farbe aussieht.

Die Einstellungen

Sagen Sie zuerst, was das Bild ist — Logo oder Symbol, Strichzeichnung oder Detailreiche Grafik. Das setzt nur die drei Regler auf einen sinnvollen Ausgangspunkt, danach können Sie nachjustieren.

• Anzahl der Farben ist der wichtigste Wert. Nachzeichnen reduziert das Bild auf eine kleine Palette und zieht um jeden Bereich eine Linie. Ein zweifarbiges Logo mit 8 Farben nachgezeichnet nimmt den Kantenglättungs-Saum als zusätzliche Formen mit; mit 2 Farben kommt es sauber heraus. Weniger Farben ist fast immer besser als mehr.
• Glättung begradigt das Zittern, das die Kantenglättung an einer Kante hinterlässt. Erhöhen Sie sie, wenn die Umrisse ausgefranst wirken; senken Sie sie, wenn echte Details abgerundet werden.
• Detailgrad entscheidet, wie klein eine Form sein darf, bevor sie verworfen wird. Senken Sie ihn, um Sprenkel und Rauschen loszuwerden; erhöhen Sie ihn, um feine Züge in einer verschlungenen Zeichnung zu behalten.

Nachzeichnen, das Ergebnis rechts ansehen, anpassen, noch einmal nachzeichnen. Das dauert Sekunden.

Den Hintergrund weglassen

Den Hintergrund weglassen verwirft die große flache Form hinter der Grafik, sodass das SVG einen transparenten Hintergrund hat statt eines weißen Rechtecks.

Nutzen Sie es für ein Logo, das auf einer fremden Seite oder auf einem farbigen Kopfbereich sitzen soll. Lassen Sie es aus, wenn der Hintergrund wirklich Teil des Entwurfs ist.

Prüfen Sie die Kanten, bevor Sie es benutzen

Zoomen Sie rechts in das nachgezeichnete Feld hinein. Ecken, die scharf sein sollen, Kurven, die glatt sein sollen, und kleine Schrift sind die Stellen, an denen das Nachzeichnen an seine Grenzen kommt.

Ist das Ergebnis fast richtig, aber unruhig, versuchen Sie es zuerst mit weniger Farben. Ist das Original sehr klein, kann das Nachzeichnen Details nur erraten, die nie da waren — aus einem 64-px-Favicon wird kein sauberes Logo.

Nichts wird hochgeladen

Das Bild wird in Ihrem Browser gelesen und nachgezeichnet. Es erreicht nie einen Server, was zählt, wenn die Datei ein unveröffentlichtes Logo, eine Kundenmarke oder Grafik unter Geheimhaltung ist.

Es bedeutet auch: keine Größenbegrenzung und kein Warten. Sehr große Bilder werden vor dem Nachzeichnen verkleinert, denn ab einem Punkt bringen die zusätzlichen Pixel nur Rauschen, keine Details.

Wofür Leute es benutzen

• Ein Logo, das nur als PNG existiert und nun auf Beschilderung oder in den Druck soll
• Ein Symbol, das im Code umgefärbt oder skaliert werden muss
• Eine Skizze oder Strichzeichnung, die zum Schneiden, Gravieren oder Sticken vorbereitet wird
• Eine Schablone oder Silhouette für einen Folienplotter oder Laser
• Ein Diagramm in etwas Bearbeitbares verwandeln
• Ein SVG für eine Website, wo es auf jedem Bildschirm scharf bleibt

Gut zu wissen

• Das SVG hat eine richtige viewBox, es skaliert also korrekt, wenn Sie in CSS oder HTML eine Breite setzen
• SVG-Code kopieren legt das Markup in die Zwischenablage, fertig zum Einfügen in eine Seite oder eine Komponente
• Das Ergebnis öffnet sich in Illustrator, Inkscape, Figma und Affinity, wo die Pfade von Hand bearbeitet werden können
• Tausende Formen heißen, dass die Einstellungen für dieses Bild falsch sind, nicht dass das Werkzeug versagt hat — verringern Sie die Farben
• Für die andere Richtung gibt es SVG in PNG oder SVG in JPG
• Um stattdessen den Hintergrund von einem Foto zu entfernen, gibt es Hintergrund entfernen

So wird es benutzt

• Auf Klicken zum Hochladen klicken oder Ihr Logo bzw. Ihre Zeichnung auf das Feld ziehen
• Wählen, was es ist: Logo oder Symbol, Strichzeichnung oder Detailreiche Grafik
• Auf Nachzeichnen drücken und das Ergebnis rechts ansehen
• Sind die Kanten unsauber, zuerst die Anzahl der Farben anpassen und erneut nachzeichnen
• Den Hintergrund weglassen anhaken, wenn Sie Transparenz brauchen
• Auf SVG herunterladen drücken oder mit SVG-Code kopieren direkt in eine Seite einfügen

Verwandte Werkzeuge

• SVG in PNG — die andere Richtung
• SVG in JPG — ein SVG als flaches Bild
• Hintergrund entfernen — ein Motiv aus einem Foto freistellen
• Bild hochskalieren — ein kleines Bitmap vergrößern, ohne es nachzuzeichnen
• Favicon-Generator — aus dem Ergebnis ein Seitensymbol machen
• Bild komprimieren — wenn ein Bitmap am Ende doch die richtige Antwort ist