Images SVG Flutter : intégrer, dimensionner, vérifier

Pour afficher une ressource SVG dans Flutter, ajoute flutter_svg, déclare le fichier dans pubspec.yaml et charge ce même chemin avec SvgPicture.asset. Donne des dimensions au widget ou des contraintes de mise en page adaptées, puis inspecte le dessin dans ton application. Le constructeur de ressources du paquet documente ce mode de chargement.

Garde deux questions distinctes : l’application a-t-elle chargé le fichier voulu et le moteur a-t-il reproduit le dessin prévu ? Réexporter un dessin ne répare pas une clé de ressource mal orthographiée. Corriger la clé ne simplifie pas un effet non pris en charge.

Cette méthode utilise une illustration originale de collines et de soleil pour rendre ces contrôles simples. Le code suit l’API documentée ; ce n’est pas le compte rendu d’un test d’application compilée.

Commence par une petite source facile à inspecter

Crée assets/illustrations/hills.svg dans ton projet Flutter :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 48">
  <circle cx="49" cy="11" r="6" fill="#e99b30"/>
  <path d="M4 42L24 14L44 42Z" fill="#167d8d"/>
  <path d="M28 42L43 23L60 42Z" fill="#233b63"/>
</svg>

La source possède deux collines triangulaires superposées et un soleil ambré détaché. Elle utilise des remplissages explicites, sans texte ni images liées, et laisse un espace visible entre le soleil et les collines. Ces détails donnent une courte liste de critères d’acceptation pour vérifier l’application.

Garde une copie de ce fichier simple lorsque tu introduis ensuite ton propre dessin. Si la petite source fonctionne mais que son remplacement échoue, compare leurs structures avant de changer toute la configuration de chargement.

Une ressource SVG Flutter constitue aussi une méthode de livraison différente du XML Android VectorDrawable. Si ta destination est un drawable Android natif, utilise le guide de préparation Android VectorDrawable au lieu de traiter les deux formats comme interchangeables.

Ajoute le paquet et déclare le fichier exact

Depuis la racine du projet Flutter, utilise la commande officielle d’installation :

flutter pub add flutter_svg

Ajoute ensuite cette entrée de ressource dans la section flutter: existante de pubspec.yaml :

flutter:
  assets:
    - assets/illustrations/hills.svg

Fusionne l’entrée avec ta configuration actuelle au lieu de créer une seconde section flutter:. Conserve l’indentation montrée. La documentation Flutter des ressources définit ces chemins par rapport à pubspec.yaml et explique comment les fichiers listés entrent dans le paquet de l’application.

Utilise la même orthographe, casse et structure de dossiers dans le nom du fichier, la déclaration et l’appel Dart. Pour ce premier contrôle, une entrée de fichier explicite est plus facile à comparer qu’une entrée de dossier globale. Si tu déclares ensuite des répertoires, Flutter documente qu’une entrée de répertoire couvre ses fichiers directs ; les répertoires imbriqués nécessitent leurs propres entrées.

Après modification de la configuration des ressources, recompile et lance l’application selon ta méthode habituelle de développement. Ne suppose pas qu’un fichier visible dans l’éditeur soit déjà inclus dans l’application que tu regardes.

Charge le dessin dans une boîte définie

Ajoute ces imports au fichier Dart contenant ton widget :

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

Place ce widget à un endroit adapté de ton écran :

SvgPicture.asset(
  'assets/illustrations/hills.svg',
  width: 128,
  height: 96,
  fit: BoxFit.contain,
  semanticsLabel: 'Sun above two hills',
  errorBuilder: (context, error, stackTrace) =>
      const Text('Illustration unavailable'),
)

La boîte suit les proportions de la source. Inspecte le soleil détaché, les deux couleurs de collines et les marges extérieures avant d’essayer une taille plus petite. Utilise ensuite les dimensions nécessaires à ton vrai composant ; les nombres ci-dessus sont un exemple, pas une taille minimale ou une recommandation de performances.

La documentation du constructeur recommande des dimensions explicites ou des contraintes de mise en page strictes afin que le chargement ne modifie pas la mise en page de façon inattendue. Si le dessin semble trop petit dans la boîte, inspecte l’espace vide de son viewBox ainsi que les dimensions du widget.

L’étiquette décrit la fonction de cette image autonome. L’API semanticsLabel la relie à l’étiquette sémantique de l’image. Pour une image décorative placée près d’un texte qui transmet déjà le sens, envisage plutôt de l’exclure de la sémantique. L’option excludeFromSemantics du constructeur est prioritaire sur l’étiquette. Examine le sens énoncé de tout le composant plutôt que d’étiqueter chaque forme séparément.

Distingue un indicateur de chargement d’une erreur

Un indicateur de chargement ne prouve pas qu’un SVG a été accepté. Le paquet fournit placeholderBuilder pendant l’acquisition ou le décodage, tandis que l’API actuelle errorBuilder fournit un widget en cas d’échec du chargement d’image.

L’exemple ci-dessus utilise un court texte de remplacement. Pendant le développement, change volontairement le chemin Dart pour un nom de fichier inexistant et vérifie que tu reconnais l’échec. Rétablis le bon chemin avant de continuer. Cela teste la présentation des erreurs sans changer le dessin lui-même.

Teste ensuite ta véritable source. Si elle échoue encore, inspecte la sortie de diagnostic et compare d’abord le chemin déclaré. Un exemple réseau qui affiche un autre SVG ne prouve pas que ton fichier local soit intégré ni que ses fonctionnalités soient prises en charge.

