Hopp til hovedinnhold
Designsystemet logoDesignsystemet logo

Hva leter du etter?

Prøv å søke etter…

Bruk tokens for å fargelegge grafikk

Med Designsystemet kan du fargelegge grafikk.

Designsystemet10. august 2026
Illustrasjon som viser fire fargetokens koblet til hver sin del av designsystemets logo med stiplede linjer. Tokenene styrer fargene i de fire delene av logoen.
Illustrasjon som viser fire fargetokens koblet til hver sin del av designsystemets logo med stiplede linjer. Tokenene styrer fargene i de fire delene av logoen.
Klikk på bildet eller trykk Escape for å lukke
Ved å bruke fargetokens kan du fargelegge logoer, ikoner og illustrasjoner. Metodene i denne artikkelen gir robust og fleksibel kontroll over farger i SVG-grafikk.

Grafikk er en viktig del av brukeropplevelsen, men blir ofte laget med statiske farger som må oppdateres manuelt når et visuelt uttrykk endres. I tillegg har en ofte samme grafikk i mørk og lys modus, noe som ikke alltid fungerer. Ved å bruke design-tokens også i SVG-grafikk kan illustrasjoner, ikoner og andre grafiske elementer følge samme fargesystem som resten av løsningen. Det gjør grafikken enklere å vedlikeholde, sikrer bedre konsistens på tvers av produkter og gjør det lettere å håndtere temaer, profilendringer og universell utforming. I denne artikkelen ser vi litt overordnet på hvorfor det er nyttig å fargelegge grafikk med tokens, og hvordan du kan komme i gang. Metoden ved bruk av symbol inni svg-filer, som nevnes, er også starten på å tilby flere illustrasjoner i samme svg-fil.

Hvorfor bruke tokens for å styre farger i grafikk?

Det er tre gode grunner til å styre farger med tokens:

  • kontroll og konsistens rundt merkevarens farger
  • støtte for lys og mørk modus
  • enklere vedlikehold

Hvis grafikk skal se helt likt ut uansett lys eller mørk modus, og bruke de fargene som er satt i illustrasjonsverktøyet, så er ikke metodene i denne artikkelen relevante.

Hvordan bruke fargetokens i grafikk?

Hvis du ønsker å styre farger og skalering via kode (for eksempel med design tokens), må grafikken legges til som SVG på en måte som gjør den mulig å style med CSS.

Dette kan gjøres på to måter:

  • ved å bruke SVG inline direkte i HTML
  • ved å bruke <use> sammen med <symbol> for gjenbruk

Begge metodene fungerer. <use> er nyttig når samme grafikk skal brukes flere steder uten å duplisere kode, mens inline SVG gir full kontroll og er ofte enklere når grafikken kun brukes ett sted.

Når SVG brukes inline eller via <use>, kan både farger og størrelse styres via CSS. Dette forutsetter at SVG-en er satt opp riktig, blant annet med viewBox.

Andre metoder for å bruke grafikk i frontend, som <img src="...svg">, canvas, CSS-tegning eller icon fonts, gir ikke helt de samme mulighet til å styre farger med design tokens, og er derfor ikke dekket i denne artikkelen.

Grunnleggende oppsett

For at en SVG-en skal kunne enklest mulig, gjenbrukes og styles:

Når grafikk settes inn som fil med <use>:

  • pakke inn grafikken i <symbol>
  • gi symbol en id
  • sett inn grafikken med <use>og bruk filbanen + symbol ID

Både når grafikk settes inline og som fil

  • gi <symbol> eller <svg> viewbox verdier

Praktiske eksempler

Sett inn grafikk med svg-fil og id

Bygg opp grafikken i svg-fila med symbol med tilhørende id:

Fila brukes deretter slik i html:

Tips: Du kan ha flere symboler eller ikoner i samme fil når du pakker hver av dem med <symbol>og unike ider for hver av dem.

Alternativt sett inn grafikken inline

Bruken av <use> muliggjør at en ikke trenger å gjenta samme svg-kode flere steder. Når du uansett kun skal ha grafikken på ett sted på siden din, så kan du gjerne sette den inn inline. Grafikken ovenfor når satt inn direkte inline trenger ikke <symbol> og id

Tips: Skalering av SVG


