⏱ Time to read: 1 min 58 secs

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.