Icônes d'applications mobiles : bonnes pratiques SVG pour iOS et Android

Chaque développeur mobile a vécu ce moment : vous intégrez une icône magnifiquement designée dans votre app, vous compilez, lancez le simulateur — et vous voyez une forme floue, mal alignée ou complètement invisible. L'icône était parfaite dans Figma, impeccable dans le navigateur. Mais sur un vrai appareil, quelque chose a mal tourné.

L'écart entre designer une icône SVG et la livrer dans une app mobile native est plus large que la plupart des équipes ne le réalisent. iOS et Android gèrent les assets vectoriels via des pipelines entièrement différents, avec des formats, des moteurs de rendu et des pièges différents.

Pourquoi les icônes SVG comptent pour le mobile

Les écrans mobiles existent dans une variété étourdissante de tailles et densités. Un appareil Android moderne peut tourner à 1x, 1.5x, 2x, 3x, voire 4x. Les iPhones sont à 2x et 3x. Les tablettes ajoutent encore plus de combinaisons.

Les icônes SVG résolvent ce problème en définissant les formes mathématiquement. Un fichier, résolution infinie. Mais "utilisez juste des SVG" sous-estime considérablement la complexité.

Les avantages d'un pipeline bien maîtrisé :

• Bundles d'app plus petits — un asset vectoriel remplace 4-5 exports raster
• Rendu pixel-perfect à chaque densité d'écran
• Maintenance simplifiée — un fichier source, toutes les cibles régénérées
• Meilleure accessibilité — les formes vectorielles peuvent porter des métadonnées sémantiques
• Pérennité — pas de ré-export quand de nouvelles densités apparaissent

"

Nous avons réduit notre dossier d'assets icônes de 2 400 fichiers à 380 en passant à un pipeline vector-first. Les temps de build ont chuté, les handoffs design sont devenus plus simples.

Préparer les SVG pour l'export mobile

Avant de penser aux formats spécifiques, vos SVG sources doivent être propres. Les moteurs de rendu mobile sont bien moins tolérants que les navigateurs web.

La checklist SVG propre

1. Aplatir toutes les transformations. Les transforms CSS et SVG intégrées dans les éléments groupe seront parfois ignorées par les convertisseurs mobile.

2. Vectoriser tous les contours. Le format VectorDrawable d'Android a un support limité des strokes. Convertissez les contours en chemins remplis.

3. Supprimer les calques masqués et métadonnées. Les outils de design intègrent des métadonnées, calques cachés et définitions inutilisées. Supprimez-les.

4. Utiliser un viewBox cohérent. Standardisez sur 0 0 24 24 pour les icônes UI.

5. Simplifier les chemins. Moins de points = fichiers plus petits, rendu plus rapide, moins d'artefacts de conversion.

Exemple d'icône SVG correctement nettoyée :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
        fill="currentColor"/>
</svg>

iOS : Asset Catalogs et vecteurs PDF

L'approche recommandée par Apple pour les icônes vectorielles est d'utiliser des assets PDF dans les Xcode Asset Catalogs. Depuis Xcode 12, Apple supporte aussi directement les SVG, mais le PDF reste le chemin le plus éprouvé.

Configuration des assets vectoriels dans Xcode

1. Ouvrez votre Asset Catalog (.xcassets)
2. Créez un nouveau Image Set
3. Dans l'inspecteur d'attributs, définissez Scales sur "Single Scale"
4. Définissez Resizing sur "Preserve Vector Data"
5. Déposez votre fichier PDF ou SVG

<!-- Contents.json pour un asset vectoriel -->
{
  "images" : [
    {
      "filename" : "icon-settings.svg",
      "idiom" : "universal"
    }
  ],
  "properties" : {
    "preserves-vector-representation" : true
  }
}

Tailles d'icônes iOS

Lors du design d'icônes SVG pour ces tailles, testez d'abord à la plus petite taille cible. Une icône superbe à 1024px mais floue à 40px a un problème de design, pas technique.

Android : Vector Drawables

Android gère les icônes vectorielles via son propre format XML appelé VectorDrawable. C'est essentiellement un sous-ensemble de SVG — il supporte les chemins, groupes et remplissages basiques, mais abandonne beaucoup de fonctionnalités SVG.

Conversion SVG vers VectorDrawable

Android Studio inclut un convertisseur intégré : Vector Asset Studio (File → New → Vector Asset).

<!-- res/drawable/ic_check_circle.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tintMode="src_in"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zm-2,15l-5,-5 1.41,-1.41L10,14.17l7.59,-7.59L19,8l-9,9z"/>
</vector>

