Webinaire du 28 janvier 2020 : Utiliser des dessins vectoriels à la place d’images de différentes résolutions

En multiplateforme comme en desktop Windows classique la question de la résolution d’écran se pose de plus en plus. Delphi permet de gérer un certain nombre de choses de façon transparente et les nouveaux composants d’images multi résolutions pour la VCL présents depuis la version 10.3.3 Rio simplifient encore les choses.

Le problème c’est que si vous avez beaucoup de visuels dans vos projets VCL ou FMX vous devez y embarquer ces images dans plusieurs tailles différentes ce qui apporte des contraintes en terme de volume à déployer et de maintenance.

Il existe une solution : travailler avec des visuels vectoriels.

A l’origine le format SVG a été créé pour afficher des graphiques sur des pages web et les fichiers PDF mais il a bien vite remplacé les différents formats de cliparts utilisés dans les présentations PowerPoint et documents Word des années 90.

Il est possible de les utiliser aussi dans nos projets à l’aide de plusieurs solutions logicielles dont je vous présenterai une sélection.

Les outils utilisés lors de cette session seront : Delphi, Inkspace, Adobe Illustrator, des composants intégrés à Delphi et plusieurs librairies externes (dont les solutions proposées par RiverSoft, Winsoft et TMS Software).

Ma présentation est disponible en format PDF.

Voici également le replay de la session en live. J'ai un peu cafouillé sur les démos mais me rattraperai dès que possible en faisant des vidéos sur chaque librairie de façon indépendante (et surtout au calme, sans pelleteuse ni squatter un bureau le temps de l'enregistrement). Elles seront ajoutées sur cet article ou dans d'autres selon les cas. Vous les retrouverez de toute façon sur la chaîne YouTube du blog et mon compte Viméo.

Correctif important concernant ce que j'ai dit lors de la conférence en ligne : ce n'est pas RiverSoft qui référence le SVG comme format d'image partout, c'est TMS Software qui permet ainsi d'utiliser ce format et leur moteur de rendu sur tous les composants affichant un TBitmap (FMX) et TGraphic (VCL), qu'ils soient développés par TMS ou un tiers.

Voici également les liens promis. Je complèterai la liste au fil du temps et de vos remarques.

Concernant les dessins vectoriels, à la base des "chemins" et du SVG, je vous suggère de jeter un oeil à ces pages :

Pour créer vos propres dessins vectoriels vous pouvez utiliser l'un de ces logiciels. Notez que certains font du SVG et d'autres permettent de faire les chemins à utiliser de façon indépendante des formes (donc dans le composant TPath standard).

Vous pouvez trouver des fichiers vectoriels sur ces sites, parfois gratuits. N'oubliez pas lorsque vous utiliser des images venant d'ailleurs de vous assurer que vous avez le droit de les utiliser et que leurs auteurs sont bien identifiés et rétribués (même si c'est juste avec un lien ou un remerciement quelque part). Ne piochez jamais des images depuis Google Images même si ça vous dit qu'elles sont libres !

  • Icon Icons (packs d'icones gratuits, licence pas claire)
  • Icons 8 (utilisation libre, gratuit)
  • Material Design Icons (utilisation libre, gratuit, permet de récupérer des fichiers SVG et des chemins pour le composant TPath)
  • Adobe Stock (achat d'images vectorielles (format Illustrator ou SVG selon les cas) à l'unité, sous forme de packs et d'abonnements mensuels et annuels)

Il existe de nombreux sites d'icones "libres de droit" où piocher mais faites attention à leur contenu et à la provenance de ce qu'ils proposent gratuitement ou à la vente. Les graphistes ne gagnent déjà pas grand chose avec ces plateformes, autant passer par celles qui les rémunèrent réellement.

Dans vos programmes développés sous Delphi ou C++Builder vous pouvez utiliser le composant TPath disponible dans la palette de composants sous FireMonkey. Il permet de dessiner des chemins encodés d'une certaine façon et monochromes (la couleur étant paramétrable).

Les livres Delphi Cookbook et Delphi Programming Project publiés par Packt ont un passage abordant la question du composant TPath et en proposent chacun des idées d'utilisations.

Si vous désirez utiliser du SVG avec la VCL voici quelques solutions :

Si vous désirez utiliser du SVG avec FireMonkey (FMX) voici quelques solutions :

D'autres librairies de composants ou de classes permettent de travailler ponctuellement avec le SVG. C'est notamment le cas pour 

Pour finir sur les liens je vous propose aussi de jeter un coup d'oeil aux librairies suivantes. Elles ne proposent pas le support du SVG en tant que tel mais fournissent des composants vectoriels dessinant des formes de base ou évoluées :

  • Radiant Shapes, téléchargeable gratuitement depuis GetIt, propose des formes de base très paramétrables.
  • Impact chez RiverSoftAVG fourni des éléments d'interface utilisateur (jauges, horloges, ...).
  • EXT Graph fournit un ensemble de composants open source pour dessiner des schémas et graphiques.
  • Simple Graph est en quelque sorte l'ancêtre de EXT Graph. Il fournit un canvas pour dessiner des graphiques.

Comme toujours, si vous avez des liens à me suggérer ou des remarques sur le contenu de ces listes ou du site en général, faites m'en part sans hésiter.


Mug Toucan DX dans la baie de RioMug carte postale Sydney