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>

I'm no svg expert, but have you tried changing fill to background-color? — Meg, Mar 07 '14 at 14:29
@Megan in svg background-color is specified with the 'fill' property and the border with 'stroke' (as you would do in Illustrator). http://www.w3.org/TR/SVG/propidx.html — Barbara, Mar 07 '14 at 14:36
CSS from your HTML document will not apply to SVG elements within — pawel, Mar 07 '14 at 14:38
This is possible now. Simple and functional answer here: https://stackoverflow.com/a/53336754/467240 — mtyson, Jan 12 '20 at 20:27
Hi, you should probably change the acceepted answer (look at the most voted one). — djcaesar9114, Mar 31 '21 at 08:01
To have any CSS abilities, you can use Font Icon. Check my answer https://stackoverflow.com/a/70479636/7221507 — Mahdi Khansari, Dec 25 '21 at 11:15
you can use this web site to filter your svg to specific color https://codepen.io/sosuke/pen/Pjoqqp — mohsen Ghalandar, Apr 11 '22 at 08:22

Manish Menaria · Answer 1 · 2020-01-16T06:09:44.847

1071

2020 answer

CSS Filter works on all current browsers

To change any SVGs color

Add the SVG image using an <img> tag.

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

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%);

Add the CSS filter into this class.

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

edited Jan 16 '20 at 06:09

answered Nov 16 '18 at 11:14

Manish Menaria

17,647
3
18
23

9

This comes with the usual caveat about not being supported in older browser versions: https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility – Kevin Wang Mar 20 '19 at 19:00
112

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 Apr 11 '19 at 16:57
7