Utilisation des Vector Drawables dans les layouts

<ImageView
    android:layout_width="24dp"
    android:layout_height="24dp"
    app:srcCompat="@drawable/ic_check_circle"
    android:contentDescription="@string/check_icon_desc" />

Référence des tailles d'icônes Android

Avec VectorDrawable, vous définissez les icônes une fois en dp et le système gère automatiquement la mise à l'échelle.

Pipeline automatisé d'icônes

Les exports manuels sont source d'incohérences. Maintenez un SVG source unique pour chaque icône et automatisez les conversions.

Étape 1 : Optimiser le SVG source

/* Exemple de config SVGO (svgo.config.js) */
module.exports = {
  plugins: [
    'preset-default',
    'removeDimensions',
    'removeXMLNS',
    {
      name: 'removeAttrs',
      params: {
        attrs: ['data-*', 'class']
      }
    },
    {
      name: 'addAttributesToSVGElement',
      params: {
        attributes: [
          { xmlns: 'http://www.w3.org/2000/svg' }
        ]
      }
    }
  ]
};

Étape 2 : Générer les assets par plateforme

Convertissez les SVG optimisés en :

• PDF pour iOS (avec svgexport ou cairosvg)
• VectorDrawable XML pour Android (avec svg2vectordrawable)
• SVG optimisé pour le web/PWA

Étape 3 : Valider la sortie

• Vérifier les tailles de fichiers (alerter au-dessus de 5 Ko)
• Vérifier la cohérence du viewBox
• Scanner les éléments non supportés (filtres, masques, images embarquées)
• Rendre aux tailles cibles et comparer avec des captures de référence

Erreurs courantes et corrections

1. Utiliser des contours au lieu de remplissages

Problème : Une icône utilise des tracés en contour qui semblent corrects dans le navigateur mais rendent avec une épaisseur incohérente sur mobile.

Correction : Convertissez tous les contours en remplissages avant l'export. Dans Figma : "Outline Stroke". Dans Illustrator : Objet → Tracé → Vectoriser le contour.

2. ViewBox non standard

Problème : Les icônes ont des viewBox incohérents, causant des problèmes de dimensionnement.

Correction : Standardisez sur un viewBox unique. 0 0 24 24 est la convention la plus courante.

3. Polices et texte embarqués

Problème : Une icône SVG contient un élément <text> avec une police personnalisée. La police n'est pas disponible sur l'appareil.

Correction : Convertissez tout le texte en chemins avant l'export. Toujours. Sans exception.

4. Oublier le mode sombre

Problème : Les icônes utilisent des remplissages noirs codés en dur. Elles sont invisibles sur fond sombre.

Correction : Utilisez currentColor comme valeur de remplissage. Sur iOS, utilisez le mode de rendu template. Sur Android, appliquez des teintes via android:tint.

5. Ignorer l'accessibilité

Problème : Les icônes transmettent du sens mais n'ont pas de labels d'accessibilité.

Correction : Toujours définir contentDescription sur Android et accessibilityLabel sur iOS.

Considérations de performance

Les icônes vectorielles sont généralement plus légères que les raster, mais pas gratuites. Chaque VectorDrawable ou PDF doit être parsé et rasterisé à l'exécution.

Gardez les icônes simples. Une icône UI devrait rarement dépasser 20-30 commandes de chemin.

Mettez en cache les bitmaps rendus. iOS et Android mettent en cache les versions rasterisées, mais attention aux implications mémoire.

Mesurez l'impact réel. Utilisez le profiler GPU d'Android ou les Instruments de Xcode pour mesurer le temps de rendu.

Tout assembler

Le pipeline SVG-to-mobile n'est pas compliqué une fois les contraintes de chaque plateforme comprises :

1. Designez les icônes sur une grille standardisée (24x24 recommandé) avec des chemins remplis, sans contours, sans texte, sans effets embarqués
2. Nettoyez le SVG — aplatir les transforms, vectoriser les contours, supprimer les métadonnées, optimiser avec SVGO
3. Convertissez aux formats plateforme — PDF/SVG pour iOS Asset Catalogs, VectorDrawable XML pour Android
4. Validez — vérifiez les tailles, rendez aux tailles cibles, vérifiez les labels d'accessibilité
5. Automatisez — intégrez dans votre CI/CD

Si vous travaillez avec des icônes raster existantes ou des logos complexes à convertir en vecteurs propres, VectoSolve gère le gros du travail. Notre moteur de vectorisation IA produit des SVG propres et optimisés, prêts pour les pipelines d'export mobile.