From 0aa282d349418d603e8e58cd97a4c264d46eecc0 Mon Sep 17 00:00:00 2001 From: Roy Halvor Frimanslund <5771598+Camulos@users.noreply.github.com> Date: Mon, 1 Jun 2026 11:06:03 +0200 Subject: [PATCH 01/11] Added page about coloring svg --- .../fundamentals/no/theme/colorsvg.mdx | 134 ++++++++++++++++++ 1 file changed, 134 insertions(+) create mode 100644 apps/www/app/content/fundamentals/no/theme/colorsvg.mdx diff --git a/apps/www/app/content/fundamentals/no/theme/colorsvg.mdx b/apps/www/app/content/fundamentals/no/theme/colorsvg.mdx new file mode 100644 index 0000000000..ca80bc7017 --- /dev/null +++ b/apps/www/app/content/fundamentals/no/theme/colorsvg.mdx @@ -0,0 +1,134 @@ +--- +title: Bruk tokens for å fargelegge illustrasjoner +sidebar_title: Illustrasjoner +description: Med Designsystemet kan du fargelegge illustrasjoner. +date: 2026-06-01 +category: Tema +color: red +icon: PencilLineIcon +published: true +order: 200 +search_terms: svg, fargelegge, symbol +--- + +Hvis illustrasjonen skal se helt lik ut uansett lys eller mørk modus, og ha de fargene som er satt i illustrasjonsverktøyet, trenger du ikke følge guiden under. + +Hvis du derimot ønsker å styre farger og skalering via kode (for eksempel med design tokens), bør illustrasjoner legges til som SVG og struktureres på en bestemt måte. + +## Grunnleggende oppsett + +For at en SVG-en skal kunne enklest mulig, gjenbrukes og styles, bør du gjøre dette i fila: + +- pakke inn grafikken i `` +- gi symbol en id +- gi symbol viewbox verdier + +```SVG + + + +``` + +Fila brukes deretter slik i html: +```HTML + + + +``` + +## I praktisk bruk + +Hva du må tilpasse videre avhenger av hva du ønsker å oppnå. + +### Ensfarget illustrasjon, typisk for enkelte logoer og ikoner + +For en énsfarget illustrasjon kan du styre fargene enten ved å peke på gjeldende tekstfarge eller fargelegge via en klasse eller id. + +Vil du bruke gjeldende tekstfarge som standard på alle svg-illustrasjoner kan du bruke currentColor som stil. Fjern alle farger fra grafikken i svg-fila og legg til stilregelen for currentColor, da arver illustrasjonen gjeldende tekstfarge. Det kan hende du må gjøre det samme for stroke. +```CSS +svg { + fill:currentColor; +} +``` +Om du ikke vil sette en standard regel for alle illustrasjoner, kan du heller sette currentColor på fill og/eller stroke path inne i selve svg-fila. I designsystemet blir denne metoden brukt på ikoner, for eksempel i knappene. +```SVG + + + +``` + +Ø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: +```HTML + + + +``` +Med tilhørende token: +```CSS +.iconcolor { + color: var(--ds-color-text-default); +} +``` + +### Flerfarget illustrasjon, typisk merkevarebærende symboler og små illustrasjoner + +For illustrasjoner med flere farger kan du styre fargene direkte i fill og stroke på hver path i grafikken inni svg-fila. +```SVG + + + +``` +Med tilhørende tokens, i eksempelet har illustrasjonen fått gråskala i mørk modus: +```CSS +:root { + --ds-color-logopart1:#1E98F5; + --ds-color-logopart2:#68707C; + --ds-color-logopart3:#E5AA20; + --ds-color-logopart4:#F45F63; + @media ( prefers-color-scheme: dark) { + --ds-color-logopart1:#A3A3A3; + --ds-color-logopart2:#68707C; + --ds-color-logopart3:#C2C2C2; + --ds-color-logopart4:#8A8A8A; + } +} +``` +Du kan selvsagt fargelegge ved å peke direkte til fargene i designsystemet, eller om du har laget tokens for illustrasjoner så bruker du dem. + +## Husk på tilgjengelighet + +For å sikre at illustrasjonen er tilgjengelig for alle må du legge til et par detaljer i det omsluttende svg-elementet. + +### Illustrasjonen er kun dekorativ + +Skjul illustrasjonen for skjermleser med å sette rolle til presentasjon og at den skal være skjult. +```HTML + +``` + +### Illustrasjonen er meningsbærende + +Gi illustrasjonen rollen for bilde og en beskrivende tekst +```HTML + + + +``` +For mer komplekse illustrasjoner kan du bruke mer detaljerte beskrivelser og det finnes også måter å sette inn slike detaljerte beskrivelser på selve grafikken, det går vi ikke inn på her. \ No newline at end of file From 837017f81e5b1680b981b851470ed35e0bf4daea Mon Sep 17 00:00:00 2001 From: Roy Halvor Frimanslund <5771598+Camulos@users.noreply.github.com> Date: Mon, 1 Jun 2026 11:17:02 +0200 Subject: [PATCH 02/11] Started english version --- .../fundamentals/en/theme/colorsvg.mdx | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 apps/www/app/content/fundamentals/en/theme/colorsvg.mdx diff --git a/apps/www/app/content/fundamentals/en/theme/colorsvg.mdx b/apps/www/app/content/fundamentals/en/theme/colorsvg.mdx new file mode 100644 index 0000000000..acfc8dbef6 --- /dev/null +++ b/apps/www/app/content/fundamentals/en/theme/colorsvg.mdx @@ -0,0 +1,36 @@ + +--- +title: Use tokens to colour illustrations +sidebar_title: Illustrations +description: With Designsystemet, you can colour illustrations using tokens. +date: 2026-06-01 +category: Theme +color: red +icon: PencilLineIcon +published: true +order: 200 +search_terms: svg, colouring, symbol +--- + +If the illustration should look exactly the same regardless of light or dark mode, and use the colours defined in the illustration tool, you do not need to follow the guidance below. + +However, if you want to control colours and scaling via code (for example using design tokens), illustrations should be added as SVGs and structured in a specific way. + +## Basic setup + +To make an SVG easy to reuse and style, you should prepare the file as follows: + +- wrap the graphics in `` +- give the symbol an id +- define a viewBox on the symbol + +```SVG + + + +``` From 51889a097f69261f7b9d6de2c680f63fdb133274 Mon Sep 17 00:00:00 2001 From: Roy Halvor Frimanslund <5771598+Camulos@users.noreply.github.com> Date: Mon, 1 Jun 2026 11:28:59 +0200 Subject: [PATCH 03/11] Started adding stories --- .../content/fundamentals/no/theme/colorsvg.mdx | 2 ++ .../fundamentals/no/theme/colorsvg.stories.tsx | 15 +++++++++++++++ 2 files changed, 17 insertions(+) create mode 100644 apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx diff --git a/apps/www/app/content/fundamentals/no/theme/colorsvg.mdx b/apps/www/app/content/fundamentals/no/theme/colorsvg.mdx index ca80bc7017..5596e9c4df 100644 --- a/apps/www/app/content/fundamentals/no/theme/colorsvg.mdx +++ b/apps/www/app/content/fundamentals/no/theme/colorsvg.mdx @@ -66,6 +66,8 @@ Om du ikke vil sette en standard regel for alle illustrasjoner, kan du heller se ``` +Test story + Ø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: ```HTML diff --git a/apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx b/apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx new file mode 100644 index 0000000000..7180610ec1 --- /dev/null +++ b/apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx @@ -0,0 +1,15 @@ +import { + Textfield, +} from '@digdir/designsystemet-react'; +import { useState } from 'react'; + +export const WithCurrentColor = () => { + return ( + + ); +}; \ No newline at end of file From 2ee0958e59170111187a46da84b3ea4160d7b7d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marianne=20R=C3=B8svik?= Date: Mon, 1 Jun 2026 11:54:47 +0200 Subject: [PATCH 04/11] fix story --- .../fundamentals/no/theme/colorsvg.stories.tsx | 15 +++------------ apps/www/app/routes/fundamentals/page.tsx | 6 ++++++ 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx b/apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx index 7180610ec1..f68b1c5fa1 100644 --- a/apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx +++ b/apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx @@ -1,15 +1,6 @@ -import { - Textfield, -} from '@digdir/designsystemet-react'; +import { Textfield } from '@digdir/designsystemet-react'; import { useState } from 'react'; export const WithCurrentColor = () => { - return ( - - ); -}; \ No newline at end of file + return ; +}; diff --git a/apps/www/app/routes/fundamentals/page.tsx b/apps/www/app/routes/fundamentals/page.tsx index 0a1abe7f15..c4b49d36e6 100644 --- a/apps/www/app/routes/fundamentals/page.tsx +++ b/apps/www/app/routes/fundamentals/page.tsx @@ -13,6 +13,7 @@ import { formatDate } from '~/_utils/date'; import { getFileFromContentDir } from '~/_utils/files.server'; import { generateFromMdx } from '~/_utils/generate-from-mdx'; import { generateMetadata } from '~/_utils/metadata'; +import { getStories } from '../../_utils/get-stories.server'; import type { Route } from './+types/page'; import classes from './page.module.css'; @@ -31,6 +32,10 @@ export async function loader({ params }: Route.LoaderArgs) { }); } + const stories = await getStories({ + path: join('fundamentals', params.lang, `${file}.stories.tsx`), + }); + // Bundle the MDX content const result = await generateFromMdx(fileContent); @@ -39,6 +44,7 @@ export async function loader({ params }: Route.LoaderArgs) { frontmatter: result.frontmatter, lang: params.lang, toc: result.toc, + stories, }; } From 7c249cb359d101c3946265847293776550db900a Mon Sep 17 00:00:00 2001 From: Roy Halvor Frimanslund <5771598+Camulos@users.noreply.github.com> Date: Mon, 1 Jun 2026 12:59:18 +0200 Subject: [PATCH 05/11] Added placeholders for stories --- .../fundamentals/no/theme/colorsvg.mdx | 28 +++++++++++++++++-- .../no/theme/colorsvg.stories.tsx | 14 +++++++++- 2 files changed, 38 insertions(+), 4 deletions(-) diff --git a/apps/www/app/content/fundamentals/no/theme/colorsvg.mdx b/apps/www/app/content/fundamentals/no/theme/colorsvg.mdx index 5596e9c4df..d08a8968d7 100644 --- a/apps/www/app/content/fundamentals/no/theme/colorsvg.mdx +++ b/apps/www/app/content/fundamentals/no/theme/colorsvg.mdx @@ -13,7 +13,7 @@ search_terms: svg, fargelegge, symbol Hvis illustrasjonen skal se helt lik ut uansett lys eller mørk modus, og ha de fargene som er satt i illustrasjonsverktøyet, trenger du ikke følge guiden under. -Hvis du derimot ønsker å styre farger og skalering via kode (for eksempel med design tokens), bør illustrasjoner legges til som SVG og struktureres på en bestemt måte. +Hvis du derimot ønsker å styre farger og skalering via kode (for eksempel med design tokens), bør illustrasjoner legges til som SVG via `` og struktureres på en bestemt måte. Merk at skal en svg brukes kun ett sted så kan du også sette inn svg-koden inline, eksempel på dette finner du helt til slutt i guiden. ## Grunnleggende oppsett @@ -66,7 +66,7 @@ Om du ikke vil sette en standard regel for alle illustrasjoner, kan du heller se ``` -Test story +Test story for currentColor Ø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: @@ -82,6 +82,9 @@ Med tilhørende token: } ``` +Test story for icon color token + + ### Flerfarget illustrasjon, typisk merkevarebærende symboler og små illustrasjoner For illustrasjoner med flere farger kan du styre fargene direkte i fill og stroke på hver path i grafikken inni svg-fila. @@ -112,6 +115,9 @@ Med tilhørende tokens, i eksempelet har illustrasjonen fått gråskala i mørk ``` Du kan selvsagt fargelegge ved å peke direkte til fargene i designsystemet, eller om du har laget tokens for illustrasjoner så bruker du dem. +Test story for flerfarget illustrasjon + + ## Husk på tilgjengelighet For å sikre at illustrasjonen er tilgjengelig for alle må du legge til et par detaljer i det omsluttende svg-elementet. @@ -133,4 +139,20 @@ Gi illustrasjonen rollen for bilde og en beskrivende tekst ``` -For mer komplekse illustrasjoner kan du bruke mer detaljerte beskrivelser og det finnes også måter å sette inn slike detaljerte beskrivelser på selve grafikken, det går vi ikke inn på her. \ No newline at end of file +For mer komplekse illustrasjoner kan du bruke mer detaljerte beskrivelser og det finnes også måter å sette inn slike detaljerte beskrivelser på selve grafikken, det går vi ikke inn på her. + +## Illustrasjon inline + +Bruken av `` muliggjør at en ikke trenger å gjenta samme svg-kode flere steder. Når du uansett kun skal ha en illustrasjon på ett sted på siden din, så kan du gjerne sette den inn inline. + +```HTML + + + + + + +``` + +Test story for inline flerfarget illustrasjon + \ No newline at end of file diff --git a/apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx b/apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx index f68b1c5fa1..a783bea9cd 100644 --- a/apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx +++ b/apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx @@ -2,5 +2,17 @@ import { Textfield } from '@digdir/designsystemet-react'; import { useState } from 'react'; export const WithCurrentColor = () => { - return ; + return ; }; + +export const WithIconColor = () => { + return ; +}; + +export const WithMultiColor = () => { + return ; +}; + +export const WithMultiColorInline = () => { + return ; +}; \ No newline at end of file From 0a70e1525614a52d7b11e0b1d06fb2e2765c66b9 Mon Sep 17 00:00:00 2001 From: Roy Halvor Frimanslund <5771598+Camulos@users.noreply.github.com> Date: Mon, 1 Jun 2026 13:19:08 +0200 Subject: [PATCH 06/11] Completed draft in english --- .../fundamentals/en/theme/colorsvg.mdx | 124 ++++++++++++++++++ 1 file changed, 124 insertions(+) diff --git a/apps/www/app/content/fundamentals/en/theme/colorsvg.mdx b/apps/www/app/content/fundamentals/en/theme/colorsvg.mdx index acfc8dbef6..ad9d5351e3 100644 --- a/apps/www/app/content/fundamentals/en/theme/colorsvg.mdx +++ b/apps/www/app/content/fundamentals/en/theme/colorsvg.mdx @@ -34,3 +34,127 @@ To make an SVG easy to reuse and style, you should prepare the file as follows: ``` +The file can then be used in HTML like this: +```HTML + + + +``` +## Practical implementation + +What you need to adjust further depends on what you want to achieve. + +### Single-colour illustration (typical for certain logos and icons) + +For a single-colour illustration, you can control the colour either by inheriting the current text colour or by applying a class or id. + +If you want all SVG illustrations to use the current text colour by default, you can use currentColor. Remove all colour values from the SVG graphics and add a rule for currentColor, so the illustration inherits the surrounding text colour. You may need to do the same for stroke. +```CSS +svg { + fill: currentColor; +} +``` + +If you do not want to apply a global rule, you can instead set currentColor directly on the fill and/or stroke attributes inside the SVG file itself. This approach is used for icons in the design system, for example in buttons. +```SVG + + + +``` + +Test story for currentColor + + +If you need more control, you can manage colours via a class or id. Remove all colours from the SVG and add a class to the outer element, for example: +```HTML + + + +``` + +With a corresponding token: +```CSS +.iconcolour { + color: var(--ds-color-text-default); +} +``` + +Test story for icon color token + + +### Multi-colour illustration (typical for brand elements and small illustrations) + +For illustrations with multiple colours, you can control colours directly on fill and stroke for each path inside the SVG file. +```SVG + + + +``` + +With corresponding tokens. In this example, the illustration uses greyscale in dark mode: +```CSS +:root { + --ds-color-logopart1: #1E98F5; + --ds-color-logopart2: #68707C; + --ds-color-logopart3: #E5AA20; + --ds-color-logopart4: #F45F63; + @media (prefers-color-scheme: dark) { + --ds-color-logopart1: #A3A3A3; + --ds-color-logopart2: #68707C; + --ds-color-logopart3: #C2C2C2; + --ds-color-logopart4: #8A8A8A; + } +} +``` + +You can of course reference colours directly from the design system, or use dedicated tokens if you have defined them for illustrations. + +Test story for multicolored illustration + + +## Accessibility considerations +To ensure the illustration is accessible, you need to add a few attributes to the outer element. + +### Decorative illustration +Hide the illustration from screen readers by setting its role to presentation and marking it as hidden: +```HTML + +``` + +### Meaningful illustration +If the illustration conveys meaning, give it the role of an image and provide a descriptive label: +```HTML + + + +``` +For more complex illustrations, you may need more detailed descriptions. There are also ways to embed such descriptions directly within the SVG, but that is outside the scope of this guide. + + +## Inline illustration + +Using `` allows you to avoid repeating the same SVG code in multiple places. If the illustration is only used once on a page, it is perfectly acceptable to include it inline instead. + +```HTML + + + + + + +``` + +Test story for inline multi-colour illustration + From e7ff1e03d3674db644ecd49a61d3998fa6bec61e Mon Sep 17 00:00:00 2001 From: Roy Halvor Frimanslund <5771598+Camulos@users.noreply.github.com> Date: Mon, 1 Jun 2026 15:36:13 +0200 Subject: [PATCH 07/11] Changed illustrasjon to grafikk --- .../fundamentals/en/theme/colorsvg.mdx | 10 +-- .../fundamentals/no/theme/colorsvg.mdx | 70 +++++++++---------- 2 files changed, 40 insertions(+), 40 deletions(-) diff --git a/apps/www/app/content/fundamentals/en/theme/colorsvg.mdx b/apps/www/app/content/fundamentals/en/theme/colorsvg.mdx index ad9d5351e3..7cb8e90f1c 100644 --- a/apps/www/app/content/fundamentals/en/theme/colorsvg.mdx +++ b/apps/www/app/content/fundamentals/en/theme/colorsvg.mdx @@ -1,8 +1,8 @@ --- -title: Use tokens to colour illustrations -sidebar_title: Illustrations -description: With Designsystemet, you can colour illustrations using tokens. +title: Use tokens to colour graphics +sidebar_title: Colour graphics +description: With Designsystemet, you can colour graphics using tokens. date: 2026-06-01 category: Theme color: red @@ -12,9 +12,9 @@ order: 200 search_terms: svg, colouring, symbol --- -If the illustration should look exactly the same regardless of light or dark mode, and use the colours defined in the illustration tool, you do not need to follow the guidance below. +If the graphics should look exactly the same regardless of light or dark mode, and use the colours defined in the design tool, you do not need to follow the guidance below. -However, if you want to control colours and scaling via code (for example using design tokens), illustrations should be added as SVGs and structured in a specific way. +However, if you want to control colours and scaling via code (for example using design tokens), graphics should be added as SVGs and structured in a specific way. ## Basic setup diff --git a/apps/www/app/content/fundamentals/no/theme/colorsvg.mdx b/apps/www/app/content/fundamentals/no/theme/colorsvg.mdx index d08a8968d7..90ee8ab8d4 100644 --- a/apps/www/app/content/fundamentals/no/theme/colorsvg.mdx +++ b/apps/www/app/content/fundamentals/no/theme/colorsvg.mdx @@ -1,19 +1,19 @@ --- -title: Bruk tokens for å fargelegge illustrasjoner -sidebar_title: Illustrasjoner -description: Med Designsystemet kan du fargelegge illustrasjoner. +title: Bruk tokens for å fargelegge grafikk +sidebar_title: Fargelegg grafikk +description: Med Designsystemet kan du fargelegge grafikk. date: 2026-06-01 category: Tema color: red icon: PencilLineIcon published: true order: 200 -search_terms: svg, fargelegge, symbol +search_terms: svg, fargelegge, symbol, grafikk --- -Hvis illustrasjonen skal se helt lik ut uansett lys eller mørk modus, og ha de fargene som er satt i illustrasjonsverktøyet, trenger du ikke følge guiden under. +Hvis grafikk skal se helt likt ut uansett lys eller mørk modus, og ha de fargene som er satt i illustrasjonsverktøyet, trenger du ikke følge guiden under. -Hvis du derimot ønsker å styre farger og skalering via kode (for eksempel med design tokens), bør illustrasjoner legges til som SVG via `` og struktureres på en bestemt måte. Merk at skal en svg brukes kun ett sted så kan du også sette inn svg-koden inline, eksempel på dette finner du helt til slutt i guiden. +Hvis du derimot ønsker å styre farger og skalering via kode (for eksempel med design tokens), bør grafikken legges til som SVG via `` og struktureres på en bestemt måte. Merk at skal en svg brukes kun ett sted så kan du også sette inn svg-koden inline, eksempel på dette finner du helt til slutt i guiden. ## Grunnleggende oppsett @@ -45,17 +45,17 @@ Fila brukes deretter slik i html: Hva du må tilpasse videre avhenger av hva du ønsker å oppnå. -### Ensfarget illustrasjon, typisk for enkelte logoer og ikoner +### Ensfarget grafikk, typisk for enkelte logoer og ikoner -For en énsfarget illustrasjon kan du styre fargene enten ved å peke på gjeldende tekstfarge eller fargelegge via en klasse eller id. +For en énsfarget grafikk kan du styre fargene enten ved å peke på gjeldende tekstfarge eller fargelegge via en klasse eller id. -Vil du bruke gjeldende tekstfarge som standard på alle svg-illustrasjoner kan du bruke currentColor som stil. Fjern alle farger fra grafikken i svg-fila og legg til stilregelen for currentColor, da arver illustrasjonen gjeldende tekstfarge. Det kan hende du må gjøre det samme for stroke. +Vil du bruke gjeldende tekstfarge som standard på alle svg-grafikk kan du bruke currentColor som stil. Fjern alle farger i svg-fila og legg til stilregelen for currentColor, da arver grafikken gjeldende tekstfarge. Det kan hende du må gjøre det samme for stroke. ```CSS svg { fill:currentColor; } ``` -Om du ikke vil sette en standard regel for alle illustrasjoner, kan du heller sette currentColor på fill og/eller stroke path inne i selve svg-fila. I designsystemet blir denne metoden brukt på ikoner, for eksempel i knappene. +Om du ikke vil sette en standard regel for alle svg-filer, kan du heller sette currentColor på fill og/eller stroke path inne i selve svg-fila. I designsystemet blir denne metoden brukt på ikoner, for eksempel i knappene. ```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 guiden. ## Grunnleggende oppsett @@ -41,6 +52,24 @@ Fila brukes deretter slik i html: ``` + +

