16

In the following SCSS, I would like to use the fg-color variable within the url background-image attribute.

$fg-color: #ff6464;

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23ff6464'/></svg>");
}

At the moment the value, of the variable in simply repeated within the SVG string, like so:

fill='%23ff6464'

I would like this to be automatically updated whenever the fg-color variable is updated.

How can I do this?

UPDATE:

This input SCSS:

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='$fg-color'/></svg>");
}

Outputs this CSS:

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='$fg-color'/></svg>");
}

... it is exactly the same - the variable is not processed.

NOTE:

I have reviewed these questions, that appear to be similar, but are not the same:

Community
  • 1
  • 1
bguiz
  • 27,371
  • 47
  • 154
  • 243
  • @cimmanon I'll ignore the snarkiness of your comment. Anyway, yes, I have tried using the variable, and the output that I get doesn't do any substitution at all. I'll update my question to show exactly what I get. – bguiz Aug 25 '14 at 02:57
  • @cimmanon I have found a way to do this. It turns out that it was a more complicated than simply "using the variable". – bguiz Aug 25 '14 at 03:21

3 Answers3

41

First, create a SASS function. This (ab)uses string interpolation to convert the colour to a string, and then strips the first character (should always be '#'), and puts '%23' in its place (URL encoded form of '#').

@function url-friendly-colour($colour) {
    @return '%23' + str-slice('#{$colour}', 2, -1)
}

Then use the function - but in order for it to work within the string, it must be interpolated, using #{}

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='#{url-friendly-colour($fg-color)}'/></svg>");
}

The caveat with this approach, of course, is that it will not work with colours that are specified by colour name instead of their hexadecimal colour.

E.g. #f00 works but red will not.

bguiz
  • 27,371
  • 47
  • 154
  • 243
  • That's an interesting approach, which browser were you using? For me just using `fill="#{$color}"` works just fine. – Jure Triglav Aug 31 '14 at 18:17
  • @JureTriglav all of them (including IE) – bguiz Aug 31 '14 at 23:26
  • 1
    Yes, should work with anything above IE 8. Is the `url-friendly-colour` required for cross-browser support? From my testing it isn't necessary, and simply interpolating a color directly works: `fill="#{$color}`. – Jure Triglav Sep 01 '14 at 09:18
  • Thanx! Worked for me. In Chrome I had it working by using: `fill='#{$fg-color'}` But Firefox wouldn't accept this. I could use rgb() color definitions, that works too. But I your SASS function better... – Bartezz Oct 18 '15 at 15:59
  • 1
    This is years later but I just used @JureTriglav option and it worked easiest. – frankie4fingers Dec 23 '18 at 03:17
  • 1
    I found this site useful for giving you the perfectly encoded URL ready for use: yoksel.github.io/url-encoder - Just copy the SVG code into it and copy out the returned CSS :-) – Friendly Code Feb 11 '20 at 11:24
6

Not an answer to your question, but an alternative way to achieve a similar result in many cases (think simple mono-color icons). You can use CSS mask-image like so:

i.icon-back {
  background-color: $fg-color; 
  mask-image: url('data:image/svg…');
}

Browser support for CSS masks is missing Edge/IE at the time of this writing.

Frank Lämmer
  • 2,165
  • 19
  • 26
1

A better solution

// SASS 
$nt-link-color
.circle{
  background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' style='fill:#{toRGB($nt-link-color)};' width='24' height='28' viewBox='0 0 24 28'><path d='M24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z'></path></svg>")  no-repeat;
}

// FUNCTION
@function toRGB ($color) {
  @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}
Biju B Adoor
  • 528
  • 4
  • 6