Utiliser des icônes et filtres SVG pour le Web

Par

À l’ère du tout-mobile, le format SVG (format vectoriel pour le Web) fait désormais parti des nouveaux standards de la sphère digitale. En effet, l’arrivée des écrans Retina d’Apple a enclenché le processus d’un nouveau type de design graphique digital : le Webdesign vectoriel. Il est donc plus que jamais primordial de savoir utiliser des icônes et filtres SVG pour le Web.

Ainsi, dans un souci esthétique et afin d’éviter la multiplication d’images similaires de différentes tailles (généralement une image multipliée par 2 pour les iPhones et iPad récents), le développement de sites Internet responsive est désormais contraint d’utiliser au maximum ce format vectoriel. En d’autres termes, c’est comme si l’on créait des sites Internet avec Illustrator. Dans ce post, Studio Blackthorns vous donne quelques tips pour utiliser des icônes et filtres SVG pour le Web.

Intégrez des pictos vectoriels sur vos pages

Si vous débutez avec le format SVG, voici un site présentant plusieurs dizaines d’icônes SVG pour le Web, faciles à intégrer à votre site responsive. Il suffit de sélectionner l’icône de votre choix, de copier-coller son code HTML sur votre page et d’inclure le fichier CSS permettant au navigateur d’interpréter ce code.

Et voilà ! En 2 clics vous aurez de belles icônes modernes et vectorielles d’une qualité irréprochable sur tous les supports !

Petite astuce : Pour être sûr que votre icône soit bien implémentée, faites CTRL + touche “+” de votre clavier numérique. Ceci permettra de zoomer votre site autant de fois que vous le désirez. Vous remarquerez que l’image ou l’icône en question reste toujours en top qualité ! Pour revenir au format d’affichage 100%, faites CTRL + 0.


Lien vers le site des icônes vectorielles : http://svgicons.sparkk.fr/

Lien vers le fichier CSS : http://svgicons.sparkk.fr/svgicons.css

Allez plus loin avec les filtres

Le SVG est bien plus qu’un nouveau format d’image sur le Web. En effet, nous avons la possibilité d’animer les illustrations créées sur Illustrator à l’aide de code HTML avancé. Au delà de l’animation SVG, nous pouvons également créer des filtres SVG pour nos images, comme s’il s’agissait d’un calque ou masque de fusion sur Photoshop. Attention tout de même car tous les navigateurs ne permettent pas encore d’utiliser cette notion. Pour le savoir, le site Internet Caniuse vous donnera une indication sur la possibilité d’utiliser telle ou telle tendance Web. Tapez simplement votre mot dans la barre de recherche (par exemple “SVG”) et vous aurez un tableau récapitulatif indiquant quel navigateur supporte ce format.

Afin d’aller plus loin avec le format SVG et de pouvoir exploiter pleinement les nouvelles fonctionnalités offertes sur la toile, voici quelques ressources et expérimentations mises en lumière par Sara Soueidan, indépendante spécialisée dans le web design et la communication digitale.