PNG-Icons zu SVG für ein einheitliches UI-Kit

Wandle nicht den ganzen Ordner in einem Durchgang um. Beginne mit einer kleinen Gruppe, die dein einfachstes Icon, dein komplexestes Icon, eine gekrümmte Form und ein Icon mit Aussparung enthält. Definiere die SVG-Regeln anhand dieser Stichprobe und wende sie dann auf den Rest des Sets an. So erkennst du schlechte Nachzeichnungsentscheidungen, bevor sie sich auf Dutzende Dateien ausbreiten.

Die Umwandlung selbst ist nur ein Schritt. Ein brauchbares UI-Kit braucht außerdem ein gemeinsames Koordinatensystem, einheitliche optische Größe, vorhersehbares Farbverhalten, bearbeitbare Pfade und eine Ausgabeprüfung in dem Produkt, das die Icons verwenden wird.

Der kurze Ablauf

1. Erfasse das PNG-Set und finde Duplikate oder fehlende Vorlagen.
2. Wähle repräsentative Icons und definiere das gemeinsame Raster, Innenabstände, Füllungs- oder Konturmodell und Farbregeln.
3. Wandle die Beispiel-Icons in echte Pfade um.
4. Prüfe Silhouette, Knoten, Negativraum und Farbbereiche.
5. Vereinheitliche das Set in einem Vektoreditor und wandle danach die übrigen Icons um und prüfe sie.
6. Teste die exportierten SVGs in der tatsächlichen Oberfläche und Asset-Pipeline.

Entscheiden, welche PNG-Icons SVG werden sollen

Flächige Icons mit klaren Grenzen eignen sich gut zum Nachzeichnen. Andere Bilder brauchen einen anderen Weg. Sortiere den Ordner, bevor du einen Konverter öffnest.

Ist die verbliebene Vorlage ein Icon-Container statt einer PNG, gewinne sie zuerst über den passenden ICO-zu-SVG- oder ICNS-zu-SVG-Ablauf zurück. Vereinheitliche die resultierende Grafik danach anhand derselben UI-Kit-Regeln weiter unten.

Ein SVG-Dateiname beweist nicht, dass die Pixel zu Vektorpfaden wurden. Das Format darf über ein <image>-Element ein Rasterbild einbetten, wie die SVG-Spezifikation für eingebettete Inhalte erklärt. Lässt sich eine exportierte Datei weiterhin nur als ein rechteckiges Bild auswählen oder wird sie bei starkem Zoom blockig, nutze die Prüfungen für eingebettete Rasterbilder, bevor du sie zum Kit hinzufügst.

UI-Kit-Regeln vor dem Nachzeichnen festlegen

Ein Ordner mit einzeln sauberen Icons kann zusammen trotzdem uneinheitlich wirken. Schreibe zuerst die Regeln für das Set auf, auch wenn die ursprünglichen PNGs ihnen noch nicht folgen.

Einen Koordinatenraum wählen

Nutze eine gemeinsame viewBox für Icons, die dieselbe Komponentengröße haben sollen. Die Zahlen müssen nicht 24 mal 24 oder 16 mal 16 sein; sie müssen zu deinem System passen. SVG bildet das viewBox-Rechteck auf den angezeigten Viewport ab. Identische Außenabmessungen helfen deshalb nur, wenn die Grafik darin einheitlich positioniert ist. Die SVG-2-Spezifikation für Koordinatensysteme definiert diese Zuordnung.

Halte fest:

• die gemeinsame viewBox;
• die gewünschte visuelle Mitte und Grundlinie;
• den Mindestinnenabstand;
• welche Teile bewusst über die üblichen optischen Grenzen hinausragen dürfen.

Ein Füllungs- oder Konturmodell wählen

Entscheide, ob die Familie aus gefüllten Silhouetten, bearbeitbaren Konturen oder einer dokumentierten Mischung besteht. Ein konturbasiertes Umriss-Set braucht einheitliche Linienenden, Verbindungen und wahrgenommene Strichstärke. Ein gefülltes Set braucht einheitliche Negativräume und Kantenbehandlung. Nachzeichnen kann einen dünnen Strich in einen geschlossenen Umriss verwandeln; prüfe deshalb die Geometrie, statt dich auf die Vorschau zu verlassen.

Entscheiden, wie die Farbe gesteuert wird

