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/ :
- Ouvrez votre fichier vectoriel (format .svg) avec inkscape
- Enregistrez-sous au format xaml microsoft
- Ouvrez le fichier extrait et récupérez le path que vous pourrez réutiliser dans votre xaml
Si vous disposez uniquement de l’image au format png il faut ajouter quelques étapes :
- Ouvrez votre fichier image avec inkscape (pour un bon résultat prévoyez une grande image simple)
- Clic droit sur l’image, vectoriser le bitmap
- Si vous le souhaitez, vous pouvez configurer la vectorisation puis valider
- Cliquer à nouveau sur l’image et supprimer l’image
- Vous aurez ensuite au premier plan votre image vectoriel et n’aurez qu’à l’exporter comme dans le premier exemple
Plus d’excuse pour avoir des icônes pixelisées dans vos applications !
Thierry