PNG vers VectorDrawable Android : les vérifications d’importation

Android Studio ne vectorise pas un PNG. Son Vector Asset Studio importe des fichiers SVG ou PSD et convertit la géométrie prise en charge en XML VectorDrawable. Un workflow PNG fiable comporte donc deux étapes : tracer les pixels en véritable SVG, puis importer ce SVG dans Android Studio.

Un convertisseur direct de PNG vers VectorDrawable peut combiner les deux étapes. Cela peut être pratique pour une icône simple, mais les mêmes vérifications s’appliquent. Confirme que le résultat contient des tracés, correspond à la source, utilise le viewport voulu et évite les fonctions que l’importateur Android ne peut pas représenter.

Pour une interface Flutter, suis le workflow de ressources SVG dans Flutter. Il déclare et rend le SVG via flutter_svg au lieu de le convertir en XML VectorDrawable Android natif.

Pour un projet .NET MAUI, utilise la liste de vérification des ressources d’image MAUI pour contrôler la source, la sortie de compilation et la taille d’affichage. Suis la chaîne d’images de ce projet avant d’appliquer les étapes d’importation native de VectorDrawable Android.

Le workflow court

1. Commence par un PNG propre ressemblant à une icône plutôt qu’à une photographie ou une texture.
2. Trace-le en SVG et confirme que le fichier contient des tracés modifiables, pas un PNG intégré.
3. Simplifie les formes parasites et nœuds excessifs sans changer la silhouette.
4. Importe le SVG via Vector Asset Studio dans Android Studio.
5. Inspecte le XML généré pour le viewport, les tracés, les remplissages, les contours, les dégradés et l’écrêtage.
6. Teste le drawable à sa taille réelle sur la version Android la plus ancienne prise en charge par ton application.

Choisis entre un convertisseur direct et l’approche SVG

Les deux approches arrivent à la même destination, mais exposent des points de contrôle différents.

L’approche avec SVG intermédiaire est généralement plus facile à auditer. Tu peux comparer le tracé au PNG, inspecter les formes individuellement, réparer les trous et réduire l’encombrement des tracés avant qu’Android Studio traduise à nouveau le fichier.

Les convertisseurs directs ne sont pas automatiquement mauvais. Par exemple, SVG2Vector annonce actuellement une conversion PNG vers VectorDrawable avec SVG et d’autres entrées. Traite son XML comme un candidat plutôt qu’une ressource terminée : prévisualise-le dans Android Studio, inspecte les tracés et fais les mêmes tests sur appareil décrits ci-dessous (SVG2Vector).

Étape 1 : transforme le PNG en véritables tracés SVG

Commence par la source la plus propre disponible. Les icônes en aplats aux bords clairs et à palette limitée sont de bons candidats. Les photographies, ombres douces, lueurs et textures peuvent produire de nombreuses petites formes sans devenir des ressources Android utiles.

Utilise la résolution originale du PNG. Agrandir une icône floue ajoute des pixels, pas les informations de bord manquantes. Retire tout rectangle de fond accidentel et décide avant le tracé si la ressource voulue est monochrome, multicolore ou à dégradés.

Trace les pixels

Téléverse la source dans le convertisseur PNG vers SVG de PerfectVector ou utilise un autre outil de tracé permettant d’inspecter le résultat. Si la source est sur un téléphone et que tu as d’abord besoin d’un SVG standard, suis le workflow SVG sur téléphone Android. Compare le SVG au PNG à la taille d’interface prévue, puis ouvre-le dans un éditeur vectoriel et sélectionne les formes.

Vérifie :

• une silhouette extérieure propre ;
• les trous et espaces négatifs préservés ;
• le nombre attendu de régions colorées ;
• l’absence de poussières et de cadre de fond ;
• des courbes lisses sans chaînes denses de points ;
• un viewBox qui cadre correctement le dessin.

Une extension .svg ne prouve pas qu’un tracé a été effectué. SVG peut contenir des images matricielles via un élément <image>, selon la spécification de contenu intégré du W3C. Si le dessin se sélectionne comme un seul rectangle ou révèle des blocs à fort zoom, utilise le diagnostic de contenu matriciel intégré avant de passer à Android Studio.

Simplifie uniquement là où cela aide

La complexité des tracés compte parce qu’Android doit analyser et dessiner la géométrie générée. Aucun nombre universel de nœuds n’est à viser. Une courbe simple avec des dizaines de points serrés mérite une enquête ; un bord illustré irrégulier peut réellement en avoir besoin de davantage.

Retire les fragments isolés et simplifie les chaînes de points évidentes en comparant le résultat à la source. Si le nettoyage change les angles ou ferme les petits trous, annule. Le guide des SVG avec trop de nœuds explique comment distinguer le détail utile de l’encombrement des tracés.

Deux conversions, trois vérifications

Étape 2 : importe le SVG dans Android Studio

