SVG dans .NET MAUI : conserve le SVG, utilise le PNG

Pour utiliser SVG dans la méthode d’images intégrées de .NET MAUI, conserve le SVG dans ton projet et référence depuis XAML ou C# le nom PNG généré. MAUI traite la source vectorielle pendant la compilation. Un Image pointant vers compass.png peut donc être correct même si le fichier ajouté est compass.svg. Le guide Microsoft des images de projet documente cette conversion.

Cela explique le nom du fichier, mais laisse une question de conception : quelle taille MAUI doit-il générer et que faut-il inspecter ensuite ? Suis un petit emblème de boussole à travers sa source, les métadonnées du projet et sa déclaration d’affichage.

Suis la source pendant la compilation

Le SVG modifiable et l’image empaquetée ont des rôles différents. Garde la source pour ajuster ultérieurement ses formes, espaces vides ou couleurs. Utilise le nom généré dans la vue qui l’affiche.

La documentation du contrôle Image décrit les images aux densités cibles qui entrent dans le paquet de l’application et la sélection d’une résolution adaptée par le système d’exploitation. Conserver un original SVG ne signifie pas que cette méthode précise fournit un document SVG actif à la vue.

Ajoute un petit SVG aux limites claires

Enregistre cet exemple original sous Resources/Images/compass.svg :

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
  <circle cx="48" cy="48" r="34" fill="none" stroke="#173e52" stroke-width="8"/>
  <path d="M58 28L52 52L28 58Z" fill="#ed765e"/>
</svg>

L’anneau laisse un centre transparent et l’aiguille corail est une forme distincte. Ces détails donnent des éléments précis à vérifier après l’importation. Les dimensions déclarées et le viewBox carré clarifient aussi le cadrage prévu. Consulte le guide des fichiers SVG pour comprendre la différence entre géométrie vectorielle et bitmap intégré à une enveloppe SVG.

Dans ton projet, confirme que le fichier possède l’action de compilation MauiImage. Microsoft documente Resources/Images comme emplacement habituel. Avant d’ajouter du XML, inspecte les éléments existants du projet : celui-ci inclut peut-être déjà ce dossier avec un caractère générique. La configuration des images de projet explique l’emplacement et l’action de compilation.

Mets à jour une fois un élément existant

Si un caractère générique MauiImage existant inclut déjà le fichier de boussole, place cette mise à jour de métadonnées après cette inclusion :

<ItemGroup>
  <MauiImage Update="Resources\Images\compass.svg" BaseSize="48,48" />
</ItemGroup>

Update change les métadonnées d’un élément déjà présent. Il n’ajoute pas un fichier absent à la liste des éléments. Si ton projet ne possède aucune inclusion correspondante, ajoute le fichier une seule fois avec l’action de compilation MauiImage ou un Include explicite. La référence Microsoft des éléments MSBuild distingue ces opérations.

Cela évite une correction tentante : ajouter répétitivement des entrées Include en cherchant une image manquante. Détermine d’abord si le fichier est inclus, puis modifie ses métadonnées.

Référence le PNG et règle la zone d’affichage

Place cette déclaration dans une page ou une mise en page MAUI existante :

<Image Source="compass.png"
       WidthRequest="48"
       HeightRequest="48"
       Aspect="AspectFit"
       SemanticProperties.Description="Compass" />

L’extension .png est volontaire. La largeur et la hauteur demandent une zone d’affichage carrée ; AspectFit y conserve toute l’image visible. Si ton illustration est rectangulaire, utilise une zone adaptée plutôt que de l’étirer pour remplir un carré. La référence Microsoft de mise à l’échelle des images distingue ajustement, recadrage et étirement.

Le code de boussole est un exemple de configuration original, et non un test de rendu sur appareil enregistré. Compile-le dans ton projet cible et inspecte la vue obtenue. Un nom de fichier correct ne suffit pas à établir que ton dessin particulier est rendu comme prévu.

BaseSize et taille de mise en page résolvent des problèmes différents

BaseSize="48,48" fournit les dimensions de base à partir desquelles MAUI dérive des images propres aux densités. Sans taille de base explicite, MAUI utilise les dimensions propres au SVG. Microsoft documente les deux règles dans Redimensionner une image.

Dans cet exemple, le dessin source utilise un espace de coordonnées de 96 sur 96, tandis que la base demandée et la vue mesurent 48 sur 48. Ces nombres sont des choix de conception délibérés, et non des dimensions de sortie mesurées après compilation. L’anneau doit conserver ses proportions lorsqu’il est redimensionné.

Si tu utilises ensuite le même emblème dans une vue bien plus grande, réexamine la taille de compilation et inspecte aussi cet usage. Modifier WidthRequest ne modifie ni le dessin source ni ses métadonnées de compilation. Inversement, changer BaseSize ne supprime pas les marges vides du SVG. Resserre les limites du dessin dans la source si l’emblème paraît trop petit dans une vue par ailleurs correctement dimensionnée.

