Share
Denna artikel är den andra i en tredelad serie som visar de nya metoderna för ikonografi Iconic kommer att leverera.
Smarta ikoner har fått mycket intresse, men styling kan vara den mest användbara funktionen på en daglig basis. Ikonuppsättningar täcker ett brett spektrum av olika ämnesområden, men återges i en enda visuell stil. Det är ofta lämpligt, om inte optimalt. Det finns emellertid många situationer där specifika ikoner kan och borde ha specifik styling (vare sig det är färg, slagbredd eller andra attribut).
Styling var inte en möjlighet med statiska bilder (om du inte skriver ut filer för varje enskild estetik). Ikon typsnitt kom oss närmare genom att tillåta enkel styling, men det var inte granulär-menande om du färgade ikonen röd, den hela ikonen skulle vara röd. Med SVG finns friheten att utforma enskilda element inom en ikon, vilket öppnar helt nya möjligheter.
Kombinationen av SVG och CSS är magisk. Imagery kan ta på sig helt olika utseende, ha skräddarsydda behandlingar och intressanta interaktiva övergångar. SVG-markup ger åtkomst och kontroll till alla element som ingår i den. Det betyder att en glödlampa kan "tändas" med CSS, kontrastikonen kan stylas för att spegla a specifik kontrast och en stoplight-ikon kan kommunicera gå. Att kunna stile på elementär nivå andas nya liv till ikoner-de kan vara verkliga unik.
Nästa logiska steg med stylingikoner med CSS är att skapa övergripande teman för en konsekvent estetik. En del av vårt fokus för Iconic är att avslöja och ta itu med utmaningarna kring ikonens tema. Normalt utformade en uppsättning ikoner (utöver att helt enkelt ändra färgen), en mödosam uppgift som berodde på att ha källvektorfilerna. Har du inte dem? Nåväl, du har ingen lycka till.
SVG-ikoner kan lösa detta problem. Jag säger "kan" eftersom det är svårt att konsekvent strukturera en hel SVG-ikonsamling. Ikonerna måste utformas och byggas med tema i åtanke för att stilar ska vara konsekventa över uppsättningen. Men när det fungerar är det ganska häftigt att se.
Vi har sammanställt en demo för att visa ikonen teman i åtgärd. Det visar hur mycket du kan göra när CSS-regler tillämpas på en hel ikonuppsättning.
Spela med vår demo-demo-demo.
Ikon styling kan gå mycket längre än bara godtyckliga färgändringar. Detta tillvägagångssätt ger oss möjlighet att tillhandahålla ett annat värdefullt informationslager.
Tänk på alla ikoner som du ser i ett gränssnitt som visar kontextuell information. Tänk bara på pensel eller fyll ikoner i olika applikationer som kommunicerar vilken färg du ska rita eller fylla på. SVG ikoner som är utformade för att bli stylad kan göra just det.
Kommunicerande tillstånd inom en ikon är ofta så enkelt som att använda färg. Detta kan redan uppnås med ikonfonter, men vad om du ville gå utöver en enkel färgbrytare? Detta är ett annat perfekt användningsfall för SVG & CSS. Låt oss ta en titt på WIFI-signalikonet.
Notera: Exemplet nedan är fortfarande en prototyp av bevis-av-koncept. Ingen av följande kod är slutgiltig, än mindre beta. Vi är fortfarande i FoU-fasen av detta tillvägagångssätt och vi vet att det finns många problem som fortfarande behöver lösas. Vi kommer att arbeta mer konkret för denna metod efter att Kickstarter-kampanjen är klar.
Mekanikerna för stylingikoner är ganska enkla. Om du har använt CSS tidigare (som vi antar att du har), är det väldigt lite att lära dig. Det är en del av det som gör den här metoden så stor - det är fantastiskt kraftfullt med hjälp av de färdigheter och verktyg som du redan vet. SVG-styling har en helt unik uppsättning CSS-regler som du behöver lära dig, men koncepten är raka och kräver minimal ansträngning för att plocka upp.
Det verkliga arbetet kommer från att designa och bygga en ikon att faktiskt vara style-stånd. Precis som Smart Icons beror denna metod på SVG att injiceras direkt i DOM och att den är semantiskt strukturerad för styling. Detta går långt utöver att bara lägga till klasser till varje element i din SVG-ikon (men det gör inte ont). Priming en ikon för styling är fortfarande en bit av en konstform. Vi är ganska säkra på att det finns en vetenskap till detta och vi hoppas kunna skriva mer om processen i framtiden. Vårt mål med Iconic är att hjälpa till att göra processen klar och repeterbar så att andra ikondesigners kan göra sina ikoner stilklara.
Låt oss ta ett exempel på att stylera WIFI-ikonen för att visa dess olika tillstånd. Du ser snabbt hur lätt det är.
Visa koden i aktion
html
JS
$ ( ". Svg-injicera) svgInject ().
CSS
/ * Stark signal * / .iconic-signal.iconic-signal-strong .onic-signal-base fill: # 569e26; .oniconic signal.iconic-signal-strong .onic-signal-wave * stroke: # 569e26; / * Mellansignal * / .iconic-signal.iconic-signal-medium .onic-signal-bas fill: # efc411; .oniconic-signal.iconic-signal-medium .onic-signal-wave * stroke: # efc411; .onic-signal.iconic-signal-medium .onic-signal-wave-yttre opacitet: .3; stroke-bredd: 0,5; / * Svag signal * / .iconic-signal.iconic-signal-svag .onic-signalbas fill: # b52808; .oniconic signal.iconic-signal-weak .onic-signal-wave * stroke: # b52808; .oniconic-signal.iconic-signal-weak .onic-signal-wave-outer, .oniconic signal.iconic-signal-weak .onic-signal-wave-middle opacity: .3; stroke-bredd: 0,5; / * Ingen signal * / .iconic-signal.iconic-signal-none .onic-signal-base fill: # 848484; .oniconic signal.iconic-signal-none .onic signal-wave * stroke: # 848484; opacitet: 0,3; stroke-bredd: 0,5;
SVG: signal.svg
Inte så illa, eller hur? När en SVG-ikon är korrekt inställd för att bli stylad är resten nedförsbacke!
Som du kan se kan du göra mycket med SVG och CSS, men det finns fortfarande några begränsningar. Ett av huvudproblemen vi har stött på är strokejustering. Alla slag i SVG 1.1 är centrerade, vilket betyder att stroke kommer att fördelas jämnt på varje sida av banan. Vi tycker inte att det här är optimalt för ikondesign av olika skäl, inklusive potentiell klippning vid ökade strokevikter och en mer komplex ritningsprocess för att rymma centrallinjerade slag.
Lyckligtvis är detta fixat i SVG 2.0-stroke kan nu vara centralt, inre och yttre justerade. Tyvärr, Det verkar som om SVG 2.0 fortfarande är en väg. Vårt hopp är att Iconic kommer att hjälpa trumman att öka intresset för SVG och uppmuntra ett mer skyndsam bearbeta.
Icon styling har varit lite förbisedd i Iconic, men vi tycker att det är en massivt kraftfull teknik. Vi tror verkligen att det kommer att få stor påverkan på hur människor använder och ser ikoner i framtiden. Det fantastiska med denna teknik är att tekniken redan är brett stödd. Allt du behöver är ikoner som kan dra nytta av det.
Målet med Iconic är att hjälpa till att ge nya tillvägagångssätt till ikonografi. Vi har fortfarande mycket att dela med dig och ser fram emot att dela vår nästa avbetalning.
Tänk på att stödja Iconic på Kickstarter
Accentsconagua
