0

Please take a look at the code: JSFiddle

I need to use color variables (Eg: $primary) in SVG background image code, because of multiple color themes in my website. When we add $primary value as a direct color (Eg: $primary: blue) it will work. But HEX color codes ($primary: #1828B4) are not rendering in output.

I know using % instead of # will solve the problem. But this case it is not possible while we are using color variables!

Please advise any solution.

vishnu
  • 2,848
  • 3
  • 30
  • 55
  • The demo on the linked JSFiddle seems to work fine. Changing `$primary: red` to `$primary: #0000ff` works without issues. – Alvaro Montoro Mar 22 '23 at 12:42
  • @AlvaroMontoro global color codes may work. But custom not. – vishnu Mar 22 '23 at 13:01
  • 1
    @AlvaroMontoro that's because SCSS silently converts `#0000ff` to `blue`, so it will work only for named colours. – myf Mar 22 '23 at 13:01
  • 1
    See / kinda duplicate of: https://stackoverflow.com/questions/25477819/scss-variable-in-background-image-with-svg-image-data-uri – myf Mar 22 '23 at 13:23

1 Answers1

0

Isn't it possible to use the following:

SCSS file:

$primary: #CCC;

.svg {
  stroke: $primary;
}
Dennis
  • 528
  • 3
  • 24
  • Let me check... – vishnu Mar 22 '23 at 13:01
  • OP is using SVG as DataURI background image, so the output string must be in URI encoded. Sadly SCSS does not know that and prints (non-named) colour verbatim, including `#` what finishes the DataURI payload. (It has to be encoded as `%23`.) – myf Mar 22 '23 at 13:05
  • I remember I used to use a function in SASS that converts them to encoded URIs (yes, its possible to make SASS do it!). – somethinghere Mar 22 '23 at 14:07
  • 1
    Some SASS function doing that is suggested in https://stackoverflow.com/a/25478589/540955 – myf Mar 22 '23 at 14:44