115

I have a bunch of SVG images that I want to embed in an HTML page, which is styled with CSS.

I want to be able to have elements in the SVG have their color inherited from the parent HTML element's color attribute.

I tried setting style="stroke: none; fill: inherit" but this doesn't work.

Peter O.
  • 32,158
  • 14
  • 82
  • 96
user1762639
  • 1,159
  • 2
  • 7
  • 3
  • Take a look at SVG parameters: http://www.schepers.cc/w3c/svg/params/ref.html – Stan Oct 21 '12 at 19:34
  • 3
    Your question isn't clear on *how* you embed the svg fragments. Sounds a bit like http://stackoverflow.com/questions/4906148/how-to-apply-a-style-to-an-embedded-svg though. Anyway, if your fragments are inline in the html, then styling like in your example should work fine. – Erik Dahlström Oct 22 '12 at 12:24

4 Answers4

192

HTML uses color whereas SVG uses fill and stroke. You can get fill or stroke to use the value of the color CSS property by using the value currentColor e.g. fill="currentColor"

kjhughes
  • 106,133
  • 27
  • 181
  • 240
Robert Longson
  • 118,664
  • 26
  • 252
  • 242
90

You can use fill="currentColor".

<a href="#" style="color:red">
<svg fill="currentColor"> ...</svg>
</a>
Коля Міщанчук
  • 1,000
  • 6
  • 3
11

Define the fill: of the whole SVG as currentColor in the CSS:

svg {
  fill: currentColor;
}

This makes the whole SVG to inherit the normal CSS color: of the surrounding element. Just make sure that all SVG child elements don't have any fill defined.

flori
  • 14,339
  • 4
  • 56
  • 63
4

stroke="currentColor" this worked for me

Judith lobo
  • 131
  • 4