Le workflow actuel de Vector Asset Studio d’Android accepte un fichier local SVG ou PSD, le prévisualise et génère un drawable vectoriel XML (Android Developers).

1. Dans la fenêtre Project, fais un clic droit sur le dossier res.
2. Choisis New > Vector Asset.
3. Sélectionne Local file (SVG, PSD) comme type de ressource.
4. Choisis le SVG et examine l’aperçu pour les erreurs ou changements visibles.
5. Définis le nom de la ressource et la taille voulue.
6. Passe par Next, confirme la destination et sélectionne Finish.

La ressource générée doit se trouver dans les ressources drawable de l’application sous forme XML. Garde le SVG vérifié comme original modifiable. Si la ressource doit changer visuellement plus tard, modifie le SVG et régénère le drawable au lieu de maintenir manuellement deux versions sans lien.

Qu’est-ce qui survit à l’importation SVG vers VectorDrawable ?

VectorDrawable n’est pas un moteur de rendu SVG complet. Vector Asset Studio prend en charge un sous-ensemble défini : un SVG peut donc sembler correct dans un navigateur et changer pendant l’importation.

Ces limites viennent du tableau actuel de compatibilité de Vector Asset Studio. L’importateur précise aussi que seuls les contours centrés sont pris en charge. Si la source utilise un contour intérieur ou extérieur, convertis-le en forme remplie ou redessine le bord avant l’importation.

Les dégradés exigent une vérification supplémentaire des versions. L’API VectorDrawable documente des valeurs de dégradé ou de liste d’états de couleur pour fillColor et strokeColor à partir du niveau API 24. Elle documente aussi les options evenOdd et nonZero de fillType à partir du niveau API 24 (référence API VectorDrawable). Si ton application prend en charge des versions plus anciennes, teste la chaîne de compatibilité exacte utilisée par ta compilation au lieu de supposer que l’aperçu Android Studio règle la question.

Lis le XML généré avant de l’accepter

Tu n’as pas besoin d’écrire manuellement le XML VectorDrawable, mais une vérification structurelle rapide détecte de nombreux problèmes d’importation.

Largeur, hauteur et viewport

L’élément racine <vector> sépare la taille affichée des coordonnées du dessin :

• android:width et android:height sont les dimensions par défaut du drawable, généralement en dp ;
• android:viewportWidth et android:viewportHeight définissent l’espace de coordonnées utilisé par les tracés.

Changer uniquement la largeur et la hauteur redimensionne la même géométrie. Changer le viewport modifie la correspondance entre les coordonnées des tracés et la zone affichée. Si l’icône semble recadrée, trop espacée ou étirée, compare ces quatre valeurs au viewBox du SVG et à la taille de ressource voulue.

Tracés et peinture

Chaque <path> contient android:pathData, dont les commandes suivent la même syntaxe générale que l’attribut SVG d. Vérifie fillColor, strokeColor, strokeWidth, les extrémités de ligne, les jointures et fillType lorsqu’ils sont présents.

N’optimise pas en supprimant des commandes de tracé inconnues. Compare d’abord l’aperçu à la source, puis simplifie dans l’original SVG, où la forme reste plus facile à inspecter.

Groupes et écrêtage

Les groupes peuvent porter des valeurs de translation, échelle, rotation et pivot. Un <clip-path> limite la géométrie visible. Si le résultat est décalé ou qu’une région masquée disparaît, inspecte la hiérarchie des groupes et compare-la aux transformations et à la structure d’écrêtage du SVG source.

Teste le drawable là où l’application l’utilisera

L’aperçu d’importation prouve qu’Android Studio a analysé le fichier. Il ne prouve pas que la ressource est correcte à l’exécution.

Utilise cette liste d’acceptation :

• Le drawable correspond à la silhouette voulue du PNG à la taille normale d’interface.
• Les trous, contreformes et régions superposées restent corrects.
• Les remplissages unis et contours utilisent les couleurs voulues.
• Les dégradés sont correctement rendus sur la version Android la plus ancienne prise en charge.
• Le viewport préserve les marges et le rapport d’aspect voulus.
• L’icône reste lisible dans les états clair, sombre, désactivé et teinté utilisés par l’application.
• Le XML ne contient aucun fragment accidentel ni donnée de tracé manifestement excessive.
• La ressource est testée dans le véritable composant, pas seulement dans l’aperçu d’importation.
• Le PNG original et l’original SVG modifiable restent archivés.

Teste à la taille dp réelle sur au moins un émulateur ou appareil représentant la version minimale prise en charge. Vérifie aussi les états ou thèmes qui changent la teinte. Un tracé techniquement valide peut encore échouer si ses marges, son poids visuel ou ses hypothèses de couleur diffèrent de la famille d’icônes environnante.

Si tu convertis une famille entière, applique d’abord ce processus à un échantillon représentatif. Le workflow de conversion de kit d’interface couvre les viewports communs, la taille optique, le comportement des couleurs et les vérifications de livraison de l’ensemble.