Tips: Skalering av SVG

+

+SVG skalerer enklest når: +

+
    +
  • viewBox er satt på `` eller ``
    • +
  • størrelse styres via width og height på det omsluttende elementet
    • +
+

+Hvis SVG ikke skalerer som forventet, er det ofte fordi: +

+
    +
  • viewBox mangler
    • +
  • eller at den har feil proporsjoner
    • +
+ + ## I praktisk bruk Hva du må tilpasse videre avhenger av hva du ønsker å oppnå. @@ -155,4 +184,42 @@ Bruken av `` muliggjør at en ikke trenger å gjenta samme svg-kode flere s ``` Test story for inline flerfarget illustrasjon - \ No newline at end of file + + +## 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å `` eller via CSS + +- **Farger endrer seg ikke** + - Sjekk at SVG ligger inline i DOM (ikke via ``) + - 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 `` peker til riktig fil og `id` (`file.svg#id`) + - Sjekk at SVG-fila inneholder et `` med riktig `id` + +- **Endringer i CSS påvirker ikke SVG** + - Sjekk at SVG ikke lastes via `` + - Sjekk at CSS-variabler (`var(...)`) er definert i samme DOM +`` + + +## Kilder og videre lesning + +Her finner du lenker til nyttige ressurser dersom du ønsker å forstå SVG bedre, fordype deg i detaljer rundt styling og feilsøking, eller jobbe videre med optimalisering av grafikk. + +- [SVG: Scalable Vector Graphics (MDN)](https://developer.mozilla.org/en-US/docs/Web/SVG) +- [\ – SVG element (MDN)](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/use) +- [viewBox attribute (MDN)](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) +- [Fills and strokes (MDN)](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes) +- [SVG 2 spesifikkasjon (W3C)](https://svgwg.org/svg2-draft/) +- [6 Common SVG Fails (and How to Fix Them) (CSS‑Tricks)](https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/) \ No newline at end of file From 93190e994735fb36b03d37d10a50284071e4348c Mon Sep 17 00:00:00 2001 From: Roy Halvor Frimanslund <5771598+Camulos@users.noreply.github.com> Date: Tue, 2 Jun 2026 10:11:18 +0200 Subject: [PATCH 09/11] changed label for sample placeholder --- apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx b/apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx index a783bea9cd..cd2bef023c 100644 --- a/apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx +++ b/apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx @@ -14,5 +14,5 @@ export const WithMultiColor = () => { }; export const WithMultiColorInline = () => { - return ; + return ; }; \ No newline at end of file From 4b016be52632bd2763b3e7158e77958b47508681 Mon Sep 17 00:00:00 2001 From: Roy Halvor Frimanslund <5771598+Camulos@users.noreply.github.com> Date: Tue, 2 Jun 2026 10:16:37 +0200 Subject: [PATCH 10/11] fix markup for html-tag inserted as plain text --- apps/www/app/content/fundamentals/en/theme/colorsvg.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/www/app/content/fundamentals/en/theme/colorsvg.mdx b/apps/www/app/content/fundamentals/en/theme/colorsvg.mdx index 7cb8e90f1c..99352edf49 100644 --- a/apps/www/app/content/fundamentals/en/theme/colorsvg.mdx +++ b/apps/www/app/content/fundamentals/en/theme/colorsvg.mdx @@ -70,7 +70,7 @@ If you do not want to apply a global rule, you can instead set currentColor dire Test story for currentColor -If you need more control, you can manage colours via a class or id. Remove all colours from the SVG and add a class to the outer element, for example: +If you need more control, you can manage colours via a class or id. Remove all colours from the SVG and add a class to the outer `` element, for example: ```HTML @@ -123,7 +123,7 @@ Test story for multicolored illustration ## Accessibility considerations -To ensure the illustration is accessible, you need to add a few attributes to the outer element. +To ensure the illustration is accessible, you need to add a few attributes to the outer `` element. ### Decorative illustration Hide the illustration from screen readers by setting its role to presentation and marking it as hidden: From 0f6186b635a5fb4d2287fc1ca8f4b451ead61004 Mon Sep 17 00:00:00 2001 From: Barsnes Date: Thu, 25 Jun 2026 15:11:06 +0200 Subject: [PATCH 11/11] update a story, misc text --- .../fundamentals/no/theme/colorsvg.mdx | 52 ++++++++----------- .../no/theme/colorsvg.stories.tsx | 33 +++++++++--- 2 files changed, 48 insertions(+), 37 deletions(-) diff --git a/apps/www/app/content/fundamentals/no/theme/colorsvg.mdx b/apps/www/app/content/fundamentals/no/theme/colorsvg.mdx index e80bc0d73f..60716e1b74 100644 --- a/apps/www/app/content/fundamentals/no/theme/colorsvg.mdx +++ b/apps/www/app/content/fundamentals/no/theme/colorsvg.mdx @@ -53,21 +53,15 @@ Fila brukes deretter slik i html: ``` -

