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.

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.

Article de Codrops avec un exemple créatif sur le potentiel du SVG : on déclenche l’animation avec l’action de l’utilisateur (clique avec la souris).

La démo en live avec des boutons.

 

Publié le 29 octobre 2015 Par Mag Alés
Catégories : Journal Étiquettes : Design, Web design, SVG