Also, lots of fascinating background on the solution in this [StackOverflow question](https://stackoverflow.com/questions/42966641/how-to-transform-black-into-any-given-color-using-only-css-filters/43960991#43960991) that informed the CodePen. – jdunning Apr 11 '19 at 17:05
9

My guy. The support seems acceptable https://caniuse.com/#feat=css-filters. – Sam Doidge Nov 07 '19 at 15:20
3

works so well, used this unaffiliated codepen to get my hex into a filter: https://codepen.io/sosuke/pen/Pjoqqp – WEBjuju Mar 12 '20 at 13:41
This is what I was looking for. Changing SVG imported into the image. Perfect. – Menai Ala Eddine - Aladdin Apr 22 '20 at 04:13
14

but how do you specify a particular color ? – phil123456 Oct 19 '20 at 06:37
This is great! I dynamically change the color of an SVG in a React app using the npm package [hex-to-css-filter](https://github.com/willmendesneto/hex-to-css-filter#usage) – virgiliogm Feb 11 '21 at 12:52
Pressing the button in the link provided seems to have no effect at all. – HoldOffHunger Mar 25 '21 at 16:04
I don't understand why this answer is not the selected answer... – djcaesar9114 Mar 31 '21 at 08:01
1

from a black svg, you can get the "filter values" for any color with the following tool: https://codepen.io/sosuke/pen/Pjoqqp – bloub Jul 15 '21 at 07:42
2

We can just write ``````. Worked for me perfectly. – Barefaced Bear Jul 18 '21 at 04:37
Should mention how to calculate this for any color: https://isotropic.co/hex-color-to-css-filter/ – Cybernetic Nov 28 '21 at 01:25
Any ways to apply a filter to an image used as the background of an element? – Rune FS Dec 07 '21 at 20:17
that is awesome, comments helped not less than asnwer itself. – jakhando Jan 19 '22 at 14:16
What makes a thousand ones think this is better than leave it as – rlatief Feb 24 '22 at 23:31
I don't recommend using `filter` to invert colors in an image [because that will create a new stacking-context](https://stackoverflow.com/questions/25764404/why-does-stacking-order-change-on-webkit-filter-hover) (which messes-up `position`ed 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. – Dai Apr 12 '22 at 06:46

sushant047 · Answer 2 · 2021-07-21T06:48:53.337

402

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

edited Jul 21 '21 at 06:48

answered Dec 04 '14 at 06:10

sushant047

4,271
1
15
27

105

Why not just using attribute `fill` like this: `fill = "#AB7C94"` ? Not sure why the `style` attribute is needed – bg17aw Jan 27 '17 at 19:24
7

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 – sushant047 Apr 30 '18 at 09:08
1

you guys saved my day – Sergei Kovalenko Oct 22 '20 at 14:02
4

This should be the best answer because it provides the same result which much less code. Less code, better code. – Nick Dimou Dec 12 '20 at 05:32
1

If you don't want to change the color of the svg programmatically, this is the best and easiest solution. Thank you! – Torben Jul 30 '21 at 13:10
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](https://stackoverflow.com/a/53336754/8979042).. – Fauzan Edris Sep 22 '21 at 08:33
1

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! – Dinith Rukshan Kumara Sep 22 '21 at 16:44
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. – Marten Oct 01 '21 at 23:19

score 318 · Accepted Answer · edited Dec 31 '18 at 10:24

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;
}

You cannot style embedded `object` SVGs from the hosting document. — Javier Rey, Nov 11 '18 at 04:27
@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. — Robert Longson, Dec 31 '18 at 11:21
I'm using the solution from @manish-menaria and it works perfectly. — Ryan Ellis, Mar 01 '19 at 12:51
Accepted answer should be changed to: https://stackoverflow.com/a/53336754/467240 — mtyson, Jan 12 '20 at 20:27
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: `` `` — FelipeCaparelli, Jul 29 '20 at 19:41
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, Oct 19 '20 at 06:33
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 https://stackoverflow.com/a/65147574/8230784 — justdvl, Apr 27 '21 at 02:15

score 178 · Answer 4 · edited Sep 25 '21 at 06:10

178

if you want to change the color dynamically:

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

svg {
    color : "red";
}

edited Sep 25 '21 at 06:10

Richard Thiessen

222
2
7

answered Dec 04 '20 at 16:56

Mártin Alcalá

1,920
1
6
13

19

This is the real and the easiest answer. – Ahsan Feb 23 '21 at 13:22
3

This is how icons (SVGs) from font-awesome do it. Works great. – Peppe L-G Jun 14 '21 at 13:45
why bother with other "answers"? – injecteer Aug 30 '21 at 14:42
9

Also you may have to change `stroke` attributes to `stroke="currentColor"`. – marsnebulasoup Sep 29 '21 at 21:16
2

This is the way. Coupled with a SVGO plugin that automatically translates all SVG files, it's a great solution! See gist: https://gist.github.com/joakimriedel/b001b5bedd70274adcb6238b267565d8 – joakimriedel Sep 30 '21 at 14:52
19

It doesn't work if SVG is saved as a file and displayed with `` tag. – Niksr Dec 27 '21 at 12:55
1

Doesn't work for me – KVM Dec 27 '21 at 15:37
6

How are you including the SVG, inline or using an img tag? Please include in your answer. – racitup Jan 12 '22 at 17:29
1

Should add that it only works if you are using the svg inline in the html. – darrendev Apr 23 '22 at 13:17
changing manually fill attribute works -> stroke="currentColor"., I'm working with Angular Material, adding a custon icon a then changing color via html. – moropeza Jun 02 '22 at 08:28

score 83 · Answer 5 · edited Aug 11 '21 at 05:50

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>

Yonatan Ayalon · Answer 6 · 2018-11-06T12:03:12.090

46

Added a test page - to color SVG via Filter settings:

E.G filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

Upload & Color your SVG - Jsfiddle

Took the idea from: https://blog.union.io/code/2017/08/10/img-svg-fill/

edited Nov 06 '18 at 12:03

answered Mar 01 '18 at 11:42

Yonatan Ayalon

1,833
17
19

1

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. – roger Mar 18 '18 at 10:29

score 34 · Answer 7 · answered Aug 07 '21 at 18:21

Solutions 1 - Edit SVG to point to the currentColor

<svg>... fill: currentColor stroke: currentColor ...</svg>

Then you can control the color of the stroke and the fill from your css

svg {
  color: blue; // or any color of your choice.
}

Pros and cons:

Simple and uses conventional supported css.

Suitable if:

You control the SVG
SVG can be included inline in the HTML.

Solution 2 - css mask property

<i class="icon"></i>

.icon {
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-image: url(https://url.of.svg/....svg);
  mask-image: url(https://url.of.svg/....svg);
  background-color: blue; // or any color of your choice.
  width: 20px; 
  height: 20px; 
}
}

Pros and cons

Relatively easy to use
Browser support for the mask css property is partial.

Suitable if:

SVG is external, and included via URL
Meant to be used on modern known browsers.

Solution 3 - css Filter property - static color

If the color is known in advance you can use https://codepen.io/sosuke/pen/Pjoqqp to find the filter needed to change your SVG to the desired color. For example, to convert the svg to #00f:

<img src="https://url.of.svg/....svg" class="icon">

.icon {
    filter: invert(8%) sepia(100%) saturate(6481%) hue-rotate(246deg) brightness(102%) contrast(143%); 
}

if your original color isn't black prefix the list of filters with brightness(0) saturate(100%) to convert it first to black.

Pros and cons:

There might be a small, non significant difference between the result and the desired color.

Suitable if:

Desired color is known in advance.
External image

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. — umbriel, Apr 21 '22 at 13:46

vsync · Answer 8 · 2020-12-01T19:23:13.943

SVG mask on a box element with a background color will result:

body{ overflow:hidden; }

.icon {
  --size: 70px;
  display: inline-block;
  width: var(--size);
  height: var(--size);
  transition: .12s;
  
  -webkit-mask-size: cover;
  mask-size: cover;
}

.icon-bike {
  background: black;
  animation: 4s frames infinite linear;
  
  -webkit-mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg);
  mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg);
}