Tips: Skalering av SVG

-

-SVG skalerer enklest når: -

-
    -
  • viewBox er satt på `` eller ``
    • -
  • størrelse styres via width og height på det omsluttende elementet
    • -
-

-Hvis SVG ikke skalerer som forventet, er det ofte fordi: -

-
    -
  • viewBox mangler
    • -
  • eller at den har feil proporsjoner
    • -
+

Tips: Skalering av SVG

+
+ SVG skalerer enklest når: + - viewBox er satt på `` eller `` + - størrelse styres via width og height på det omsluttende elementet +
+ Hvis SVG ikke skalerer som forventet, er det ofte fordi: + - viewBox mangler + - eller at den har feil proporsjoner ## I praktisk bruk @@ -79,13 +73,13 @@ Hva du må tilpasse videre avhenger av hva du ønsker å oppnå. For en énsfarget grafikk kan du styre fargene enten ved å peke på gjeldende tekstfarge eller fargelegge via en klasse eller id. Vil du bruke gjeldende tekstfarge som standard på alle svg-grafikk kan du bruke currentColor som stil. Fjern alle farger i svg-fila og legg til stilregelen for currentColor, da arver grafikken gjeldende tekstfarge. Det kan hende du må gjøre det samme for stroke. -```CSS +```css svg { fill:currentColor; } ``` Om du ikke vil sette en standard regel for alle svg-filer, kan du heller sette currentColor på fill og/eller stroke path inne i selve svg-fila. I designsystemet blir denne metoden brukt på ikoner, for eksempel i knappene. -```SVG +```html ``` -Test story for currentColor - + + Ø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: -```HTML +```html ``` Med tilhørende token: -```CSS +```css .iconcolor { color: var(--ds-color-text-default); } ``` Test story for icon color token - + ### Flerfarget grafikk, typisk merkevarebærende symboler og små illustrasjoner @@ -128,7 +122,7 @@ For grafikk med flere farger kan du styre fargene direkte i fill og stroke på h ``` Med tilhørende tokens, i eksempelet har illustrasjonen fått gråskala i mørk modus: -```CSS +```css :root { --logo-color-part1:#1E98F5; --logo-color-part2:#68707C; @@ -144,8 +138,7 @@ Med tilhørende tokens, i eksempelet har illustrasjonen fått gråskala i mørk ``` Du kan selvsagt fargelegge ved å peke direkte til fargene i designsystemet, eller om du har laget tokens for illustrasjoner så bruker du dem. -Test story for flerfarget illustrasjon - + ## Husk på tilgjengelighet @@ -154,7 +147,7 @@ For å sikre at illustrasjonen er tilgjengelig for alle må du legge til et par ### Grafikk som kun er dekorativ Skjul grafikken for skjermleser med å sette rolle til presentasjon og at den skal være skjult. -```HTML +```html @@ -163,7 +156,7 @@ Skjul grafikken for skjermleser med å sette rolle til presentasjon og at den sk ### Grafikk som er meningsbærende Gi grafikken rollen for bilde og en beskrivende tekst -```HTML +```html @@ -174,7 +167,7 @@ For mer kompleks grafikk kan du bruke mer detaljerte beskrivelser og det finnes Bruken av `` 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. -```HTML +```html @@ -183,9 +176,6 @@ Bruken av `` muliggjør at en ikke trenger å gjenta samme svg-kode flere s ``` -Test story for inline flerfarget illustrasjon - - ## Vanlige problemer og hva du bør sjekke Hvis SVG ikke oppfører seg som forventet, er dette de vanligste årsakene: diff --git a/apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx b/apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx index cd2bef023c..fa815212fe 100644 --- a/apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx +++ b/apps/www/app/content/fundamentals/no/theme/colorsvg.stories.tsx @@ -1,18 +1,39 @@ import { Textfield } from '@digdir/designsystemet-react'; -import { useState } from 'react'; export const WithCurrentColor = () => { - return ; + return ( + + ); }; export const WithIconColor = () => { - return ; + return ( + + ); }; export const WithMultiColor = () => { - return ; + return ( + + ); }; export const WithMultiColorInline = () => { - return ; -}; \ No newline at end of file + return ( + + ); +};