SVG skalerer enklest når:

  • viewBox er satt på <symbol> når satt inn som fil, eller på <svg> når inline
  • størrelse styres via width og height på det omsluttende elementet
  • proporsjoner er satt korrekt

Fargelegge grafikken

Hva du må tilpasse videre avhenger av hva du ønsker å oppnå.

Ensfarget grafikk, typisk for enkelte logoer og ikoner

For en énsfarget grafikk kan du styre fargene enten ved å peke på gjeldende tekstfarge eller fargelegge via en klasse eller id.

Ensfarget grafikk med tekstfarge

Vil du bruke gjeldende tekstfarge som standard på alle svg-grafikk kan du bruke currentColor som fargestil. Fjern alle farger i svg-fila og legg til stilregelen fill="currentColor", da arver grafikken gjeldende tekstfarge. Det kan hende du må gjøre det samme for stroke.

Om du ikke vil sette en standard regel for alle svg-filer, kan du heller sette currentColor på fill og/eller stroke inne i selve svg-fila. I designsystemet blir denne metoden brukt på ikoner, for eksempel i knappene.

Her er grafikken satt inn inline og fargelagt med currentColor:

Ensfarget grafikk med fargetoken

Ønsker du mer kontroll kan du styre fargen med klasse eller id, fjern alle farger fra grafikken og sett inn for ekesmpel en klasse på det omsluttende svg-elementet:

Med tilhørende token:

Ensfarget grafikk styrt med farge modus

Noen ganger skal samme grafikk brukes i flere ulike sammenhenger, men samtidig følge fargen som er valgt for den delen av siden den vises i. I slike tilfeller kan du bruke generiske design-tokens som arver data-color og data-color-scheme verdier fra nærmeste overordnede element.

I eksempelene her er selve svg-filen kun gitt token --ds-color-base-default, mens de omsluttende kortene er gitt data-color og data-color-scheme som styrer fargen og farge-modus på grafikken. Dette gjør at samme svg-grafikk kan brukes i flere ulike sammenhenger, men likevel følge fargen som er valgt for den delen av siden den vises i.

Flerfarget grafikk, typisk merkevarebærende symboler og små illustrasjoner

For grafikk med flere farger kan du styre fargene direkte i fill og stroke på hver path i grafikken inni svg-fila. Du kan selvsagt fargelegge ved å peke direkte til fargene i designsystemet, eller om du har laget tokens for illustrasjoner så bruker du dem.

Koden i SVG-fila i eksempelet over ser slik ut:

Flerfarget grafikk, eksempel satt inline

Tilgjengelighet

For å sikre at grafikken er tilgjengelig for alle må du legge til et par detaljer i det omsluttende svg-elementet:

  • aria-hidden for dekorativ grafikk
  • aria-label og role="img" for meningsbærende grafikk

Grafikk som kun er dekorativ

Skjul grafikken for skjermleser med å sette rolle til presentasjon og at den skal være skjult.

Grafikk som er meningsbærende

Gi grafikken rollen for bilde og en beskrivende tekst

For mer kompleks grafikk kan du bruke mer detaljerte beskrivelser, metoder for å sette inn slike detaljerte beskrivelser på selve grafikken, det går vi ikke inn på her.

Vanlige problemer og hva du bør sjekke

Hvis SVG ikke oppfører seg som forventet, er dette de vanligste årsakene:

  • SVG får feil størrelse

    • Sjekk at viewBox er satt
    • Sjekk at width og height er definert på HTML-elementet (useeller dersom inline svg) eller via CSS

  • Farger endrer seg ikke

    • Sjekk at SVG ligger inline i DOM (ikke via <img>)
    • Sjekk at fill og stroke ikke er hardkodet med faste farger
    • Sjekk at CSS-variablene (var(...)) er definert og tilgjengelige der SVG brukes

  • Grafikken blir én farge i stedet for flerfarget

    • Sjekk om currentColor brukes på alle paths
    • Sjekk at du ikke har globale regler som påvirker alle SVG-er

  • SVG vises ikke i det hele tatt

    • Sjekk at href i <use> peker til riktig fil og id (file.svg#id)
    • Sjekk at SVG-fila inneholder et <symbol> med riktig id

Kilder og videre lesning

Vil du skrive for bloggen?

Har du noe du ønsker å dele med andre i fellesskapet? Kontakt oss på Slack eller via e-post