SVG dans WPF : choisir un moteur ou un dessin XAML

Un SVG s’ouvre dans ton navigateur, mais placer son nom de fichier dans un Image WPF ne fournit pas la même chaîne de rendu. Commence par choisir ce que l’application recevra réellement : un SVG traité par une bibliothèque, des objets de dessin WPF natifs ou un export matriciel.

Les codecs d’image intégrés à WPF incluent PNG et JPEG, mais ne listent pas SVG. Son contrôle Image peut aussi afficher un DrawingImage ; un affichage vectoriel n’implique donc pas forcément le chargement direct d’un fichier SVG. Microsoft décrit ces méthodes distinctes d’imagerie et de source de dessin.

Ce guide utilise une icône originale de marque-page pour concrétiser ce choix. Le SVG et le XAML ci-dessous ont été écrits à la main ; ce ne sont ni une mesure comparative de convertisseur ni une capture d’application Windows.

Choisir la représentation avant de modifier le fichier

Ces choix concernent l’objet affiché par l’application. Ils ne décident pas si le concepteur doit garder un original SVG éditable. Préserve cet original même si l’application reçoit un PNG.

Essayer d’abord un petit DrawingImage natif

Pour une icône simple, un dessin écrit à la main fournit une référence utile sans introduire d’analyseur SVG. Microsoft montre la structure : définis Image.Source avec un DrawingImage, puis affecte le dessin à sa propriété Drawing. L’exemple original suivant suit ce modèle documenté.

Voici le dessin SVG : un marque-page bleu-vert et un cercle corail distinct. Enregistre-le sous bookmark.svg si tu veux une source à comparer dans ton éditeur.

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="80"
     viewBox="0 0 120 80">
  <path fill="#176B64" d="M20 12 H64 V68 L42 54 L20 68 Z"/>
  <circle fill="#EC785E" cx="92" cy="24" r="10"/>
</svg>

Place cet Image dans le conteneur de mise en page d’une fenêtre WPF existante, par exemple un Grid :

<Image xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       Width="120" Height="80" Stretch="Uniform">
  <Image.Source>
    <DrawingImage>
      <DrawingImage.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="Transparent"
                           Geometry="M0,0 H120 V80 H0 Z"/>
          <GeometryDrawing Brush="#176B64"
                           Geometry="M20,12 H64 V68 L42,54 L20,68 Z"/>
          <GeometryDrawing Brush="#EC785E">
            <GeometryDrawing.Geometry>
              <EllipseGeometry Center="92,24" RadiusX="10" RadiusY="10"/>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
        </DrawingGroup>
      </DrawingImage.Drawing>
    </DrawingImage>
  </Image.Source>
</Image>

Les deux objets de dessin visibles décrivent séparément le marque-page et le cercle. Le rectangle transparent établit les limites complètes de 120 sur 80 du dessin, y compris la marge vide autour. Il ne rogne pas la géométrie suivante et ne transforme pas le XAML en document SVG.

Les coordonnées sont des choix de création délibérés. Compare les deux extraits : le marque-page utilise les mêmes points et le cercle le même centre et rayon. C’est une petite traduction manuelle vérifiable, pas une recette pour traduire toutes les fonctionnalités SVG en XAML.

Les fichiers source ont été vérifiés comme XML, mais cet exemple n’a pas été compilé ni rendu dans une application WPF Windows. Teste-le dans ton projet avant de l’adopter.

Vérifier limites et pinceaux avant la réutilisation

Commence à la taille fournie. Confirme que l’encoche inférieure du marque-page reste visible et que le cercle reste détaché. Essaie ensuite un emplacement de mise en page plus large ou plus haut. Stretch="Uniform" préserve les proportions en ajustant à la zone disponible, comme le décrivent les consignes Microsoft d’étirement des images.

Change la valeur corail de Brush pour une autre couleur. C’est une modification volontaire d’un objet de dessin natif ; cela ne prouve pas que les parties de n’importe quel SVG importé fourniront les mêmes commandes pratiques.

Si le dessin semble décentré, compare ses limites au viewBox et aux marges vides du SVG. Une silhouette correcte peut toujours occuper une proportion différente de son emplacement. Garde cette référence simple pendant l’introduction du dessin final.

Utiliser un moteur lorsque le SVG reste l’entrée

Lorsque maintenir une géométrie native à la main n’est pas pratique, évalue une bibliothèque qui lit explicitement les SVG pour WPF. Le paquet SharpVectors.Wpf fournit des composants d’analyse, conversion et visualisation SVG. Sa page de paquet est le bon endroit pour vérifier la version actuelle, les frameworks cibles et les dépendances avant de l’ajouter à un projet.

La documentation de démarrage de SharpVectors décrit la conversion en objets de dessin WPF et des exemples d’affichage basé sur des images. C’est donc une méthode différente de demander à la chaîne matricielle ordinaire de décoder un nom de fichier SVG.

Utilise le marque-page original comme première entrée de la bibliothèque, puis remplace-le par ton dessin réel. Garde ces vérifications distinctes :

