Comment travailler avec des icônes en SVG
▻https://la-cascade.io/comment-travailler-avec-des-icones-en-svg
Remarque : quand vous exportez un SVG depuis un outil de design, il comprendra souvent du markup et des métadonnées inutiles, ainsi que des données excessivement précises pour le chemin (dans l’attribut d). Essayez l’outil SVGOMG and comparez le code avant et après pour voir ce qui est supprimé ou simplifié.
(cet article est une traduction de ►http://fvsch.com/code/svg-icons/how-to)
Tout le nécessaire pour utiliser des SVG dans un site web, y compris :
- les méthode pour gérer l’accessibilité,
– la gestion des « vieux » navigateurs
– les astuces d’utilisation de CSS (pour modifs de taille et couleur par ex)
– des exemples d’utilisations des attributs fill et stroke
– les contournements des bogues connus des navigateurs
+ URL de SVGOMG (outil d’optimisation des fichiers SVG) : ►https://jakearchibald.github.io/svgomg
Voir aussi ▻https://useiconic.com pour un ensemble d’icones SVG et outils/méthodes associés
Pour aller plus loin (et en particulier les animations, les 6 méthodes pour intégrer un SVG dans une page HTML, les bidouilles pour les rendre responsifs, les media-queries...)
voir : ▻https://la-cascade.io/svg-style-et-anime-avec-css
les librairies :
– SnapSVG : « The JavaScript SVG library for the modern web. » (ou « Snap.svg est à SVG ce que jQuery est à HTML, et il rend la vie avec SVG plus facile. ») : ►http://snapsvg.io
– Raphaël : « Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web » : ►http://dmitrybaranovskiy.github.io/raphael
et la compilation de références : ▻https://la-cascade.io/ressources/#svg
#icone #méthode #svg #web_design #SPIP #HTML5 #iconic #svgomg #outil #animation #raphaël #snapsvg #librairie #javascript #media-queries