Introduction sur les images vectorielles sur le web
Il existe une alternative pour selon les cas et besoins, le SVG (Scalable Vector Graphics). Le SVG est un langage XML pour créer des graphismes. Il permet aussi de créer des animations et des interfaces d’utilisateur. Un graphisme SVG intégré dans un site permet de garder un aspect net et une définition parfaite indépendamment de la résolution du dispositif de l’utilisateur.
Depuis toujours JPG et GIF sont les deux formats classiques à utiliser sur le web. Les bonnes pratiques consistent à bien optimiser la compression pour rendre les fichiers les plus légers possible.
Fichier SVG en « object »
GIF avec taille forcée
Avantages
Extensible. Aujourd’hui il est évident que le SVG est l’allié parfait du responsive design et des retinas displays.
Léger. Les fichiers sont légers comme une plume, et aussi faciles à optimiser avec des petits logiciels. Et s’ils sont intégrés dans la source, d’autant plus.
Accessible. SVG est un langage d’étiquettes XML, il est donc a la portée de main de tous. Par conséquence, le XML offre le confort de ne rien demander du côté serveur. Le web designer est indépendant pour créer son image vectorielle.
Il utilise des étiquettes juste comme le HTML. Séparer le contenu de la forme est la base de tout web design. Avec le SVG nous allons aussi séparer le style du graphisme de son contenu, cela devient le rêve de l’optimisation ultime. La magie continue quand on le combine avec le CSS.
Support de navigateurs. La majorité de navigateurs modernes supportent le SVG.
Précautions
Connaitre la dose. Comme pour tout dans le web, la base est l’optimisation. Il faut savoir les utiliser correctement pour chaque cas. Par exemple si vous avez des centaines d’éléments animés, le canvas sera toujours plus fluide car il ne surchargera pas la lecture d’éléments DOM du navigateur.
Le moteur Webkit (Chrome et Safari) semble encore limité pour rendre des visuels parfaits.
Support Internet Explorer. Pour assurer le support d’Internet Explorer 8 et inférieur il est conseillé d’utiliser la librairie javascript Raphaël.
Ce SVG pèse seulement 7k. Optimisé sous GIF avec l’exportateur web d’Illustrator, il pèserait 16k ! Crédit : Agence Dream. Police Break.
Les possibilités d’utilisation et le potentiel sont énormes. Le développement ne cesse d’avancer à grands pas ainsi que son implémentation.
Dans le 3e chapitre de ce tutoriel je vous montre comment créer en CSS un titre animé avec le fichier SVG en background que nous avons réalisé précédemment. Vous saurez comment j’ai réalisé l’en-tête animé de la page d’accueil de Dream. Il s’agit d’un apprentissage pas…
Voici le 2e chapitre de ce tutoriel sur comment faire un motif sur Adobe Illustrator et l'exporter en SVG. Je vous montre du début à la fin comment j'ai réalisé l'en-tête "Commerce" de la page d'accueil de l'Agence Dream. Il s'agit d'un apprentissage pas à pas…