Décide si tu préserves la palette ou appliques une teinte

Laisse colorFilter non défini lorsque les collines doivent rester bleu-vert et bleu marine avec un soleil ambré. Pour un traitement volontairement monochrome, ajoute un filtre comme :

colorFilter: const ColorFilter.mode(
  Color(0xFF175CD3),
  BlendMode.srcIn,
),

Le paquet documente ce modèle de teinte. La référence Flutter de BlendMode explique que srcIn utilise l’opacité de la destination en ignorant ses canaux de couleur. Une teinte uniforme supprime donc les distinctions de palette de la source ; c’est un choix de conception, pas une correction de préservation des couleurs.

Pour les collines, vérifie si perdre le contraste entre les deux triangles superposés rend l’illustration moins lisible. Conserve la palette originale si ces régions doivent rester distinctes. Le paquet documente aussi ColorMapper pour les substitutions sélectives, mais commence avec le cas plus simple sans filtre lors du diagnostic d’une différence.

Simplifie les fonctionnalités seulement après le chargement

La documentation flutter_svg recommande des attributs de présentation lors des exports Illustrator, car la prise en charge CSS est incomplète, et des images intégrées plutôt que liées à l’extérieur. Elle fournit aussi un contrôle de compatibilité fondé sur le compilateur. Suis ce contrôle dans ton environnement Flutter/Dart lorsqu’une ressource complexe nécessite une investigation.

Un aperçu navigateur est une référence utile pour l’apparence prévue ; il ne prouve pas que chaque fonctionnalité SVG s’affichera à l’identique avec le paquet. Conserve le dessin original et simplifie une copie une modification à la fois.

Si la source contient du lettrage, décide s’il doit rester du texte d’application ou un dessin fixe. Le guide des changements de polices SVG explique pourquoi l’apparence peut dépendre du traitement du texte et des polices. Ne trace pas une étiquette pour résoudre un problème de chemin de ressource.

Pour une famille de ressources UI, compare ensemble leur taille visuelle et leur espacement. Le guide de préparation des icônes de kit UI aide à ce contrôle de cohérence.

Utilise la vectorisation lorsque la source doit être reconstruite

Conserve un SVG propre existant. Il peut être préférable de livrer une photographie ou un fond texturé sous forme de ressource matricielle adaptée ; changer l’extension n’en fait pas une géométrie vectorielle utile.

Si une illustration simple existe seulement sous forme de PNG imparfait, la méthode PNG vers SVG de PerfectVector peut aider à préparer un candidat modifiable. Recadre sur le dessin, inspecte l’aperçu pour détecter les formes absentes et les régions de fond indésirables, puis télécharge le SVG. Ajoute ce fichier aux ressources de l’application et répète les contrôles de chargement, palette, taille et sémantique.

Pour l’exemple des collines, cherche le soleil détaché et la séparation des deux pentes colorées. Confirme que le fichier contient la structure voulue ; le guide des images matricielles intégrées explique pourquoi une enveloppe SVG peut encore contenir des pixels.

Évalue la ressource dans l’application avant de choisir une stratégie d’optimisation. Cette méthode ne promet pas de façon générale qu’un SVG soit plus petit ou plus rapide qu’un PNG.

Si tu réutilises le dessin dans une application .NET MAUI, suis la méthode MAUI source vers PNG. Le projet conserve l’original SVG tandis que la vue référence un PNG préparé pendant la compilation.

FAQ

Comment ajouter une image SVG à Flutter ? Ajoute flutter_svg, déclare la ressource SVG dans pubspec.yaml et charge le chemin correspondant avec SvgPicture.asset. Définis des dimensions ou des contraintes adaptées et inspecte le résultat.

Pourquoi mon SVG local n’apparaît-il pas ? Vérifie d’abord la déclaration de ressource, le chemin exact, l’erreur de chargement et la mise en page. Si une source simple fonctionne, compare la structure et les fonctionnalités prises en charge du dessin défaillant.

Pourquoi toutes les couleurs sont-elles devenues identiques ? Un filtre de couleur srcIn uniforme remplace la palette visible par sa teinte. Supprime ce filtre lorsque les couleurs originales doivent rester distinctes.

Dois-je transformer un PNG en SVG pour Flutter ? Non. Utilise une ressource matricielle adaptée lorsqu’elle convient au dessin. La vectorisation est facultative pour reconstruire des formes modifiables à partir d’une source matricielle simple.

Sources

1. flutter_svg — Installation — Installation du paquet et import Dart.
2. Flutter — Ajout de ressources et d’images — Déclarations, chemins et intégration des ressources.
3. flutter_svg — SvgPicture.asset — Chargement de ressources, dimensions, ajustement et contrôles sémantiques.
4. flutter_svg — errorBuilder — Présentation des échecs distincte des indicateurs de chargement.
5. flutter_svg — semanticsLabel — Fonction sémantique de l’image.
6. Flutter — BlendMode — Traitement de couleur srcIn fondé sur l’opacité.
7. flutter_svg — Documentation du paquet — Teinte, correspondance sélective des couleurs, conseils d’export et contrôles de compatibilité.

Commence avec une ressource déclarée et vérifie son chemin, sa palette, sa taille et son sens dans ton application. Si une illustration matricielle doit être reconstruite, prépare un SVG candidat, inspecte ses formes et effectue les mêmes contrôles avant de l’ajouter à ta famille de ressources.