Share
Denne artikkelen er den andre i en tredelerserie som viser de nye tilnærmingene til ikonografi Ikonisk vil levere.
Smarte ikoner har fått stor interesse, men styling kan være den mest nyttige funksjonen på en daglig basis. Ikonsettene dekker et bredt spekter av forskjellige emner, men gjengis i en enkelt visuell stil. Det er ofte passende, hvis ikke optimal. Det er imidlertid mange situasjoner der bestemte ikoner kan og bør ha bestemt styling (det være seg farge, strekkbredde eller andre attributter).
Styling var ikke en mulighet med statiske bilder (med mindre du utfører filer for hver spesifikk estetikk). Ikonfonter kom oss nærmere ved å tillate enkel styling, men det var ikke granulært, noe som betyr at du fargede ikonet rødt, den hel ikonet ville være rødt. Med SVG eksisterer friheten til å utforme individuelle elementer i et ikon, noe som åpner helt nye muligheter.
Kombinasjonen av SVG og CSS er magisk. Imagery kan ta på seg helt forskjellige utseende, har skreddersydde behandlinger og interessante interaktive overganger. SVG-oppslag gir tilgang og kontroll til alle elementene i den. Dette betyr at et lightbulb-ikon kan "tennes" med CSS, kontrastikonet kan styles for å reflektere a spesifikk Kontrast og et stopplysikon kan kommunisere gå. Å kunne style på elementær nivå puster nytt liv i ikoner-de kan være virkelig unik.
Det neste logiske trinnet med styling ikoner med CSS er å skape sett brede temaer for en konsistent estetikk. En del av vårt fokus for ikonisk er å avsløre og løse utfordringene rundt ikonet temaer. Normalt styling et sett med ikoner (utover bare å endre fargen), var en mektig oppgave som var avhengig av å ha kildevektorfiler. Har du ikke dem? Vel, du er ute av lykke.
SVG-ikoner kan løse dette problemet. Jeg sier "kan" fordi det er vanskelig å konsekvent strukturere en hel SVG ikon samling. Ikonene må utformes og bygges med temaer i tankene for at stilene skal være konsistente på tvers av settet. Men når det fungerer, er det ganske kjempebra å se.
Vi har satt sammen en demonstrasjon for å vise ikonet tema i handling. Det viser deg hvor mye du kan gjøre når CSS-regler brukes på et helt ikonsett.
Spill med vår ikon-demo-demo.
Ikon styling kan gå mye lenger enn bare vilkårlig fargeendringer. Denne tilnærmingen gir oss muligheten til å gi et annet verdifullt lag av informasjon.
Tenk på alle ikonene du ser i et grensesnitt som viser kontekstuell informasjon. Tenk bare på pensel eller fyll ikoner i ulike applikasjoner som kommuniserer hvilken farge du skal tegne eller fylle. SVG-ikoner som er designet for å bli stylet, kan bare gjøre det.
Kommuniserende tilstand innenfor et ikon er ofte så enkelt som å bruke farge. Dette kan allerede oppnås med ikonfonter, men hva om du ville gå utover en enkel fargebryter? Dette er en annen perfekt brukskasse for SVG & CSS. For eksempel, la oss ta en titt på WIFI-signalikonet.
Merk: Eksempelet nedenfor er fortsatt en prototypebeskrivelse. Ingen av følgende kode er endelig, enn mindre beta. Vi er fortsatt i FoU-fasen av denne tilnærmingen, og vi vet at det er mange problemer som fortsatt må tas opp. Vi vil jobbe mer konkret for denne metoden etter at kampanjen Kickstarter er fullført.
Mekanikken til styling ikoner er ganske enkelt. Hvis du har brukt CSS tidligere (som vi antar at du har), er det veldig lite å lære. Det er en del av det som gjør denne metoden så stor - det er utrolig kraftig ved hjelp av ferdighetene og verktøyene du allerede kjenner. SVG styling har et helt unikt sett med CSS-regler som du trenger å lære, men konseptene er enkle og krever minimal innsats for å plukke opp.
Det virkelige arbeidet kommer fra å designe og bygge et ikon å faktisk være style-stand. På samme måte som Smart Icons, avhenger denne metoden av SVG for direkte injeksjon i DOM og at den er semantisk strukturert for styling. Dette går langt utover bare å legge til klasser for hvert element i SVG-ikonet ditt (men det gjør ikke vondt). Priming et ikon for styling er fortsatt litt av en kunstform. Vi er ganske sikre på at det er en vitenskap til dette, og vi håper å skrive mer om prosessen i fremtiden. Vårt mål med ikonisk er å bidra til å gjøre denne prosessen klar og repeterbar slik at andre ikondesignere kan gjøre deres ikoner stilstilige.
La oss ta et eksempel på styling av WIFI-signalikonet for å vise forskjellige stater. Du ser raskt hvor nært det er.
Se koden i aksjon
HTML
JS
$ ( 'Svg injisere') svgInject (.);
CSS
/ * Sterkt signal * / .iconic-signal.iconic-signal-strong .onic-signal-base fill: # 569e26; .onic-signal.iconic-signal-strong .onic-signal-wave * slag: # 569e26; / * Mellomsignal * / .ikonisk-signal.ikonsignal-medium .ikonisk-signal-base fill: # efc411; .onic-signal.iconic-signal-medium .onic-signal-bølge * slag: # efc411; .onic-signal.iconic-signal-medium .onic-signal-bølge-ytre opacity: .3; slag-bredde: 0,5; / * Svakt signal * / .iconic-signal.iconic-signal-svakt .onic-signal-base fill: # b52808; .onic-signal.iconic-signal-svakt .onic-signal-bølge * slag: # b52808; .onic-signal.iconic-signal-svakt .ikonisk-signal-bølge-ytre, .ikonisk-signal.ikonisk-signal-svakt .ikonisk-signal-bølge-midt opacity: .3; slag-bredde: 0,5; / * Ingen signal * / .iconic-signal.iconic-signal-none .onic signal-base fill: # 848484; .onic-signal.iconic-signal-none .onic-signal-wave * slag: # 848484; opacity: 0,3; slag-bredde: 0,5;
SVG: signal.svg
Ikke så ille, ikke sant? Når et SVG-ikon er riktig konfigurert for å bli stylet, er resten nedoverbakke!
Som du kan se, kan du gjøre mye med SVG og CSS, men det er fortsatt noen begrensninger. Et av hovedproblemene vi har opplevd er strekkjustering. Alle slag i SVG 1.1 er sentrert, noe som betyr at streken blir jevnt fordelt på hver side av banen. Vi tror ikke at dette er optimalt for ikondesign av ulike grunner, inkludert potensiell klipping ved økte slagvekter og en mer komplisert tegneprosess for å imøtekomme senterrettede slag.
Heldigvis er dette løst i SVG 2.0-slag kan nå være midt, indre og ytre justert. dessverre, Det ser ut til at SVG 2.0 fortsatt er en vei unna. Vårt håp er at Iconic vil hjelpe tromme til å øke interessen for SVG og oppmuntre til en mer Fremskyndet prosess.
Ikon styling har vært litt oversett i ikonisk, men vi tror det er en massivt kraftig teknikk. Vi tror virkelig at det kommer til å ha stor innvirkning på måten folk bruker og se ikoner i fremtiden. Det gode med denne teknikken er at teknologien allerede er bredt støttet. Alt du trenger er ikoner som kan dra nytte av det.
Målet med Iconic er å bidra til å gi nye tilnærminger til ikonografi. Vi har fortsatt mye å dele med deg og ser frem til å dele vår neste avdrag.
Vær så snill å vurdere Backing Iconic på Kickstarter
Accentsconagua
