5139 sujets

Le Bar du forum

Bonjour à tous,

J'avais dans l'idée d'utiliser pour un hypothétique futur projet des illustrations en svg, pas forcément très détaillé, se rapprochant presque de l'icône mais avec comme but premier d'être affiché en grand sur la page (d'où le SVG).

Et en navigant sur alsa je suis tombé sur ce super article de Stéphanie Walter (sur la création des font-icon). Et la conclusion au niveau de la compatibilité du bousin c'est que c'est l'utilisation de pseudo élément (:before) qui limite (cf : caniuse). Mais au final, c'est un peu plus "cross-browser" que l'utilisation du SVG (cf : caniuse).

De plus je vois l'utilisation de la police d'icône comme plus avantageuse, dans mon cas, avec sa manipulation facile directement en css, bien évidemment moins complète qu'avec du svg, son poids plus réduit (enfin je pense surtout pour de nombreuses illustrations, un peu à la manières des sprites).

Voila donc au final, j'en appelle à vos connaissances surement bien plus étendu sur le sujet que ce que j'ai en boutique (c'est pas bien compliqué je suis un néophite en vectoriel), pour m'aiguiller et me contredire si l'utilisation des font icon que je veut faire est un blasphème et est hautement contreproductif.

Bonne journée à tous. Smiley cligne
À mon sens la principale différence entre ces deux options est la façon de fournir une alternative à cette image : avec un SVG tu gères ça avec un texte pur ou un attribut alt (suivant comment tu implémentes ton SVG, mais ça reste de l’image), alors qu’une icon-font t’oblige à ajouter du texte en vis-à-vis.

J’aurais tendance à te conseiller le SVG, mais je sais à quel point une icon-font est plus simple à appréhender.

J’espère avoir un peu éclairci le sujet,

bon courage !
Avec SVG tu peux faire du multicolor, des animations directement dans le fichier (hu hu http://codepen.io/2ne/details/BHuEL ), etc. Avec les font-icon c'est monochrome (ou grosse triche de plusieurs icônes). Bon le flat est à la mode, ça tombe bien Smiley lol
Pour l'utilisation du coup ça dépend. Les font-icon c'est pratique niveau perf : ça fait qu'une requête pour tout pleins d'images : yeahy !!
Pour le SVG soit il est externe et se comporte comme une image donc fait des requêtes, soit il est décoratif et tu peux le spriter en CSS, soit il est inline dans le HTML donc pas de requête MAIS tu peux pas cacher le fichier SVG. Si jamais tu veux passer par le SVG tu peux lire Un logo cliquable SVG avec alternatives où il y a 6 techniques. (oui j'avais une sorte de méga kiff pour le SVG à un moment Smiley langue ) Le souci c'est IE8 pour le SVG pur, si tu dois le supporter il va te falloir du fallback.
Sinon pour le fight ultime y a Chris Coyier qui s'y est collé : Inline SVG vs Icon Fonts [CAGEMATCH]
Modifié par Stéphanie W. (30 Apr 2014 - 17:57)
Merci beaucoup à vous deux Smiley cligne . Oui, je vais plutôt partir sur du svg. Je vais donc de ce pas me documenter sur ce sujet. Et un grand merci Stéphanie pour ces "génialissimes" articles.

PS : Un truc complètement hors sujet, je retrouve ton avatar sur plein de création, entre autre sur dribbble et behance. Il y a une raison à cela ? En tout cas ça me fait souvent sourire et me fait toujours pensé à lire ton blog (j'adore la rubrique du vendredi et non je ne suis un pas lèche bottes ;D)
thej8 a écrit :

PS : Un truc complètement hors sujet, je retrouve ton avatar sur plein de création, entre autre sur dribbble et behance. Il y a une raison à cela ? En tout cas ça me fait souvent sourire et me fait toujours pensé à lire ton blog (j'adore la rubrique du vendredi et non je ne suis un pas lèche bottes ;D)


Oui je l'ai gentiment passé en utilisation libre pour du maquettage ^^ Du coup ça me fait rire de voir les noms qu'on me donne ^^