Currentcolor Inheritance for Svg Url

How can I change the color of an 'svg' element?

You can't change the color of an image that way. If you load SVG as an image, you can't change how it is displayed using CSS or JavaScript in the browser.

If you want to change your SVG image, you have to load it using <object>, <iframe> or using <svg> inline.

If you want to use the techniques in the page, you need the Modernizr library, where you can check for SVG support and conditionally display or not a fallback image. You can then inline your SVG and apply the styles you need.

See:

#time-3-icon {
   fill: green;
}

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206
    C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161
    C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505
    c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081
    c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

SVG Icon to inherit text color and size

mask combined with background:currentColor; can do it but you have to also set a width:

.my-icon-inherit-font-size-and-color {
  display:inline-block;
  height: 0.7em;
  width:0.5em;
  background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 16 16"> <path d="M2 15.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v13.5zM8 4.41c1.387-1.425 4.854 1.07 0 4.277C3.146 5.48 6.613 2.986 8 4.412z"/></svg>') center/cover;
}

<p>
  <a href="#" style="font-size: 28px; color: blue">
    <i class="my-icon-inherit-font-size-and-color"></i> Some text
  </a>
</p>      
    
<p>
  <a href="#" style="font-size: 38px; color: red">
    <i class="my-icon-inherit-font-size-and-color"></i> Some text
  </a>
</p>

How inherit stroke color in SVG? (Not fill, but stroke color)

As Robert Lognson correctly stated, and previously discussed on StackOverflow, svg used as an image element has a new image context, thus it does not use the document's styles, whereas an inline svg element does use them.

So the following example works:

svg.red {
  color: red;
}

<svg class="red" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="100" width="100">
    <path d="M20 10 H90 V80" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
    <path d="M10 90 L100 0" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
</svg>

Can an SVG inherit its size from the parent element?

If you set the height of the SVG to one of the relative units it will match the font-size of the context. You can combine this with vertical-align if necessary.

h1,h2 {
  color: navy;
}

.height-ch {
    height: 1ch;
    fill: currentColor;
}

.height-em {
    height: 1em;
    fill: currentColor;
}

.height-rem {
    height: 1rem;
    fill: currentColor;
}

<h1>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img"
    aria-hidden="true" class="height-em">
    <path d="M 0 0 L 24 0 L 24 24 L 0 24 Z" />
</svg>
Heading em
</h1>
<h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img"
    aria-hidden="true" class="height-em">
    <path d="M 0 0 L 24 0 L 24 24 L 0 24 Z" />
</svg>
Heading em
</h2>
<h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img"
    aria-hidden="true" class="height-ch">
    <path d="M 0 0 L 24 0 L 24 24 L 0 24 Z" />
</svg>
Heading ch
</h2>
<h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img"
    aria-hidden="true" class="height-rem">
    <path d="M 0 0 L 24 0 L 24 24 L 0 24 Z" />
</svg>
Heading rem
</h2>

Svg color not changing from css color?

Most likely there is something wrong in your css.

Maybe a specificty issue (e.g previously declared svg color styles).

It should work like this:

body{
font-size: 3vw;
}

.green{
color: green
}

.red{
color: red
}

.fill-gray svg{
fill: #ccc;
}

.svg-inline{
display:inline-block;
font-size:1em;
height:1em;
width:1em;
}

<p class="green">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="ionicon svg-inline" viewBox="0 0 512 512">
<title>Logo Instagram</title>
<g id="icon-instagram">
<path id="path1" d="M349.33 69.33a93.62 93.62 0 0193.34 93.34v186.66a93.62 93.62 0 01-93.34 93.34H162.67a93.62 93.62 0 01-93.34-93.34V162.67a93.62 93.62 0 0193.34-93.34h186.66m0-37.33H162.67C90.8 32 32 90.8 32 162.67v186.66C32 421.2 90.8 480 162.67 480h186.66C421.2 480 480 421.2 480 349.33V162.67C480 90.8 421.2 32 349.33 32z"/>
<path id="path2" d="M377.33 162.67a28 28 0 1128-28 27.94 27.94 0 01-28 28zM256 181.33A74.67 74.67 0 11181.33 256 74.75 74.75 0 01256 181.33m0-37.33a112 112 0 10112 112 112 112 0 00-112-112z"/>
</g>
</svg>
 green icon
</p>

<p class="red">
<svg class="svg-inline" fill="currentColor" viewBox="0 0 512 512">
<use href="#icon-instagram" />
</svg> Inline Icon (fill inherited by parent's color)
</p>

<p class="red fill-gray">
<svg class="svg-inline" fill="currentColor" viewBox="0 0 512 512">
<use href="#icon-instagram" />
</svg> Inline Icon (fill color overridden by fill property)
</p>

<p class="red">
<svg class="svg-inline" viewBox="0 0 512 512">
<use href="#icon-instagram" />
</svg> Inline Icon (fill color can't be inherited, since fill="currentColor" is missing )
</p>

---

Related Topics