Quand garder le PNG

VectorDrawable convient surtout aux icônes et illustrations simples. Les consignes Android avertissent que les graphismes détaillés, dont de nombreuses images de lancement d’application, peuvent être mieux servis par des ressources matricielles. Elles indiquent aussi que le coût de chargement initial d’un drawable vectoriel peut être supérieur à celui d’une image matricielle et recommandent des ressources vectorielles de 200 × 200 dp ou moins pour éviter de longs temps de dessin (Android Developers).

Garde ou repense l’image matricielle quand la source dépend de :

• détails photographiques ;
• texture douce, flou ou ombres complexes ;
• nombreuses petites régions colorées ;
• un effet non pris en charge qui définit l’apparence ;
• une géométrie si dense que le XML devient difficile à vérifier et maintenir.

L’objectif n’est pas de remplacer chaque PNG. Il est d’utiliser VectorDrawable là où la géométrie de tracé redimensionnable rend la ressource Android plus petite, plus claire ou plus facile à adapter aux thèmes, sans transformer une image détaillée en amas coûteux de tracés.

Ce que cela donne avec PerfectVector

PerfectVector gère la première conversion. Pour une icône adaptée, convertis le PNG en SVG, compare les formes tracées à la source et télécharge le SVG à garder comme original modifiable. Importe ensuite ce fichier via Vector Asset Studio et audite le XML généré.

Juge le résultat sur toute la chaîne :

1. Le tracé a-t-il préservé la silhouette et les trous de la source ?
2. Les formes SVG sont-elles modifiables et sans image matricielle intégrée ?
3. Android Studio importe-t-il les remplissages, dégradés, écrêtages et transformations nécessaires ?
4. Le drawable est-il rendu correctement à sa taille réelle et au niveau API minimal ?

Un SVG propre améliore le transfert, mais ne fait pas fonctionner des fonctions Android non prises en charge. Simplifie le dessin ou garde le PNG si la destination ne peut pas reproduire fidèlement l’apparence.

FAQ

Android Studio peut-il convertir directement un PNG en VectorDrawable ? Non. Le Vector Asset Studio actuel importe des fichiers locaux SVG ou PSD, pas des PNG. Trace d’abord le PNG en véritable SVG ou utilise un convertisseur direct et audite le XML obtenu dans Android Studio.

Un SVG est-il toujours un vrai vecteur ? Non. SVG peut intégrer du contenu matriciel avec un élément image. Ouvre le fichier dans un éditeur vectoriel ou inspecte son balisage et confirme que le dessin voulu est constitué de tracés ou d’autres formes vectorielles avant l’importation.

Les dégradés SVG fonctionnent-ils dans VectorDrawable Android ? Vector Asset Studio prend en charge les dégradés linéaires, radiaux et angulaires, mais la prise en charge à l’exécution dépend du XML généré et de ta stratégie de versions Android. L’API VectorDrawable documente les couleurs de remplissage et contour dégradées à partir du niveau API 24 : teste donc la ressource sur la version la plus ancienne prise en charge par ton application.

Pourquoi les trous, masques ou textes ont-ils changé après importation ? L’importateur prend en charge un sous-ensemble SVG limité. Les règles de remplissage exigent des tests selon la version, l’écrêtage est limité et le texte n’est pas pris en charge. Convertis le texte nécessaire en contours, simplifie les structures d’écrêtage et compare l’aperçu Android au SVG avant d’accepter le drawable.

Tous les PNG d’une application Android doivent-ils devenir du XML VectorDrawable ? Non. Les icônes et illustrations simples sont les meilleurs candidats. Garde les photographies, images très texturées, effets complexes et dessins trop détaillés comme ressources matricielles, sauf si un redessin délibéré produit une géométrie de tracé plus simple.

Sources

1. Android Developers — ajouter des graphismes vectoriels pour plusieurs densités — Documente le workflow d’importation SVG et PSD de Vector Asset Studio, le sous-ensemble SVG pris en charge, les mises en garde de performance et les ressources drawable générées.
2. Android Developers — référence API VectorDrawable — Définit les attributs XML de vector, path, group et clip-path, dont le viewport, la peinture, les règles de remplissage et le comportement par niveau API.
3. W3C — contenu intégré SVG — Confirme que SVG peut contenir des images matricielles via l’élément image.
4. Manuel Inkscape — tracer une image — Explique la distinction entre tracer les pixels matriciels et travailler avec le bitmap original.
5. SVG2Vector — conversion PNG vers VectorDrawable — Fournit l’approche de convertisseur direct actuelle présentée dans la comparaison de workflows.

---

Prêt à tester une icône de production ? Convertis le PNG en SVG, inspecte les tracés, puis importe le fichier vérifié dans Android Studio. Garde le drawable uniquement après validation du viewport, des couleurs, des trous et du rendu à l’exécution.