Share
Cet article est le deuxième d'une série en trois parties présentant les nouvelles approches de l'iconographie. Iconic livrera.
Les icônes intelligentes ont suscité beaucoup d’intérêt, mais le style peut être la fonction la plus utile au quotidien. Les jeux d'icônes couvrent un large éventail de sujets différents, mais sont restitués dans un seul style visuel. C'est souvent approprié, sinon optimal. Cependant, il existe de nombreuses situations dans lesquelles des icônes spécifiques peuvent et doivent avoir un style spécifique (couleur, largeur de trait ou autres attributs)..
Styliser n'était pas une possibilité avec des images statiques (à moins que vous ne produisiez des fichiers pour chaque esthétique spécifique). Les polices d’icônes nous rapprochent en permettant un style simple, mais cela n’a pas un sens granuleux si vous coloriez l’icône en rouge, entier l'icône serait rouge. Avec SVG, la liberté existe pour le style d'éléments individuels au sein d'une icône, ce qui ouvre de nouvelles possibilités..
La combinaison de SVG et CSS est magique. Les images peuvent avoir une apparence totalement différente, des traitements sur mesure et des transitions interactives intéressantes. Le balisage SVG fournit un accès et un contrôle à tous les éléments qu’il contient. Cela signifie qu'une icône d'ampoule peut être "allumée" avec CSS, l'icône de contraste peut être stylée pour refléter une spécifique le contraste et une icône stoplight peuvent communiquer aller. Être capable de styler au niveau élémental insuffle une nouvelle vie aux icônes - elles peuvent être vraiment unique.
La prochaine étape logique du style des icônes avec CSS consiste à créer des thèmes d'ensemble pour une esthétique cohérente. Une partie de notre objectif pour Iconic consiste à exposer et à relever les défis liés à la thématisation d’icônes. Normalement, le style d’un ensemble d’icônes (au-delà du simple changement de couleur) était une tâche fastidieuse qui dépendait du fichier source. Ne les a pas? Eh bien, vous n'avez pas de chance.
Les icônes SVG peuvent résoudre ce problème. Je dis "peut", car il est difficile de structurer de manière cohérente toute une collection d'icônes SVG. Les icônes doivent être conçues et construites avec la thématisation à l'esprit pour que les styles soient cohérents dans l'ensemble. Cependant, quand ça marche, c'est génial de voir.
Nous avons mis en place une démo pour montrer la thématique des icônes en action. Cela vous montre tout ce que vous pouvez faire lorsque des règles CSS sont appliquées à un jeu d'icônes complet..
Jouez avec notre démo d'icônes.
Le style des icônes peut aller beaucoup plus loin que de simples changements de couleur arbitraires. Cette approche nous donne l’occasion de fournir une autre couche d’informations précieuse.
Pensez à toutes les icônes que vous voyez dans une interface et qui présentent des informations contextuelles. Pensez simplement au pinceau ou aux icônes de remplissage dans diverses applications qui communiquent la couleur que vous êtes sur le point de dessiner ou de remplir. Les icônes SVG conçues pour être stylisées peuvent le faire.
La communication au sein d’une icône est souvent aussi simple que l’utilisation de la couleur. Cela peut déjà être réalisé avec des polices à icônes, mais que faire si vous voulez aller au-delà d'un simple changement de couleur? C'est un autre cas d'utilisation parfait pour SVG et CSS. Par exemple, regardons l’icône du signal WIFI.
Remarque: L'exemple ci-dessous est toujours un prototype de preuve de concept. Aucun des codes suivants n'est final, à plus forte raison une version bêta. Nous sommes toujours dans la phase de R & D de cette approche et nous savons que de nombreux problèmes doivent encore être résolus. Nous travaillerons sur une direction plus concrète pour cette méthode une fois la campagne Kickstarter terminée..
La mécanique des icônes de style est assez simple. Si vous avez déjà utilisé le CSS (ce que nous supposons bien), il y a très peu à apprendre. C'est en partie ce qui rend cette méthode si géniale: elle est incroyablement puissante en utilisant les compétences et les outils que vous connaissez déjà. Le style SVG a un ensemble de règles CSS totalement unique que vous devrez apprendre, mais les concepts sont simples et ne demandent qu'un effort minimal..
Le vrai travail vient de concevoir et de construire une icône être réellement capable de style. Tout comme Smart Icons, cette méthode dépend de l’injection directe de SVG dans le DOM et de sa structure sémantique pour le style. Cela va bien au-delà de l’ajout de classes à chaque élément de votre icône SVG (mais cela ne fait pas de mal). Amorcer une icône de style est encore un art. Nous sommes quasiment certains qu'il existe une science dans ce domaine et nous espérons en écrire davantage sur le processus à l'avenir. Notre objectif avec Iconic est d’aider à rendre ce processus clair et reproductible afin que d’autres concepteurs d’icônes puissent personnaliser leurs icônes..
Prenons l'exemple du style de l'icône du signal WIFI pour afficher ses différents états. Vous verrez rapidement à quel point il est abordable.
Voir le code en action
HTML
JS
Accentsconagua
$ ('. svg-inject'). svgInject (); CSS
/ * Signal fort * / .iconic-signal.iconique-signal-fort .iconique-signal-base fill: # 569e26; .iconic-signal.iconic-signal-strong .iconic-signal-wave * stroke: # 569e26; / * Signal moyen * / .iconic-signal.iconique-signal-moyen .iconique-signal-base fill: # efc411; .iconic-signal.iconic-signal-medium .iconic-signal-wave * accident vasculaire cérébral (AVC): # efc411; .iconic-signal.iconic-signal-medium .iconic-signal-wave-outer opacité: .3; largeur de trait: 0,5; / * Signal faible * / .iconic-signal.iconique-signal-faible .iconique-signal-base fill: # b52808; .iconic-signal.iconic-signal-faible .iconic-signal-wave * stroke: # b52808; .iconic-signal.iconic-signal-faible .iconique-signal-d'onde-externe, .iconique-signal.iconique-signal-faible .iconique-signal-vague-moyen opacité: .3; largeur de trait: 0,5; / * Pas de signal * / .iconic-signal.iconique-signal-aucun .iconique-signal-base fill: # 848484; .iconic-signal.iconic-signal-none. onde-signal-ionique * accident vasculaire cérébral: # 848484; opacité: .3; largeur de trait: 0,5;
SVG: signal.svg
Pas trop mal, non? Une fois qu'une icône SVG est correctement configurée pour être stylée, le reste est en descente!
Comme vous pouvez le voir, vous pouvez faire beaucoup avec SVG et CSS, mais il y a encore quelques limitations. L’un des principaux problèmes rencontrés est l’alignement des traits. Dans SVG 1.1, tous les traits sont alignés au centre, ce qui signifie que le trait sera divisé de manière égale de chaque côté du tracé. Nous ne pensons pas que cela soit optimal pour la conception d'icônes pour diverses raisons, notamment l'écrêtage potentiel dû à l'augmentation du poids des traits et un processus de dessin plus complexe pour prendre en charge les traits alignés au centre.
Heureusement, cela est corrigé dans SVG 2.0-courses peuvent maintenant être alignés au centre, intérieur et extérieur. Malheureusement, il semble que SVG 2.0 est toujours un moyen de se déconnecter. Nous espérons que Iconic contribuera à susciter plus d’intérêt pour SVG et encouragera expédié processus.
Le style des icônes a été un peu négligé dans Iconic, mais nous pensons que c'est une technique extrêmement puissante. Nous pensons vraiment que cela va avoir un impact énorme sur la façon dont les gens utilisent et voient les icônes à l’avenir. L’avantage de cette technique est que la technologie est déjà largement prise en charge. Vous n’avez besoin que d’icônes pour en tirer parti..
Iconic a pour objectif de fournir de nouvelles approches en iconographie. Nous avons encore beaucoup à partager avec vous et sommes impatients de partager notre prochain versement.
Merci de penser à soutenir Iconic sur Kickstarter
