Desktop First UX Summit 2021 : Vector Graphics: Lottie and SVG with Skia

Comme il avait déjà eu l’occasion de le faire sur son blog, Jim McKeeth est revenu sur l’intérêt d’utiliser le plus souvent possible des images vectorielles plutôt que des images classiques (GIF, JPG, PNG ou autres). L’intérêt est double : la qualité quelle que soit la résolution d’écran et l’encombrement.

Bien entendu cela ne s’applique qu’à des dessins simplistes, pas à des photos.

Après avoir l’avantage des dessins vectoriels, Jim nous a montré comment en créer simplement avec l’outil Boxy SVG, nettement plus simple à prendre en main que Adobe Illustrator et à priori également plus simpliste que Inkscape, mais suffisant pour notre usage.

Jim a également fait le tour de plusieurs sites permettant de créer ou obtenir des images vectorielles pour finir par des images vectorielles animées et leur utilisation dans un projet Delphi.

La librairie Skia est maintenue par Google. Elle permet l’affichage de différents types d’images sur les principaux systèmes d’exploitation. Elle est notamment utilisée par Google Chrome.

En utilisant cette librairie on peut ainsi afficher ce que Google Chrome arrive à afficher.

Le projet Skia4Delphi fourni un parser et des composants permettant d’utiliser cette librairie dans les projets VCL, FireMonkey mais aussi en console pour la génération d’images.

On peut s’en servir pour afficher des fichiers SVG, des images PNG animées, des fichiers Lottie (images important des effets Adobe After Effect gérés en JSON, comme des icônes animées) ou même des nuages de particules !

Proposé par Embarcadero dans les projets FireMonkey nous pouvons utiliser le composant TPath, mais il gère un chemin, pas le format SVG en lui-même.

Pour mettre en pratique dans vos projets Delphi et C++Builder, vous pouvez aussi consulter ce webinaire et la liste de solutions que j’avais testées pour utiliser le format SVG dans les projets VCL et FireMonkey.