XAML : Récupérer un chemin vectoriel à partir d’une image ou d’une icône

Bonjour à tous,

Pour les logos de type flat il est intéressant d’utiliser un chemin vectoriel au lieu d’une image. Ceux-ci prennent moins de place et peuvent être utilisés  sur toutes les tailles sans problème de pixellisation ou de perte de détail. Par exemple avec ceux-ci pas besoin d’avoir différentes icônes en fonction de la résolution d’écran de votre utilisateur.

Voici un simple exemple d’utilisation d’une image vectoriel

<ViewBox>
<Path Fill="Black" 
Data="m 47.5625 330.9375 0 -264.375 343.125 0 343.125 0 0 264.375 0 264.375 -132.1875 0 -132.1875 0 0 -26.71875 0 -26.71875 105.46875 0 105.46875 0 0 -210.9375 0 -210.9375 -289.6875 0 -289.6875 0 0 210.9375 0 210.9375 105.46875 0 105.46875 0 0 26.71875 0 26.71875 -132.1875 0 -132.1875 0 0 -264.375 z m 316.875 130.55176 0 -132.88574 -33.52243 33.51273 -33.52243 33.51273 -18.50579 -18.52317 -18.5058 -18.52317 65.15322 -65.14816 65.15323 -65.14817 65.15323 65.14817 65.15322 65.14816 -18.5058 18.52317 -18.50579 18.52317 -33.52243 -33.51273 -33.52243 -33.51273 0 132.88574 0 132.88574 -26.25 0 -26.25 0 0 -132.88574 z"
/>
</ViewBox>

Si vous travaillez avec des designers vous pouvez demander à ceux-ci de vous fournir une image au format svg.

 

Pour récupérer le chemin vectoriel j’utilise l’outil inkscape que vous pouvez récupérer gratuitement https://inkscape.org/fr/telecharger/windows/ :

  1. Ouvrez votre fichier vectoriel (format .svg) avec inkscape
  2. Enregistrez-sous au format xaml microsoft
  3. Ouvrez le fichier extrait et récupérez le path que vous pourrez réutiliser dans votre xaml

blog ai3 svg-1024x626 XAML :  Récupérer un chemin vectoriel à partir d'une image ou d'une icône

Si vous disposez uniquement  de l’image au format png il faut ajouter quelques étapes :

  1. Ouvrez votre fichier image avec inkscape (pour un bon résultat prévoyez une grande image simple)
  2. Clic droit sur l’image, vectoriser le bitmap
  3. Si vous le souhaitez, vous pouvez configurer la vectorisation puis valider
  4. Cliquer à nouveau sur l’image et supprimer l’image
  5. Vous aurez ensuite au premier plan votre image vectoriel et n’aurez qu’à l’exporter comme dans le premier exemple

blog ai3 vectoriser-1024x640 XAML :  Récupérer un chemin vectoriel à partir d'une image ou d'une icône

Plus d’excuse pour avoir des icônes pixelisées dans vos applications !

Thierry

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.