Verwende für ein einfarbiges System eine wiederholbare Farbregel, die die Zielanwendung ihrem Icon-Token zuordnen kann. Definiere bei mehrfarbigen Icons die erlaubte Palette und welche Bereiche sich ändern dürfen. Behalte keine winzigen nahezu identischen Farben aus der Kantenglättung, sofern sie keinen sichtbaren Zweck erfüllen.

Zuerst eine repräsentative Stichprobe umwandeln

Wähle vier bis sechs Icons, die schwierige Fälle sichtbar machen. Nimm einen Kreis oder Bogen, eine Diagonale, einen kleinen Innenraum oder ein Loch und das dichteste Icon der Familie auf. Verwendet das Set mehrere Farben, nimm auch ein solches Icon dazu.

1. Die PNGs vorbereiten

Nutze den saubersten verfügbaren Export. Entferne versehentliche Hintergrundrechtecke, schneide einheitlich zu und vergrößere keine kleine unscharfe Vorlage bloß, um mehr Pixel zu erzeugen. Die Vorbereitungsanleitung zum Umwandeln von PNG in SVG ohne Qualitätsverlust behandelt die nachzeichnungsspezifischen Details.

Bewahre eine unveränderte Kopie jedes Originals auf. Bereinigung lässt sich leichter beurteilen, wenn du die SVG mit der Vorlage vergleichen kannst, statt dich auf dein Gedächtnis zu verlassen.

2. Die Beispiel-Icons nachzeichnen

Nutze einen automatischen Vektorisierer oder das Nachzeichnungswerkzeug deiner Designsoftware. Illustrators aktueller Bildnachzeichner bietet Einstellungen für Farben, Pfade, Ecken und Rauschen. Figmas aktuelle Vectorize-Funktion bietet nach dem Nachzeichnen Farbmodi und weist darauf hin, dass komplexe oder niedrig aufgelöste Bilder möglicherweise nicht gut vektorisiert werden können (Adobe Bildnachzeichner; Figma Vectorize).

Für einen browserbasierten Weg lade die Stichprobe in PerfectVectors PNG-zu-SVG-Konverter hoch. Vergleiche die Vorschau mit dem Original, prüfe Formen und Farbbereiche und lade dann die SVG herunter, die du in deinem Vektoreditor vereinheitlichen möchtest. Verarbeite die repräsentative Gruppe, bevor du dich auf den Rest des Ordners festlegst.

Ist Figma der Master-Editor deines Kits, hilft der Vergleich von Figma Vectorize und externem SVG-Ablauf, beide Wege anhand derselben Stichprobe zu vergleichen. Beurteile die Formen nach dem Import, einschließlich der Öffnungen und Farbbereiche, die du bearbeiten musst.

3. Die Pfade prüfen, nicht nur die Vorschau

Öffne jedes Ergebnis in einem Vektoreditor und wähle die Formen aus. SVG-Pfade bestehen aus Befehlen und Koordinaten, einschließlich der in der SVG-2-Pfadspezifikation definierten Linien- und Kurvensegmente. Du brauchst genügend Knoten, um die Silhouette zu erhalten; eine allgemeine Zielzahl gibt es nicht.

Achte auf:

• dichte Knotenketten an einer einfachen Kurve;
• vereinzelte Sprenkel oder Hintergrundrechtecke;
• überlappende Kopien derselben Kante;
• winzige Farbfragmente durch Kantenglättung;
• Löcher oder Innenräume, die sich beim Nachzeichnen geschlossen haben;
• ein einzelnes Rasterrechteck statt auswählbarer Pfade.

Ist eine einfache Form unter Punkten begraben, nutze vor dem Vereinfachen die Diagnose für zu viele Knoten. Aggressive Bereinigung kann Ecken verschieben und kleine Räume schließen; vergleiche deshalb den bearbeiteten Pfad mit der PNG.

Die Icons als eine Familie vereinheitlichen

Sobald die Beispielnachzeichnungen strukturell sauber sind, platziere sie auf dem gemeinsamen Raster und prüfe sie zusammen. Hier wird ein Set zu einem System.

Prüfung des gesamten Sets

Prüfe das Set in der tatsächlichen Icon-Größe der Benutzeroberfläche und bei größerem Bearbeitungszoom:

Optische Korrekturen sind erlaubt. Ein Kreis muss möglicherweise etwas über den Rahmen hinausragen, der ein Quadrat enthält, damit beide gleich groß erscheinen. Die Regel ist eine einheitliche Wahrnehmung auf Grundlage eines dokumentierten Rasters, statt jede Form in identische geometrische Grenzen zu zwingen. Der Ablauf für druckbare visuelle Ablaufkarten wendet diese Unterscheidung auf Bildfelder, separate Beschriftungen und eine bemaßte PDF-Seite an.

