PNG zu Android VectorDrawable: Eine Importcheckliste

Android Studio zeichnet eine PNG nicht in Vektorpfade nach. Sein Vector Asset Studio importiert SVG- oder PSD-Dateien und konvertiert unterstützte Geometrie in VectorDrawable-XML. Ein zuverlässiger PNG-Workflow hat deshalb zwei Stufen: Zeichne die Pixel in eine echte SVG nach und importiere dann diese SVG in Android Studio.

Ein direkter PNG-zu-VectorDrawable-Konverter kann beide Stufen verbinden. Das kann für ein einfaches Symbol praktisch sein, aber dieselben Prüfungen gelten weiterhin. Bestätige, dass die Ausgabe Pfade enthält, zur Quelle passt, den gewünschten Viewport nutzt und Merkmale vermeidet, die der Android-Importer nicht darstellen kann.

Folge für eine Flutter-Oberfläche dem Workflow für Flutter-SVG-Assets. Er deklariert und rendert die SVG über flutter_svg, statt sie in natives Android-VectorDrawable-XML umzuwandeln.

Nutze für ein .NET-MAUI-Projekt die Checkliste für MAUI-Bildressourcen, um Quelle, Build-Ausgabe und Anzeigegröße zu prüfen. Folge der Bildpipeline dieses Projekts, bevor du native Android-VectorDrawable-Importschritte anwendest.

Der kurze Workflow

1. Beginne mit einer sauberen, symbolartigen PNG statt mit einem Foto oder einer Textur.
2. Zeichne sie in SVG nach und bestätige, dass die Datei bearbeitbare Pfade statt einer eingebetteten PNG enthält.
3. Vereinfache verstreute Formen und übermäßige Knoten, ohne die Silhouette zu ändern.
4. Importiere die SVG über Android Studios Vector Asset Studio.
5. Prüfe das erzeugte XML auf Viewport-, Pfad-, Füllungs-, Kontur-, Verlaufs- und Beschneidungsverhalten.
6. Teste das Drawable in tatsächlicher Größe auf der ältesten von deiner App unterstützten Android-Version.

Wähle zwischen direktem Konverter und SVG-Weg

Beide Wege enden am selben Ziel, machen aber unterschiedliche Prüfpunkte sichtbar.

Der Weg mit SVG als Zwischenformat lässt sich meist leichter prüfen. Du kannst die Nachzeichnung mit der PNG vergleichen, einzelne Formen untersuchen, Löcher reparieren und Pfadballast reduzieren, bevor Android Studio die Datei erneut übersetzt.

Direkte Konverter sind nicht automatisch falsch. SVG2Vector bewirbt beispielsweise aktuell PNG-zu-VectorDrawable-Konvertierung neben SVG und anderen Eingaben. Betrachte sein XML als Kandidaten statt als fertiges Asset: Prüfe die Vorschau in Android Studio, untersuche die Pfade und führe dieselben unten beschriebenen Gerätetests durch (SVG2Vector).

Stufe 1: Wandle die PNG in echte SVG-Pfade um

Beginne mit der saubersten verfügbaren Quelle. Flächige Symbole mit klaren Kanten und begrenzter Palette sind gute Kandidaten. Fotografien, weiche Schatten, Leuchteffekte und Textur können viele kleine Formen erzeugen, ohne zu nützlichen Android-Assets zu werden.

Nutze die ursprüngliche Auflösung der PNG. Das Vergrößern eines unscharfen Symbols ergänzt Pixel, keine fehlenden Kanteninformationen. Entferne versehentliche Hintergrundrechtecke und entscheide vor dem Nachzeichnen, ob das gewünschte Asset monochrom, mehrfarbig oder verlaufsbasiert ist.

Zeichne die Pixel nach

Lade die Quelle in PerfectVectors PNG-zu-SVG-Konverter hoch oder nutze ein anderes Nachzeichnungswerkzeug mit Ergebnisprüfung. Liegt die Quelle auf einem Smartphone und brauchst du zuerst eine normale SVG, folge dem SVG-Workflow auf Android-Smartphones. Vergleiche SVG und PNG in der gewünschten Oberflächengröße, öffne sie dann in einem Vektoreditor und wähle die Formen aus.

Prüfe:

