How to change the color of an svg element?

Question

I want to use this technique and change the SVG color, but so far I haven't been able to do so. I put this in the CSS, but my image is always black, no matter what.

My code:

.change-my-color {
  fill: green;
}

<svg>
    <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>

Solution 1

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" />

You can inline your SVG, tag your fallback image with a class name (my-svg-alternate):

<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" .../>
</svg>

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

And in CSS use the no-svg class from Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ) to check for SVG support. If there is no SVG support the SVG block will be ignored and the image will be displayed, otherwise the image will be removed from the DOM tree (display: none):

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

Then you can change the color of your inlined element:

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

Solution 2

2020 answer

CSS Filter works on all current browsers

To change any SVGs color

1. Add the SVG image using an <img> tag.

<img src="dotted-arrow.svg" class="filter-green"/>

2. To filter to a specific color, use the following Codepen(Click Here to open codepen) to convert a hex color code to a CSS filter:

For example, output for #00EE00 is

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

3. Add the CSS filter into this class.

    .filter-green{
        filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    }

Solution 3

To change the color of any SVG you can directly change the svg code by opening the svg file in any text editor. The code may look like the below code

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <g>
        <path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
            C181.113,454.921,171.371,464.663,161.629,474.404z"/>
    /*Some more code goes on*/
    </g>
    </svg>

You can observe that there are some XML tags like path, circle, polygon etc. There you can add your own color with help of style attribute. Look at the below example

<path fill="#AB7C94" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
                C181.113,454.921,171.371,464.663,161.629,474.404z"/>

Add the style attribute to all the tags so that you can get your SVG of your required color

Edit: As per Daniel's comment, we can use fill attribute directly instead of fill element inside style attribute

Solution 4

if you want to change the color dynamically:

1. Open the SVG in a code editor
2. Add or rewrite the attribute of fill of every path to fill="currentColor"
3. Now, that svg will take the color of your font color so you can do something like:

svg {
    color : "red";
}

Solution 5

Only SVG with path information. you can't do that to the image.. as the path you can change stroke and fill information and you are done. like Illustrator

so: via CSS you can overwrite path fill value

path { fill: orange; }

but if you want more flexible way as you want to change it with a text when having some hovering effect going on.. use

path { fill: currentColor; }

body {
  background: #ddd;
  text-align: center;
  padding-top: 2em;
}

.parent {
  width: 320px;
  height: 50px;
  display: block;
  transition: all 0.3s;
  cursor: pointer;
  padding: 12px;
  box-sizing: border-box;
}

/***  desired colors for children  ***/
.parent{
  color: #000;
  background: #def;
}
.parent:hover{
  color: #fff;
  background: #85c1fc;
}

.parent span{
  font-size: 18px;
  margin-right: 8px;
  font-weight: bold;
  font-family: 'Helvetica';
  line-height: 26px;
  vertical-align: top;
}
.parent svg{
  max-height: 26px;
  width: auto;
  display: inline;
}

/****  magic trick  *****/
.parent svg path{
  fill: currentcolor;
}

<div class='parent'>
  <span>TEXT WITH SVG</span>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">
<path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>
</svg>
</div>

View more solutions

Comments

[Meg]

I'm no svg expert, but have you tried changing fill to background-color?

[Barbara]

@Megan in svg background-color is specified with the 'fill' property and the border with 'stroke' (as you would do in Illustrator). w3.org/TR/SVG/propidx.html

[pawel]

CSS from your HTML document will not apply to SVG elements within <img />

[mtyson]

This is possible now. Simple and functional answer here: stackoverflow.com/a/53336754/467240

[djcaesar9114]

Hi, you should probably change the acceepted answer (look at the most voted one).

[Mahdi Khansari]

To have any CSS abilities, you can use Font Icon. Check my answer stackoverflow.com/a/70479636/7221507

[mohsen Ghalandar]

you can use this web site to filter your svg to specific color codepen.io/sosuke/pen/Pjoqqp

[cydoc]

By the way: If you are a RoR developer, you can add a new method for the sass precompiler which can do the job too. This is much better because you will have the base64 encoded, correct colored image in your compiled css file. No JS needed anymore! Maybe I could provide the code I have written, have to talk to the CTO.

[bg17aw]

Why not just using attribute fill like this: fill = "#AB7C94" ? Not sure why the style attribute is needed

[CodeMouse92]

It also messes up screen readers. See "Death to Icon Fonts" by Seren Davies

[Claytronicon]

+1 for providing a solution, rather than saying it can't be done. This answer is also relevant: stackoverflow.com/questions/11978995/…

[roger]

Thanks, you just save me from myself. .custom-disabled > svg {filter:invert(0.2) sepia(1) saturte(0) hue-rotate(0);} did just the job I need to disabled icon.

[Sushant Pachipulusu]

Hi Daniel, yeah it works. I didn't knew that fill can be used as an attribute. Sorry for not noticing your comment so long @bg17aw

[Javier Rey]

You cannot style embedded object SVGs from the hosting document.

[Robert Longson]

@JavierRey you could inject the styling into the object tag's contents via javascript. But you're right that it does not apply if you just add it to the hosting document's stylesheet.

[Ryan Ellis]

I'm using the solution from @manish-menaria and it works perfectly.

[Kevin Wang]

This comes with the usual caveat about not being supported in older browser versions: developer.mozilla.org/en-US/docs/Web/CSS/…

[jdunning]