Nutze bei einem Set mit Bildern für Alltagsabläufe, deren Formen vor dem Kartenlayout bearbeitet werden müssen, den Konverter für Grafiken visueller Hilfen an einer repräsentativen Zeichnung. Halte Beschriftungen getrennt und prüfe, dass das umgewandelte Bild weiterhin die gewünschte Bedeutung trägt.

So sieht das mit PerfectVector aus

PerfectVector passt in die Nachzeichnungsphase zwischen Vorlagenvorbereitung und Vereinheitlichung des Sets. Rekonstruiere damit eine repräsentative PNG-Stichprobe als bearbeitbare Vektorformen und beurteile dann die Ausgabe nach den für dieses Kit wichtigen Kriterien:

1. Erhält jedes Icon seine Silhouette und Negativräume?
2. Kannst du die vorgesehenen Bereiche auswählen und umfärben?
3. Verwenden die Kurven eine handhabbare Menge Knoten?
4. Ist das Ergebnis leichter zu vereinheitlichen als eine manuelle oder in der Anwendung erzeugte Nachzeichnung?

Besteht die Stichprobe, wandle die übrigen geeigneten PNGs um und bringe sie zur Prüfung des gesamten Sets in dieselbe Masterdatei. Scheitert sie, ändere Vorlage oder Nachzeichnungsmethode, bevor du weitere Icons verarbeitest. PerfectVector ersetzt nicht die Entscheidungen zu optischer Ausrichtung und Benennung, die zum Designsystem gehören.

Bereinigen, ohne die Vorlage zu verlieren

Halte zwei Dateiebenen vor:

• Quellenarchiv: unveränderte PNGs, vorhandene ursprüngliche Designdateien und Herkunftsnotizen.
• Bearbeitbarer Master: vereinheitlichte Vektor-Icons auf dem gemeinsamen Raster.
• Ausgabeexporte: die optimierten SVGs, die das Produkt verwendet.

Bearbeite Formen im Master und erzeuge danach die Ausgabedateien neu. Vermeide manuelle Änderungen an getrennten Exporten, weil Korrekturen zwischen den Kopien auseinanderlaufen. Braucht eine SVG Umfärbung, Formänderung oder eine Korrektur der Arbeitsfläche, nutze den SVG-Bearbeitungsablauf und übertrage die korrigierte Geometrie zurück in das Master-Set.

Wenn die Ausgabe wiederverwendbare Web-Icons nutzt, folge nach Freigabe der Grafik dem SVG-Symbol-Sprite-Ablauf. Er prüft Symbol-IDs, verschachtelte Referenzen, Koordinatengrenzen, Farbregeln und Instanznamen, bevor das Set in die Anwendung gelangt. Zeichnet die Oberfläche Icons auf Canvas, übertrage SVG-Pfade mit Path2D auf Canvas und prüfe Koordinatentransformation, Farben, Öffnungen und Auflösung des Canvas-Pixelpuffers anhand des SVG-Masters.

Ist Penpot das Ziel für die Designbibliothek, füge eine Beispiel-SVG auf der Arbeitsfläche ein und teste einen Farbbereich und eine Kontur, bevor du den Rest des Kits hinzufügst. Die Penpot-Anleitung für SVG-Import trennt Projektdateiimport und Grafikeinfügung und erklärt die Prüfung nativer Formen, roher SVG-Inhalte und bearbeitbarer Beschriftungen. Das erkennt ein Icon, das richtig aussieht, aber die vom Kit benötigten Bearbeitungen nicht unterstützt.

Teste vor der Übergabe einige Icons in jeder relevanten Umgebung: Designbibliothek, Anwendungskomponente und jedem Build- oder Optimierungsschritt. Prüfe deaktivierte Zustände und Zustände mit umgekehrten Farben, falls das System sie nutzt. Eine strukturell saubere Datei kann für das Kit trotzdem ungeeignet sein, wenn ihre Farb- oder Größenannahmen nicht zur Komponente passen. Ist Android das Ziel, nutze die Import-Checkliste für PNG zu VectorDrawable, um Viewport-Größe, Füllungen, Pfadkomplexität und Importerunterstützung zu prüfen, bevor das Asset in die App gelangt. Nutze für Godot-Projekte die Godot-Checkliste für SVG-Import, um den Texturimporttyp zu wählen und Rastergröße, Oversampling und unterstützte Grafik zu prüfen. Nutze für Unity-Projekte die Unity-Checkliste für SVG-Import, um einen zum Editor kompatiblen Importer zu wählen und das Ziel UI Toolkit oder Sprite zu prüfen.