• eine saubere Außensilhouette;
• erhaltene Löcher und Negativräume;
• die erwartete Zahl der Farbflächen;
• keine verstreuten Flecken oder Hintergrundbox;
• glatte Kurven ohne dichte Punktketten;
• eine viewBox, die die Grafik richtig einrahmt.

Eine .svg-Endung beweist nicht, dass nachgezeichnet wurde. SVG kann laut W3C-Spezifikation für eingebettete Inhalte Rasterinhalt über ein <image>-Element enthalten. Wenn sich die Grafik als ein Rechteck auswählen lässt oder bei starkem Zoom blockig wird, nutze die Diagnose eingebetteter Rasterbilder, bevor du zu Android Studio wechselst.

Vereinfache nur, wo es hilft

Pfadkomplexität ist wichtig, weil Android die erzeugte Geometrie parsen und zeichnen muss. Es gibt keine allgemein gültige Zielzahl für Knoten. Eine einfache Kurve mit Dutzenden eng gepackten Punkten sollte untersucht werden; eine unregelmäßige illustrierte Kante kann tatsächlich mehr brauchen.

Entferne isolierte Fragmente und vereinfache offensichtliche Punktketten, während du das Ergebnis mit der Quelle vergleichst. Wenn die Bereinigung Ecken verändert oder kleine Löcher schließt, mache sie rückgängig. Die Anleitung zu SVGs mit zu vielen Knoten erklärt, wie du nützliche Details von Pfadballast unterscheidest.

Zwei Konvertierungen, drei Prüfungen

Stufe 2: Importiere die SVG in Android Studio

Androids aktueller Vector-Asset-Studio-Workflow akzeptiert eine lokale SVG- oder PSD-Datei, zeigt eine Vorschau und erzeugt ein XML-VectorDrawable (Android Developers).

1. Klicke im Project-Fenster mit der rechten Maustaste auf den Ordner res.
2. Wähle New > Vector Asset.
3. Wähle Local file (SVG, PSD) als Asset-Typ.
4. Wähle die SVG und prüfe die Vorschau auf Fehler oder sichtbare Änderungen.
5. Lege Ressourcennamen und gewünschte Größe fest.
6. Gehe mit Next weiter, bestätige das Ziel und wähle Finish.

Die erzeugte Ressource gehört als XML in die Drawable-Ressourcen der App. Behalte die geprüfte SVG als bearbeitbares Original. Wenn das Asset später eine visuelle Änderung braucht, bearbeite die SVG und erzeuge das Drawable erneut, statt zwei unabhängige Versionen von Hand zu pflegen.

Was bleibt beim SVG-zu-VectorDrawable-Import erhalten?

VectorDrawable ist kein vollständiger SVG-Renderer. Vector Asset Studio unterstützt eine definierte Teilmenge; eine SVG kann daher im Browser richtig aussehen und sich beim Import trotzdem verändern.

Diese Grenzen stammen aus der aktuellen Kompatibilitätstabelle von Vector Asset Studio. Der Importer weist außerdem darauf hin, dass nur mittige Konturen unterstützt werden. Wenn die Quelle eine Innen- oder Außenkontur verwendet, wandle sie vor dem Import in eine gefüllte Form um oder zeichne die Kante neu.

Verläufe brauchen eine zusätzliche Versionsprüfung. Die VectorDrawable-API dokumentiert Verlaufs- oder Color-State-List-Werte für fillColor und strokeColor ab API-Level 24. Sie dokumentiert außerdem die fillType-Optionen evenOdd und nonZero ab API-Level 24 (VectorDrawable-API-Referenz). Wenn deine App ältere Versionen unterstützt, teste den exakten Kompatibilitätsweg deines Builds, statt anzunehmen, die Android-Studio-Vorschau kläre die Frage.

Lies das erzeugte XML, bevor du es akzeptierst

Du musst VectorDrawable-XML nicht von Hand schreiben, aber eine kurze Strukturprüfung erkennt viele Importprobleme.

Breite, Höhe und Viewport

Das Wurzelelement <vector> trennt Anzeigegröße von Zeichnungskoordinaten:

• android:width und android:height sind die Standardmaße des Drawables, normalerweise in dp;
• android:viewportWidth und android:viewportHeight definieren den von den Pfaden genutzten Koordinatenraum.