Évite d’utiliser Resize="false" comme correction générale de netteté. Cela désactive le redimensionnement des images vectorielles dans cette chaîne. Choisis-le uniquement si c’est le comportement voulu, selon l’option de redimensionnement documentée.

Vérifie une image absente ou inattendue dans l’ordre

1. Confirme le nom du fichier et l’élément de projet. Utilise un nom en minuscules comme compass.svg et cherche une autre image de même nom. Les règles de nommage Microsoft exigent des noms d’images uniques et des caractères compatibles avec Android.
2. Vérifie la source de la vue. Pour la méthode SVG intégrée, utilise compass.png dans XAML ou C#.
3. Compare la zone d’affichage prévue à la taille de base. Modifier la taille de vue et modifier la taille de compilation se font à des endroits différents.
4. Inspecte le dessin lui-même. Le centre de l’anneau est-il encore ouvert ? L’aiguille corail est-elle distincte ? L’emblème est-il centré, ou des espaces invisibles de la source le décalent-ils ?

Inspecte aussi les métadonnées d’image qui modifient la peinture. Le guide des images de projet documente TintColor et Color pour la teinte et la couleur de fond. Laisse-les non définis dans cet exemple bicolore, sauf si tu veux changer son apparence. Vérifie l’image sur le véritable fond de page, où la perte d’une ouverture transparente se repère plus facilement.

Lorsque tu as besoin d’un comportement SVG à l’exécution

Un contenu SVG téléchargé, des tracés interactifs ou des modifications à l’exécution nécessitent une décision d’implémentation distincte. Les instructions d’images intégrées ci-dessus ne démontrent pas la prise en charge de ces tâches.

Par exemple, le projet d’exemples SVG Vapolia documente ses propres contrôles SvgImage et SvgImageSource et sa configuration de ressources intégrées. C’est un autre contrat de chargement. Évalue les fonctionnalités et plateformes cibles prises en charge par le moteur avec ton fichier réel avant de l’introduire ; changer l’extension dans une déclaration Image normale n’installe pas un moteur de rendu.

Le même dessin nécessite aussi des configurations différentes avec la méthode d’images SVG Flutter, le catalogue de ressources SwiftUI et un import Android VectorDrawable. Réutilise l’original source, puis suis les règles de chaque destination.

Prépare un original vectoriel lorsqu’il ne reste qu’un PNG

Si la boussole ou le logo existe seulement en PNG, PerfectVector peut aider à créer un dessin SVG modifiable avant son ajout au projet MAUI. Convertis le PNG en SVG, puis inspecte l’ouverture de l’anneau, les petites pièces détachées et l’espacement dans un éditeur. Garde un original propre pour les futurs changements de taille ou de couleur.

La vectorisation ne répare pas une déclaration MauiImage et ne transforme pas la chaîne d’images intégrées en analyseur SVG à l’exécution. Si la source est déjà un SVG modifiable, travaille directement sur la configuration du projet ou le dessin. Photos et dessins texturés peuvent être plus utiles comme images matricielles ; les tracer uniquement parce que l’application accepte les sources SVG ajoute une décision de dessin distincte.

FAQ

Pourquoi référencer un PNG alors que j’ai ajouté un SVG ? .NET MAUI convertit les sources d’images SVG intégrées en PNG pendant la compilation. Conserve le SVG dans le projet et référence le nom de fichier PNG depuis XAML ou C#.

BaseSize définit-il la taille du contrôle Image ? BaseSize définit les dimensions de base utilisées pour dériver les images de compilation aux différentes densités. La mise en page de la vue et ses demandes de taille contrôlent sa zone d’affichage.

Dois-je ajouter un autre MauiImage Include pour modifier BaseSize ? Vérifie si le fichier est déjà inclus, y compris par un caractère générique. Utilise Update pour modifier les métadonnées d’un élément existant ; utilise Include uniquement lorsqu’il faut ajouter l’élément.

Cela charge-t-il un SVG téléchargé après la compilation de l’application ? La méthode d’images intégrées ne couvre pas le téléchargement et l’analyse SVG à l’exécution. Choisis et teste une approche de rendu à l’exécution pour ce besoin.

Sources

1. Microsoft — Ajouter des images à un projet d’application .NET MAUI — Traitement SVG vers PNG, éléments d’images, noms de fichiers, taille de base et métadonnées de compilation.
2. Microsoft — Image — Références d’images locales, sélection de densité cible, taille de vue et comportement de mise à l’échelle.
3. Microsoft — Élément Item (MSBuild) — Différence entre l’ajout d’un élément avec Include et la modification de métadonnées existantes avec Update.
4. Vapolia — Exemples SVG — Méthode distincte de contrôle SVG à l’exécution et de chargement des ressources.

Tu travailles à partir d’un emblème d’application uniquement matriciel ? Transforme ton PNG en SVG modifiable, vérifie ses ouvertures et son espacement, puis ajoute cet original à MAUI et inspecte l’image générée dans ton application cible.