As noted in the CodePen, if your SVG isn't black (mine was grey), adding brightness(0) saturate(100%) to the beginning of the list of filters will first turn it 100% black, which enables the other filters to change it to the correct color.

[jdunning]

Also, lots of fascinating background on the solution in this StackOverflow question that informed the CodePen.

[Flimm]

This only works if you include the SVG file inline in the HTML. I've edited your answer to make this clear.

[Sam Doidge]

My guy. The support seems acceptable caniuse.com/#feat=css-filters.

[mtyson]

Accepted answer should be changed to: stackoverflow.com/a/53336754/467240

[WEBjuju]

works so well, used this unaffiliated codepen to get my hex into a filter: codepen.io/sosuke/pen/Pjoqqp

[Menai Ala Eddine - Aladdin]

This is what I was looking for. Changing SVG imported into the image. Perfect.

[Robert Longson]

That's basically the same suggestion as this answer or this one

[Robert Longson]

Already suggested by this answer

[Robert Longson]

The accepted answer already suggests inlining and then setting the colour as the solution.

[Shivani]

those answers have mentioned fill in the path tag, it worked for me in the svg tag, hence i posted it

[Vixson]

Thanks a lot, @vsync this is just the best hack around for what I need.

[FelipeCaparelli]

sometimes you just need to remove the def tag inside your SVG file, because if you have it, your CSS rules will not be applied: `` <defs> <style type="text/css"> <![CDATA[ .fil0 {fill:#373435} ]]> </style> </defs> ``

[phil123456]

this answer makes no sense, where is the svg image file name ??? , why use viewbox or enable background ? what if you want to change the color, and not the background ?

[phil123456]

but how do you specify a particular color ?

[Sergei Kovalenko]

you guys saved my day

[Nick Dimou]

This should be the best answer because it provides the same result which much less code. Less code, better code.

[virgiliogm]

This is great! I dynamically change the color of an SVG in a React app using the npm package hex-to-css-filter

[Ali Besharati]

why vote down !? this work well you can see it in the demo

[Ahsan]

This is the real and the easiest answer.

[Jeremy Caris]

This was the best answer. Wrapping the svg in a span or div and applying fill: currentColor; to it is the key.

[HoldOffHunger]

Pressing the button in the link provided seems to have no effect at all.

[djcaesar9114]

I don't understand why this answer is not the selected answer...

[justdvl]

There is a way to do it, just give the svg fill="currentColor" property, than it will get color from CSS color assigned to it (font color). See this answer stackoverflow.com/a/65147574/8230784

[Peppe L-G]

This is how icons (SVGs) from font-awesome do it. Works great.

[bloub]

from a black svg, you can get the "filter values" for any color with the following tool: codepen.io/sosuke/pen/Pjoqqp

[Barefaced Bear]

We can just write <svg style="fill: the color required">...</svg>. Worked for me perfectly.

[Barefaced Bear]

We can just write <svg style="fill: the color required">...</svg>. Worked for me perfectly.

[edwin]

Works great! Note to add: the svg should be white.

[Torben]

If you don't want to change the color of the svg programmatically, this is the best and easiest solution. Thank you!

[injecteer]

why bother with other "answers"?

[Fauzan Edris]

as note, this method change the source file (base color), if you need change the color dynamically, you can use the css code like the Manish Menaria answer..

[Dinith Rukshan Kumara]

Problem I see is, if we need may different colors. Its will increase the size of project & slower the page loading. But SVG's are normally small in size. In my case its not a problem to add few images. But this is a good answer. Thanks!

[marsnebulasoup]

Also you may have to change stroke attributes to stroke="currentColor".

[joakimriedel]

This is the way. Coupled with a SVGO plugin that automatically translates all SVG files, it's a great solution! See gist: gist.github.com/joakimriedel/b001b5bedd70274adcb6238b267565d‌​8

[Marten]

Use the color attribute to change the color of an SVG element: color="#ffffff", fill will just fill out the SVG with color, not change the color.

[Cybernetic]

Should mention how to calculate this for any color: isotropic.co/hex-color-to-css-filter

[Rune FS]

Any ways to apply a filter to an image used as the background of an element?

[Niksr]

It doesn't work if SVG is saved as a file and displayed with <img> tag.

[KVM]

Doesn't work for me

[racitup]

How are you including the SVG, inline or using an img tag? Please include in your answer.

[jakhando]

that is awesome, comments helped not less than asnwer itself.

[rlatief]

What makes a thousand ones think this is better than leave it as <svg> and apply CSS fill:color into it?

[benjaminhull]

This is a rather convoluted approach. But it can be used if you don't have access to actually change the SVG directly in the code.

[Leszek]

Wow this is quick, easy and has zero implementation problems (in comparison to other solutions, given my project characteristics).

[Dai]

I don't recommend using filter to invert colors in an image because that will create a new stacking-context (which messes-up positioned elements and z-indexing). When I need to invert colors or similar I just create a second separate image, though I appreciate this doesn't work for dynamically-generated or user-supplied images.

[umbriel]

On Solution 3 pros and cons; it might be worth adding that using multiple filters on complex SVG images have a huge negative impact on performance. And should be used sparingly if at all.

[darrendev]

Should add that it only works if you are using the svg inline in the html.

[moropeza]

changing manually fill attribute works -> stroke="currentColor"., I'm working with Angular Material, adding a custon icon a then changing color via html.

[Akindele Michael]

Beautiful and probably the most safe option to consider