SVG: Le bon coin pour les SVGistes

Le format SVG devient un pionnier sur le web. Tous les développeurs vont se tourner vers ce format SVG car il offre une flexibilité au développeur d’ajouter du CSS et d’animation JavaScript à une image SVG. Il est loin d’être lourd en téléchargement et en plus ne pose pas de soucis en relation de la résolution car on parle ici d’une image vectorielle décrite en format XML.
Les icônes SVG sont conçus moderne et minimaliste car pour avoir une image compliquée il faut écrire trop, identifier trop donc trop de lignes JavaScript et CSS. En 2014 la tendance de conception web décalée au design moderne et minimaliste. Personnellement j’aime ce concept car il est simple et utile.Plusieurs sites web comme Iconmelon et iconFinder offrent la possibilité de télécharger des icônes au format SVG que vous souhaitez. Vous pouvez utiliser les icônes à des fins diverses, comme une application mobile, application web, application de bureau et autres.
Mais comment créer une image SVG et l’intégrer dans une page web? il suffit d’avoir un logiciel de conception graphique vectorielle, PhotoShop n’est un éditeur d’images vectoriel par contre Illustrator évidemment peut exporter au format SVG.

InkScape
InkScape

InkScape est un logiciel Libre et Open Source et ce format SVG est bien entendu son format d’image par défaut. Le fichier est éditable par n’importe quel éditeur de texte car il s’agit bien d’un fichier texte comme pour les pages web, le format HTML est éditable par tous les éditeurs de textes sans avoir acheté une licence de DreamWeaver que je le trouve inutile comme logiciel.
 
inkscap-svg-source
Ce format est une peut difficile à l’intégrer pour les designers sachant qu’il sagit bien d’un code XML donc seuls les développeurs peuvent l’intégrer, c’est pour ça qu’il existe une bibliothèque JavaScript qui s’occupe de ça sous le nom de svg.js.
Cette bibliothèque nous aide à créer, dessiner et manipuler des images SVG sans passer par un éditeur d’image mais vu que c’est du XML, le développeur se trouvera bloqué pour le choix des formes et de couleurs, c’est pour ça il nécessaire de passer par un editeur d’images vectorielles comme Illustrator ou InkScape.

See the Pen SVG.Js by khalifa-chokri (@chokri) on CodePen.

You Might Also Like

Leave a Reply