Wenn du nur Breite und Höhe änderst, skaliert dieselbe Geometrie. Eine Viewport-Änderung verändert, wie Pfadkoordinaten auf diese Anzeigefläche abgebildet werden. Wenn das Symbol beschnitten oder gestreckt wirkt oder zu viel Innenabstand hat, vergleiche diese vier Werte mit der SVG-viewBox und der gewünschten Asset-Größe.

Pfade und Farbauftrag

Jeder <path> enthält android:pathData, dessen Befehle derselben allgemeinen Pfadsyntax wie das SVG-Attribut d folgen. Prüfe fillColor, strokeColor, strokeWidth, Linienenden, Linienverbindungen und fillType, sofern vorhanden.

Optimiere nicht durch das Löschen unbekannter Pfadbefehle. Vergleiche zuerst die Vorschau mit der Quelle und vereinfache dann im SVG-Original, wo die Form leichter prüfbar bleibt.

Gruppen und Beschneidung

Gruppen können Verschiebungs-, Skalierungs-, Drehungs- und Drehpunktwerte tragen. Ein <clip-path> begrenzt sichtbare Geometrie. Wenn das Ergebnis versetzt ist oder ein maskierter Bereich verschwindet, prüfe die Gruppenhierarchie und vergleiche sie mit den Transformationen und der Beschneidungsstruktur der Quell-SVG.

Teste das Drawable dort, wo die App es nutzt

Die Importvorschau beweist, dass Android Studio die Datei geparst hat. Sie beweist nicht, dass das Asset zur Laufzeit korrekt ist.

Nutze diese Abnahmecheckliste:

• Das Drawable entspricht der gewünschten PNG-Silhouette bei normaler UI-Größe.
• Löcher, Innenräume und überlappende Flächen bleiben korrekt.
• Vollfarbenfüllungen und Konturen verwenden die gewünschten Farben.
• Verläufe werden auf der ältesten unterstützten Android-Version korrekt gerendert.
• Der Viewport erhält den gewünschten Innenabstand und das Seitenverhältnis.
• Das Symbol bleibt in den hellen, dunklen, deaktivierten und eingefärbten Zuständen der App lesbar.
• Das XML enthält keine versehentlichen Fragmente oder offensichtlich übermäßigen Pfaddaten.
• Das Asset wird in der echten Komponente getestet, nicht nur in der Importvorschau.
• Die ursprüngliche PNG und das bearbeitbare SVG-Original bleiben archiviert.

Teste in tatsächlicher dp-Größe auf mindestens einem Emulator oder Gerät, das deine älteste unterstützte Version repräsentiert. Prüfe außerdem jeden Zustand oder jedes Theme, das die Einfärbung verändert. Ein technisch gültiger Pfad kann trotzdem scheitern, wenn Innenabstand, visuelles Gewicht oder Farbannahmen vom umgebenden Symbolsatz abweichen.

Wenn du eine ganze Familie konvertierst, wende diesen Prozess zuerst auf eine repräsentative Auswahl an. Der Konvertierungsworkflow für UI-Kits behandelt gemeinsame Viewports, optische Größe, Farbverhalten und Übergabeprüfungen für den gesamten Satz.

Wann du die PNG behältst

VectorDrawable eignet sich am besten für einfache Symbole und Illustrationen. Androids Hinweise warnen, dass detaillierte Grafiken, darunter viele App-Startbilder, mit Rasterassets besser bedient sein können. Sie erwähnen auch, dass die anfänglichen Ladekosten eines VectorDrawables höher als bei einem Rasterbild sein können, und empfehlen Vektorassets von höchstens 200 mal 200 dp, um lange Zeichenzeiten zu vermeiden (Android Developers).

Behalte oder gestalte das Raster neu, wenn die Quelle von Folgendem abhängt:

• fotografischen Details;
• weicher Textur, Unschärfe oder komplexen Schatten;
• vielen winzigen Farbflächen;
• einem nicht unterstützten Effekt, der das Erscheinungsbild bestimmt;
• so dichter Geometrie, dass das XML schwer prüfbar und wartbar wird.

Das Ziel ist nicht, jede PNG zu ersetzen. Es ist, VectorDrawable dort zu nutzen, wo skalierbare Pfadgeometrie das Android-Asset kleiner, klarer oder leichter an Themes anpassbar macht, ohne ein detailliertes Bild in einen kostspieligen Pfadstapel zu verwandeln.

So sieht das mit PerfectVector aus