Prüfe bei SwiftUI-Projekten den Ablauf für SVG-Asset-Katalog und Darstellung, um die benannte Bildressource, das Farbverhalten bei Darstellung in Originalfarben oder als Vorlage und die endgültige Anzeigegröße zu bestätigen.

Checkliste zur UI-Kit-Übergabe

• Jedes nachgezeichnete Icon stammt aus der saubersten verfügbaren Vorlage.
• Icons teilen die dokumentierte viewBox, Innenabstände und Ausrichtungsregeln.
• Optische Größe und wahrgenommene Strichstärke sind bei der tatsächlichen UI-Größe einheitlich.
• Gefüllte und konturbasierte Icons folgen dem festgelegten Modell des Systems.
• Farbbereiche lassen sich vorhersehbar der freigegebenen Palette oder Token-Regel zuordnen.
• Kurven verwenden genügend Knoten für Wiedergabetreue ohne offensichtliches Pfadchaos.
• Keine SVG enthält ein versehentlich eingebettetes Raster, Hintergrundrechteck oder eine doppelte Kante.
• Datei- und Komponentennamen sind eindeutig und stabil.
• Das exportierte Set wurde nach dem normalen Optimierungsschritt des Produkts getestet.
• Quellenarchiv, bearbeitbarer Master und Ausgabedateien werden getrennt gehalten.

FAQ

Kann ich alle PNG-Icons im Stapel umwandeln, bevor ich sie bereinige? Das ist möglich, aber eine repräsentative Stichprobe ist sicherer. Wandle einige Icons um, die die schwierigsten Formen des Sets abdecken, lege Raster- und Pfadregeln fest und verarbeite erst danach den Rest. Sonst kann eine schlechte Nachzeichnungsentscheidung wiederholte Bereinigungsarbeit im gesamten Ordner erzeugen.

Sollte jedes SVG-Icon dieselbe viewBox verwenden? Icons, die dieselbe UI-Komponente nutzen, profitieren meist von derselben viewBox, doch die Grafik darin braucht möglicherweise optische Anpassungen. Halte den Koordinatenraum einheitlich und erlaube Kreisen, spitzen Formen oder ungewöhnlich dichten Icons dokumentiertes Überragen oder geänderte Innenabstände.

Wie viele Knoten sollte ein UI-Icon haben? Es gibt keine allgemeine Zahl. Nutze die geringste Knotenzahl, die die beabsichtigte Silhouette, Ecken und Negativräume erhält. Vergleiche ähnlich komplexe Icons und prüfe jede einfache Kurve, die eine dichte Punktkette enthält.

Sollte ich PNG-Icons behalten, nachdem das SVG-Set fertig ist? Ja. Bewahre die ursprünglichen PNGs und frühere Designvorlagen in einem Archiv auf. Sie dokumentieren die Herkunft und bieten eine visuelle Referenz, wenn eine Nachzeichnung wiederholt werden muss. Nutze den vereinheitlichten Vektormaster für Bearbeitungen und erzeuge daraus die Ausgabe-SVGs.

Quellen

1. W3C — SVG-Koordinatensysteme, Transformationen und Einheiten — Definiert SVG-Viewports, Koordinatensysteme, viewBox und die Zuordnung der Grafik zu einem angezeigten Bereich.
2. W3C — SVG-Pfade — Definiert die Linien- und Kurvenbefehle der bearbeitbaren SVG-Pfadgeometrie.
3. W3C — Eingebettete SVG-Inhalte — Bestätigt, dass SVG Rasterbildinhalte statt Vektorpfade enthalten kann.
4. Adobe Illustrator — Bilder mit dem Bildnachzeichner vektorisieren — Dokumentiert den aktuellen Raster-Nachzeichnungsablauf und die Ausgabe bearbeitbarer Pfade.
5. Figma Learn — Statische Bilder in Vektorebenen umwandeln — Dokumentiert Figmas aktuellen Vectorize-Ablauf, Farbmodi und Grenzen der Bildvorlagen.

---

Beginne mit den schwierigsten wenigen Icons, nicht mit dem gesamten Ordner. Wandle die Beispiel-PNGs in SVG um, prüfe ihre Pfade und Farbbereiche und vereinheitliche dann das beste Ergebnis anhand deiner UI-Kit-Regeln, bevor du den Ablauf auf das ganze Set ausweitest.