1. Chargement : l’exemple choisi résout-il le fichier ou la ressource d’application dans ton projet ?
2. Représentation : l’API renvoie-t-elle des objets de dessin, produit-elle du XAML ou rend-elle une image matricielle pour ton cas ?
3. Apparence : l’encoche, le cercle détaché, les couleurs et les marges vides sont-ils corrects dans l’application en cours d’exécution ?
4. Déploiement : le résultat exige-t-il l’assembly d’exécution de la bibliothèque ou d’autres ressources sur la machine cible ?

Suis les exemples correspondant à ta version installée. SharpVectors décrit un réglage IncludeRuntime, marque TextAsGeometry comme déprécié et signale des changements d’espace de noms pour la version 2.0. Ce sont des raisons de revoir les anciens extraits avant de copier leurs réglages, pas de supposer qu’une configuration de conversion restera adaptée indéfiniment. Documentation SharpVectors

Pour un logo avec lettrage, examine la sortie cible réelle ainsi que la source. Notre guide des changements de police SVG explique la différence entre texte dépendant des polices et lettrage conservé en contours. Convertir du texte peut changer ce qui reste éditable ; garde donc le fichier de conception original.

Ne pas emprunter SvgImageSource au mauvais framework XAML

Une recherche sur ce problème peut conduire à la référence Microsoft SvgImageSource. La documentation de la classe UWP place ce type dans Windows.UI.Xaml.Media.Imaging. C’est une API différente des contrôles et classes média System.Windows de WPF.

Vérifie le framework cité par un exemple avant d’ajouter un espace de noms ou un paquet. Un balisage XAML similaire ne fait pas d’une source d’image UWP ou WinUI une fonctionnalité WPF intégrée. Une solution pour un autre framework peut être valable là-bas tout en étant la mauvaise réponse pour ton projet desktop.

Décider si un PNG suffit

Un export PNG est un choix de livraison raisonnable lorsque les tailles requises sont connues et que l’application n’a pas besoin de modifier la géométrie. Exporte pour ces tailles, compare les bords transparents au fond réel et examine la plus grande utilisation affichée. Augmenter la taille de mise en page d’une image matricielle ne recrée pas les tracés source.

Vérifie aussi ce que contient le SVG avant de consacrer du temps à une bibliothèque de rendu. S’il intègre seulement une image matricielle, importer l’enveloppe ne la rendra pas géométrie éditable. Le guide du matriciel intégré dans les SVG montre quoi examiner. Pour une collection d’icônes, applique les mêmes vérifications de marges et silhouettes à l’ensemble ; notre procédure de préparation d’icônes d’interface traite de cette étape graphique.

Si le marque-page ou logo n’existe plus qu’en PNG ou JPG, la procédure image vers vecteur de PerfectVector peut aider à préparer un SVG candidat éditable. Examine la silhouette, l’encoche et les détails séparés reconstruits avant de choisir une méthode de livraison WPF. La vectorisation prépare le dessin ; elle n’installe pas un moteur WPF et ne garantit pas une conversion XAML native.

Le guide plus général de vectorisation d’images explique cette reconstruction de la source. Une fois la source prête, les vérifications d’application appartiennent toujours à WPF.

FAQ

Image de WPF peut-il charger directement un fichier SVG ? Les codecs d’image intégrés documentés de WPF n’incluent pas SVG. Utilise une bibliothèque compatible SVG, fournis des objets de dessin natifs via DrawingImage ou un format matriciel pris en charge comme PNG.

DrawingImage est-il la même chose qu’un fichier SVG ? Non. DrawingImage affiche des objets de dessin WPF. Une bibliothèque SVG peut créer ces objets, ou tu peux les écrire directement, comme dans le petit exemple ici.

Puis-je utiliser l’exemple UWP SvgImageSource dans WPF ? Ne le traite pas comme une API WPF intégrée. La référence UWP appartient à un autre espace de noms et framework ; choisis du code et des dépendances pour ton application réelle.

Convertir un SVG en XAML préserve-t-il tous les effets ? Ne le suppose pas. Vérifie les capacités documentées du convertisseur et examine le dessin dans l’application cible, notamment texte, limites, formes séparées et effets.

Sources

1. Microsoft — Présentation de l’imagerie WPF — Formats matriciels intégrés et comportement d’étirement des images.
2. Microsoft — Utiliser un dessin comme source d’image — DrawingImage natif et structure des objets de dessin.
3. SharpVectors — Démarrage — Conversion en dessins WPF, réglages d’exécution et précautions documentées de migration.
4. NuGet — SharpVectors.Wpf — Identité actuelle du paquet et informations de compatibilité.
5. Microsoft — Classe UWP SvgImageSource — Frontière de framework et d’espace de noms d’une API souvent confondue.

Choisis une méthode WPF et compare un petit dessin avant de remplacer tout ton ensemble de ressources. Si un dessin matriciel nécessite une reconstruction, prépare un SVG candidat éditable, examine les formes, puis teste la représentation choisie dans ton application.