@keyframes frames {
  0% { transform:translatex(100vw) }
  25% { background: red; }
  75% { background: lime; }
  100% { transform:translatex(-100%) }
}

<i class="icon icon-bike" style="--size:150px"></i>

_{Note - SVG masks are not supported in Internet Explorer browsers}

Thanks a lot, @vsync this is just the best hack around for what I need. — Vixson, Jun 17 '20 at 12:45

Felix Hagspiel · Answer 9 · 2017-06-08T09:50:53.327

15

the easiest way would be to create a font out of the SVG using a service like https://icomoon.io/app/#/select or such. upload your SVG, click "generate font", include font files and css into your side and just use and style it like any other text. I always use it like this because it makes styling much easier.

EDIT: As mentioned in the article commented by @CodeMouse92 icon fonts mess up screen readers (and are possibly bad for SEO). So rather stick to the SVGs.

edited Jun 08 '17 at 09:50

answered Apr 16 '15 at 14:55

Felix Hagspiel

2,014
2
22
32

7

It also messes up screen readers. See ["Death to Icon Fonts" by Seren Davies](https://www.youtube.com/watch?v=9xXBYcWgCHA) – CodeMouse92 Mar 31 '17 at 20:55

score 11 · Answer 10 · answered Apr 30 '18 at 10:42

11

To simply change the color of the svg :

Go to the svg file and under styles, mention the color in fill.

<style>.cls-1{fill:#FFFFFF;}</style>

answered Apr 30 '18 at 10:42

Sethu Sathyan

159
1
4

Already suggested by [this answer](https://stackoverflow.com/a/27287453/1038015) – Robert Longson May 12 '20 at 05:26

score 11 · Answer 11 · answered Aug 06 '20 at 13:03

You can try with filter hack:

.colorize-pink {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}

.colorize-navy {
  filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}

.colorize-blue {
  filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}

score 10 · Answer 12 · answered Feb 24 '21 at 18:59

To change color of SVG element I have found out a way while inspecting Google search box search icon below:

.search_icon {
  color: red;
  fill: currentColor;
  display: inline-block;
  width: 100px;
  height: 100px;
}

<span class="search_icon">
    <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>
</span>

I have used span element with "display:inline-block", height, width and setting a particular style "color: red; fill: currentColor;" to that span tag which is inherited by the child svg element.

This was the best answer. Wrapping the svg in a span or div and applying ```fill: currentColor;``` to it is the key. — Jeremy Caris, Mar 18 '21 at 02:06

score 9 · Answer 13 · answered Feb 15 '19 at 13:50

9

Target the path within the svg:

<svg>
   <path>....
</svg>

You can do inline, like:

<path fill="#ccc">

Or

svg{
   path{
        fill: #ccc

answered Feb 15 '19 at 13:50

Michael Philips

2,490
5
26
44

cydoc · Answer 14 · 2015-04-29T07:00:37.977

7

You can change SVG coloring with css if you use some tricks. I wrote a small script for that.

go through a list of elements which do have an svg image
load the svg file as xml
fetch only svg part
change color of path
replace src with the modified svg as inline image

$('img.svg-changeable').each(function () {
  var $e = $(this);
  var imgURL = $e.prop('src');

  $.get(imgURL, function (data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');

    // change the color
    $svg.find('path').attr('fill', '#000');

    $e.prop('src', "data:image/svg+xml;base64," + window.btoa($svg.prop('outerHTML')));
  });

});

the code above might not be working correctly, I've implemented this for elements with an svg background image which works nearly similar to this. But anyway you have to modify this script to fit your case. hope it helped.

edited Apr 29 '15 at 07:00

answered Apr 28 '15 at 12:14

cydoc

159
1
5

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. – cydoc Jul 17 '15 at 07:01
3

+1 for providing a solution, rather than saying it can't be done. This answer is also relevant: https://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement – Claytronicon Nov 27 '17 at 18:59

score 7 · Answer 15 · answered Feb 05 '21 at 07:26

here the fast&furious way :)

 body{
 background-color: #deff05;
 }
 
 svg{
   width: 30%;
    height: auto;
 }
 
 svg path {
    color:red;
    fill: currentcolor;
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 514.666 514.666"><path d="M514.666,210.489L257.333,99.353L0,210.489l45.933,19.837v123.939h30V243.282l33.052,14.274v107.678l4.807,4.453  c2.011,1.862,50.328,45.625,143.542,45.625c93.213,0,141.53-43.763,143.541-45.626l4.807-4.452V257.557L514.666,210.489z   M257.333,132.031L439,210.489l-181.667,78.458L75.666,210.489L257.333,132.031z M375.681,351.432  c-13.205,9.572-53.167,33.881-118.348,33.881c-65.23,0-105.203-24.345-118.348-33.875v-80.925l118.348,51.112l118.348-51.111  V351.432z"></path></svg>

why vote down !? this work well you can see it in the demo – Ali Besharati Feb 18 '21 at 10:56 — Ali Besharati, Feb 18 '21 at 10:56

Venteens Productions · Answer 16 · 2021-12-10T02:05:31.970

A simple way to change SVG image color is using a filter property.

Filter Generator here

Original SVG:

Filtered SVG:

.change-my-color {
  filter: invert(21%) sepia(100%) saturate(3618%) hue-rotate(102deg) brightness(96%) contrast(108%);
}
.change-my-color2 {
  filter: invert(90%) sepia(93%) saturate(636%) hue-rotate(338deg) brightness(112%) contrast(102%);
}
.change-my-color3 {
  filter: invert(71%) sepia(98%) saturate(1284%) hue-rotate(164deg) brightness(100%) contrast(103%);
}
.change-my-color4 {
  filter: invert(23%) sepia(99%) saturate(2151%) hue-rotate(258deg) brightness(100%) contrast(112%);
}

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

score 5 · Answer 17 · edited Oct 31 '19 at 14:48

5

For Example, in your HTML:

<body>
  <svg viewBox="" width="" height="">
    <path id="struct1" fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
  </svg>
</body>

Use jQuery:

$("#struct1").css("fill","<desired colour>");

edited Oct 31 '19 at 14:48

Flimm

115,689
38
227
240

answered Aug 27 '19 at 07:18

Grv97

63
1
1

1

This only works if you include the SVG file inline in the HTML. I've edited your answer to make this clear. – Flimm Oct 31 '19 at 14:48

score 5 · Answer 18 · answered Jul 16 '20 at 16:58

Method 1

The easy and effect way

open your .svg file with any text editor

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" 
   xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 477.526 477.526" style="enable-background:new 0 0 477.526 477.526; 
   fill: rgb(109, 248, 248);" xml:space="preserve"> 
<svg />

give an style attribute and fill that with color

Another way

fill with color in your shape here i have rect shape fill="white

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
      <g>
          <title>background</title>
          <rect fill="#fff" id="canvas_background" height="602" width="802" y="-1" 
           x="-1"/>
           <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" 
           id="canvasGrid">
              <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" 
              width="100%"/>
           </g>
       </g>
</svg>

score 4 · Answer 19 · answered Feb 04 '22 at 13:09

2022 Web Component `<load-file>` answer

docs: https://dev.to/dannyengelman/load-file-web-component-add-external-content-to-the-dom-1nd

customElements.define("load-file", class extends HTMLElement {

  // declare default connectedCallback as sync so await can be used
  async connectedCallback(
    // call connectedCallback with parameter to *replace* SVG (of <load-file> persists)
    src = this.getAttribute("src"),
    // attach a shadowRoot if none exists (prevents displaying error when moving Nodes)
    // declare as parameter to save 4 Bytes: 'let '
    shadowRoot = this.shadowRoot || this.attachShadow({mode:"open"})
  ) {
      // load SVG file from src="" async, parse to text, add to shadowRoot.innerHTML
    shadowRoot.innerHTML = await (await fetch(src)).text()

    // append optional <tag [shadowRoot]> Elements from inside <load-svg> after parsed <svg>
    shadowRoot.append(...this.querySelectorAll("[shadowRoot]"))

    // if "replaceWith" attribute 
    // then replace <load-svg> with loaded content <load-svg>
    // childNodes instead of children to include #textNodes also
    this.hasAttribute("replaceWith") && this.replaceWith(...shadowRoot.childNodes)
  }
})

<load-file src="//load-file.github.io/heart.svg">
  <!-- elements inside load-file are MOVED to shadowDOM -->
  <style shadowRoot>
    svg {
      height: 180px; /* stackoverflow subwindow height */
    }
    path:nth-child(2n+2) {
      fill: GREEN; /* shadowDOM style does NOT style global DOM */
    }
  </style>
</load-file>

Wow this is quick, easy and has zero implementation problems (in comparison to other solutions, given my project characteristics). — Leszek, Mar 17 '22 at 19:06

score 4 · Answer 20 · answered Mar 18 '22 at 21:51

4

Found this useful codepen. It asks for a color and generates an appropriate css filter that achieves your color.

For example:

filter: 'invert(48%) sepia(75%) saturate(1969%) hue-rotate(213deg) brightness(97%) contrast(87%)',

answered Mar 18 '22 at 21:51

Kristiyan Tsvetanov

723
6
20

score 3 · Answer 21 · answered Jan 16 '22 at 11:13

If the same SVG must be used multiple times with different colors, define the set of paths within a hidden SVG which serves as the master copy. Then place new instances which refer to the master path with their individual fills.

Note: This approach only works with inline <svg> tags. It will not work with <img> tags loading .svg files.

:root {
  fill: gray;
}

.hidden {
  display: none;
}

svg {
  width: 1em;
  height: 1em;
}

<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="hidden">
 <path id="s_fave" d="m379 21c-57 0-104 53-123 78-19-25-66-78-123-78-74 0-133 68-133 151 0 45 18 88 49 116 0.5 0.8 1 2 2 2l197 197c2 2 5 3 8 3s5-1 8-3l206-206c2-2 3-3 5-5 0.8-0.8 1-2 2-3 23-28 35-64 35-102 0-83-60-151-133-151z"/>
 <path id="s_star" d="m511 196c-3-10-13-18-23-19l-148-13-58-137c-4-10-14-17-25-17-11 0-21 6-25 17l-58 137-148 13c-11 1-20 8-23 19-3 10-0.3 22 8 29l112 98-33 145c-2 11 2 22 11 28 5 3 10 5 16 5 5 0 10-1 14-4l127-76 127 76c9 6 21 5 30-1 9-6 13-17 11-28l-33-145 112-98c8-7 11-19 8-29z"/>
</svg>

<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_fave"></use></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_star"></use></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_fave" fill="red"></use></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_star" fill="gold"></use></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_fave" fill="purple"></use></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_star" fill="silver"></use></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_fave" fill="pink"></use></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_star" fill="blue"></use></svg>

score 2 · Answer 22 · answered Jun 07 '18 at 20:24

If you want to do this to an inline svg that is, for example, a background image in your css:

background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(31,159,215,1)' viewBox='...'/%3E%3C/svg%3E");

of course, replace the ... with your inline image code

JamieGL · Answer 23 · 2021-02-28T06:19:26.500

Use an svg <mask> element.

This is better than other solutions because:

Closely matches your original code.
Works in IE!
The embedded image can still be an external, unmodified file.
The image does not even have to be an SVG.
Color is inherited from font-color, so easy to use alongside text.
Color is a normal CSS color, not a strange combination of filters.

<svg style="color: green; width: 96px; height: 96px" viewBox="0 0 100 100" preserveAspectRatio="none">
  <defs>
    <mask id="fillMask" x="0" y="0" width="100" height="100">
      <image xlink:href="https://svgur.com/i/AFM.svg" x="0" y="0" width="100" height="100" src="ppngfallback.png" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" style="stroke: none; fill: currentColor" mask="url(&quot;#fillMask&quot;)" />
</svg>

https://jsfiddle.net/jamiegl/5jaL0s1t/19/

Works great! Note to add: the svg should be white. – edwin Jul 24 '21 at 08:12 — edwin, Jul 24 '21 at 08:12

score 2 · Answer 24 · answered Dec 25 '21 at 11:15

You can use font icon to use any CSS option on SVG

I was searching for a way to have any CSS options like animation for SVG, and I ended up to generate a font icon with my SVG(s) and then use it inside a span (like FontAwesome), So any CSS option like coloring is available on it.

I used https://icomoon.io to convert my SVG to font icon. Then you can use it like FontAwesome or MaterialIcon inside HTML elements.

Petr Tripolsky · Answer 25 · 2020-05-26T16:53:27.990

Actually, there is a quite more flexible solution to this problem: writing a Web Component which will patch SVG as text in runtime. Also published in gist with a link to JSFiddle

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

<html>

<head>
  <title>SVG with color</title>
</head>

<body>
  <script>
    (function () {
      const createSvg = (color = '#ff9933') => `
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="76px" height="22px" viewBox="-0.5 -0.5 76 22">
            <defs/>
              <g>
                <ellipse cx="5" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
                <ellipse cx="70" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
                <path d="M 9.47 12.24 L 17.24 16.12 Q 25 20 30 13 L 32.5 9.5 Q 35 6 40 9 L 42.5 10.5 Q 45 12 50 6 L 52.5 3 Q 55 0 60.73 3.23 L 66.46 6.46" fill="none" stroke="#ff9933" stroke-miterlimit="10" pointer-events="stroke"/>
              </g>
          </svg>`.split('#ff9933').join(color);

      function SvgWithColor() {
        const div = Reflect.construct(HTMLElement, [], SvgWithColor);
        const color = div.hasAttribute('color') ? div.getAttribute('color') : 'cyan';
        div.innerHTML = createSvg(color);
        return div;
      }

      SvgWithColor.prototype = Object.create(HTMLElement.prototype);
      customElements.define('svg-with-color', SvgWithColor);

      document.body.innerHTML += `<svg-with-color
        color='magenta' 
      ></svg-with-color>`;

    })();

  </script>
</body>

</html>

score 1 · Answer 26 · answered Aug 05 '21 at 09:14

There are some problem with @Manish Menaria answer, if we convert white color it shows gray.

so added some tweaks, below example specifically shows how to change color in material icon

<mat-icon class="draft-white" svgIcon="draft" aria-hidden="false"></mat-icon>


.draft-white{
    filter: brightness(0) invert(1);
}

score 0 · Answer 27 · answered Jun 25 '20 at 11:55

A good approach is to use a mixin to control stroke colour and fill colour. My svgs are used as icons.

@mixin icon($color, $hoverColor) {
    svg {
        fill: $color;

        circle, line, path {
            fill: $color
        }

        &:hover {
            fill: $hoverColor;

            circle, line, path {
                fill: $hoverColor;
            }
        }
    }
}

You can then do the following in your scss:

.container {
    @include icon(white, blue);
}

score 0 · Answer 28 · answered Feb 11 '21 at 14:23

0

If you want to use css to change the colour, you could also use an online tool like this one: https://change-svg-color.vercel.app/

answered Feb 11 '21 at 14:23

Prottay

151
2
7

score 0 · Answer 29 · answered Jun 29 '21 at 22:32

You shall not set the color directly on the svg image, if you want to program the color of the svg.

In 2021, you can use the following css to make the color change.

html{
  --iron-icon-fill-color-1:green;
  --iron-icon-fill-color-2:red;
  --iron-icon-stroke-color:white;
}


svg#icon-green{
  fill: var(--iron-icon-fill-color-1, currentcolor);
  stroke: var(--iron-icon-stroke-color, none);
}
svg#icon-red{
  fill: var(--iron-icon-fill-color-2, currentcolor);
  stroke: var(--iron-icon-stroke-color, none);
}
svg#icon{
  fill: var(--iron-icon-fill-color-x, currentcolor);
  stroke: white;
}

<html>
<body>
<svg id="icon-green" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" style="vertical-align:text-bottom" viewbox="0 0 40 40">
  <circle cx="20" cy="20" r="18" stroke-width="3"/>
  <path d="M 10,10 30,30 M 10,30 30,10" fill="none"  stroke-width="6"/>
</svg>


<svg id="icon-red" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" style="vertical-align:text-bottom" viewbox="0 0 40 40">
  <circle cx="20" cy="20" r="18" stroke-width="3"/>
  <path d="M 10,10 30,30 M 10,30 30,10" fill="none"  stroke-width="6"/>
</svg>

<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" style="vertical-align:text-bottom" viewbox="0 0 40 40">
  <circle cx="20" cy="20" r="18" stroke-width="3"/>
  <path d="M 10,10 30,30 M 10,30 30,10" fill="none"  stroke-width="6"/>
</svg>

</body>

</html>

score -1 · Answer 30 · answered May 05 '20 at 09:11

-1

Open your image using a browser, right-click on the image click on view page source and you will see the svg tag of the image. Cope and paste into your html, then change the fill to the colour of your choice

answered May 05 '20 at 09:11

Chiemelie Akah

9
1

The [accepted answer](https://stackoverflow.com/a/22253046/1038015) already suggests inlining and then setting the colour as the solution. – Robert Longson May 12 '20 at 05:28

score -1 · Answer 31 · answered May 12 '20 at 04:56

-1

Simply add fill:"desiredColor" in the svg tag of the image: example:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#bbb9c6">
<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

answered May 12 '20 at 04:56

Shivani

123
4
11

That's basically the same suggestion as [this answer](https://stackoverflow.com/a/50098855/1038015) or [this one](https://stackoverflow.com/a/27287453/1038015) – Robert Longson May 12 '20 at 05:23
those answers have mentioned fill in the path tag, it worked for me in the svg tag, hence i posted it – Shivani May 13 '20 at 06:53

Wolfrevok Cats · Answer 32 · 2019-10-13T10:19:23.630

-2

shortest Bootstrap-compatible way, no JavaScript:

.cameraicon {
height: 1.6em;/* set your own icon size */
mask: url(/camera.svg); /* path to your image */
-webkit-mask: url(/camera.svg) no-repeat center;
}

and use it like:

<td class="text-center">
    <div class="bg-secondary cameraicon"/><!-- "bg-secondary" sets actual color of your icon -->
</td>

edited Oct 13 '19 at 10:19

answered Oct 13 '19 at 01:49

Wolfrevok Cats

161
1
6

score -4 · Answer 33 · answered Feb 26 '22 at 06:29

-4

The easiest trick is, Change color using jQuery on page load.

      $(document).ready(function () { 
              $('svg').find('path').attr('fill', '#fff');
      });

#fff is color code that you want to set.

answered Feb 26 '22 at 06:29

symi khan

433
5
9

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. – benjaminhull Mar 07 '22 at 12:33

How to change the color of an svg element?

33 Answers33

To change any SVGs color

Solutions 1 - Edit SVG to point to the currentColor

Solution 2 - css mask property

Solution 3 - css Filter property - static color

SVG mask on a box element with a background color will result:

2022 Web Component `<load-file>` answer

Linked

Related

How to change the color of an svg element?

33 Answers33

To change any SVGs color

Solutions 1 - Edit SVG to point to the currentColor

Solution 2 - css mask property

Solution 3 - css Filter property - static color

SVG mask on a box element with a background color will result:

2022 Web Component <load-file> answer

Linked

Related

2022 Web Component `<load-file>` answer