PerfectVector übernimmt die erste Konvertierung. Für ein geeignetes Symbol wandelst du die PNG in SVG um, vergleichst die nachgezeichneten Formen mit der Quelle und lädst die SVG herunter, die du als bearbeitbares Original behalten möchtest. Importiere sie anschließend über Vector Asset Studio und prüfe das erzeugte XML.

Beurteile das Ergebnis anhand der gesamten Kette:

1. Hat die Nachzeichnung Silhouette und Löcher der Quelle erhalten?
2. Sind die SVG-Formen bearbeitbar und frei von eingebettetem Raster?
3. Importiert Android Studio die benötigten Füllungen, Verläufe, Beschneidungen und Transformationen?
4. Wird das Drawable in tatsächlicher Größe und auf dem minimalen API-Level korrekt gerendert?

Eine saubere SVG verbessert die Übergabe, macht aber nicht unterstützte Android-Funktionen nicht funktionsfähig. Vereinfache das Design oder behalte die PNG, wenn das Ziel das Erscheinungsbild nicht originalgetreu reproduzieren kann.

FAQ

Kann Android Studio eine PNG direkt in VectorDrawable umwandeln? Nein. Das aktuelle Vector Asset Studio importiert lokale SVG- oder PSD-Dateien, keine PNG-Dateien. Zeichne die PNG zuerst in eine echte SVG nach oder nutze einen direkten Konverter und prüfe das entstandene XML in Android Studio.

Ist eine SVG immer ein echter Vektor? Nein. SVG kann Rasterinhalt mit einem image-Element einbetten. Öffne die Datei in einem Vektoreditor oder prüfe ihr Markup und bestätige vor dem Import, dass die gewünschte Grafik aus Pfaden oder anderen Vektorformen besteht.

Funktionieren SVG-Verläufe in Android VectorDrawable? Vector Asset Studio unterstützt lineare, radiale und Winkelverläufe, aber die Laufzeitunterstützung hängt vom erzeugten XML und deiner Android-Versionsstrategie ab. Die VectorDrawable-API dokumentiert Verlaufsfarben für Füllungen und Konturen ab API-Level 24; teste das Asset deshalb auf der ältesten von deiner App unterstützten Version.

Warum haben sich Löcher, Masken oder Text nach dem Import verändert? Der Importer unterstützt eine begrenzte SVG-Teilmenge. Füllregeln erfordern versionsbewusste Tests, Beschneidung ist begrenzt und Text wird nicht unterstützt. Wandle benötigten Text in Pfade um, vereinfache Beschneidungsstrukturen und vergleiche die Android-Vorschau mit der SVG, bevor du das Drawable akzeptierst.

Sollte jede PNG einer Android-App VectorDrawable-XML werden? Nein. Einfache Symbole und Illustrationen sind die besten Kandidaten. Behalte Fotografien, texturreiche Bilder, komplexe Effekte und übermäßig detaillierte Grafik als Rasterassets, sofern ein bewusstes Neuzeichnen keine einfachere Pfadgeometrie erzeugt.

Quellen

1. Android Developers — Vektorgrafik für mehrere Pixeldichten hinzufügen — Dokumentiert den SVG- und PSD-Importworkflow von Vector Asset Studio, die unterstützte SVG-Teilmenge, Leistungshinweise und erzeugte Drawable-Ressourcen.
2. Android Developers — VectorDrawable-API-Referenz — Definiert XML-Attribute von vector, path, group und clip-path einschließlich Viewport-, Farb-, Füllregel- und API-Level-Verhalten.
3. W3C — Eingebettete SVG-Inhalte — Bestätigt, dass SVG Rasterbildinhalt über das image-Element enthalten kann.
4. Inkscape-Handbuch — Ein Bild nachzeichnen — Erklärt den Unterschied zwischen Nachzeichnen von Rasterpixeln und Arbeiten mit dem ursprünglichen Bitmap.
5. SVG2Vector — PNG-zu-VectorDrawable-Konvertierung — Bietet den aktuellen direkten Konverterweg aus dem Workflowvergleich.

---

Bereit, ein Produktionssymbol zu testen? Wandle die PNG in SVG um, prüfe die Pfade und importiere dann die geprüfte Datei in Android Studio. Behalte das Drawable erst, nachdem Viewport, Farben, Löcher und Laufzeitdarstellung die Checkliste bestehen.