-1

Is it possible using pure CSS (no JS) to set set fill color of an inline SVG?

I have an element with some content and I need to

  1. Reset the content to a simple SVG image (basically a glyph)
  2. Dynamically reset the fill color of that SCG (not as an inline attribute on the SVG, as this color is coming from a CSS variable)

div {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 10.586l5.293-5.293a1 1 0 011.414 1.414L13.414 12l5.293 5.293a1 1 0 01-1.414 1.414L12 13.414l-5.293 5.293a1 1 0 11-1.414-1.414L10.586 12 5.293 6.707a1 1 0 011.414-1.414L12 10.586z'/%3E%3C/svg%3E");
}
<div>Hello World<div>

Is it now possible to make this icon red?

Fynn
  • 4,753
  • 3
  • 32
  • 69
  • 1
    Please provide a [mcve] – mplungjan Feb 21 '20 at 14:43
  • Could you add your html code too – TheMisir Feb 21 '20 at 14:46
  • 1
    if your SVG has an id or class assigned to it you can simply add a rule in your CSS like `#mySVG { fill: 'any-color-you-like' }` – Rene van der Lende Feb 21 '20 at 14:46
  • 3
    You can only apply styling, if it is embedded directly into the document using an `` element. Everything else is off limits in that regard - ``, iframe, object, setting it as content for another element using `background`/`content`, etc. - all situations in which you can _not_ format this from within your main document stylesheet. – CBroe Feb 21 '20 at 14:47
  • sad. not event with some fancy CSS filter magic? – Fynn Feb 21 '20 at 15:05
  • This is NOT an inline SVG.... **and** `content` is being abused here. It's intended for use in *pseudo-elements*, not as a substitute for actual content. – Paulie_D Feb 21 '20 at 15:35

1 Answers1

4

You can use the filter attribute in css to manipulate colors of inline svgs. https://jsfiddle.net/cq9gm0jn/

div {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 10.586l5.293-5.293a1 1 0 011.414 1.414L13.414 12l5.293 5.293a1 1 0 01-1.414 1.414L12 13.414l-5.293 5.293a1 1 0 11-1.414-1.414L10.586 12 5.293 6.707a1 1 0 011.414-1.414L12 10.586z'/%3E%3C/svg%3E");
}
div.red {
  filter: invert(50%)sepia(100%)saturate(10000%)
}
<div class="red">Hello World</div>
<div>Hello World</div>
Mitth'raw'nuruodo
  • 76
  • 3