Can I change the fill color of an svg path with CSS?

Yes, you can apply CSS to SVG, but you need to match the element, just as when styling HTML. If you just want to apply it to all SVG paths, you could use, for example:

​path {
    fill: blue;
}​

External CSS appears to override the path's fill attribute, at least in WebKit and Gecko-based browsers I tested. Of course, if you write, say, <path style="fill: green"> then that will override external CSS as well.

Does this still work with Chrome? I'm having difficulty trying to change my SVG path's color with CSS.

Yes, I just tested it with a current Chrome version and it still works. If you still need help, please post a question including a self-contained example (SVG with external or embedded CSS) and a description of your expected result and what you’re actually seeing (not just “I’m having difficulty”).

Thanks Nicholas, I believe I have found the reason. My SVG was embedded into the page through an tag, CSS doesn't appear to be able to modify any content within. Is this correct?

Keep in mind that in order for CSS to style the SVG, you have to include the SVG code in the markup, it doesn't work if you include the SVG via the <svg> tag.

@RicardoZea One caveat to that: you can include an object from an external SVG file with <use href="external.svg#objId" /> and your local CSS will still apply to some degree.

if you want to change color by hovering in the element, try this:

path:hover{
  fill:red;
}

EDITED Apr-2021

If you go into the source code of an SVG file you can change the color fill by modifying the fill property.

<svg fill="#3F6078" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg> 

Use your favorite text editor, open the SVG file and play around with it.

I figured out another way of changing the color from outside the SVG, and that is by importing the SVG content and removing the style rule where the fill is declared. And then controlling the fill from within my CSS style sheet.

    <svg width="100%" height="100%" viewBox="0 0 167 134" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g id="Pic_icon"><path id="Pic_icon1" serif:id="Pic_icon" d="M166.667,0l-166.667,0l0,133.333l166.667,0l-0,-133.333Zm-158.276,70.89l32.771,-33.148l48.814,49.375l31.519,-19.575l36.781,32.176l-0,-91.3l-149.885,0l-0,62.472Zm84.426,-36.017c11.25,0 20.384,9.164 20.384,20.451c0,11.287 -9.134,20.451 -20.384,20.451c-11.25,0 -20.384,-9.164 -20.384,-20.451c0,-11.287 9.134,-20.451 20.384,-20.451Z" <!-- remove this -> style="fill:#08e1ea;" -->/></g></svg>

Then inside my CSS file I go about:

    svg{ fill: green; }

Now that You're removing the higher hierarchy fill declaration from the SVG the one outside takes control.

This works for me with no problem at all.

you put this css for svg circle.

svg:hover circle{
    fill: #F6831D;
    stroke-dashoffset: 0;
    stroke-dasharray: 700;
    stroke-width: 2;
}

Put in all your svg:

fill="var(--svgcolor)"

In Css:

:root {
  --svgcolor: tomato;
}

To use pseudo-classes:

span.github:hover {
  --svgcolor:aquamarine;
}

Explanation

root = html page. --svgcolor = a variable. span.github = selecting a span element with a class github, a svg icon inside and assigning pseudo-class hover.

I came across an amazing resource on css-tricks: https://css-tricks.com/using-svg/

There are a handful of solutions explained there.

I preferred the one that required minimal edits to the source svg, and also didn't require it to be embedded into the html document. This option utilizes the <object> tag.

Add the svg file into your html using <object>; I also declared html attributes width and height. Using these width and heights the svg document does not get scaled, I worked around that using a css transform: scale(...) statement for the svg tag in my associated svg css file.

<object type="image/svg+xml" data="myfile.svg" width="64" height="64"></object>

Create a css file to attach to your svn document. My source svg path was scaled to 16px, I upscaled it to 64 with a factor of four. It only had one path so I did not need to select it more specifically, however the path had a fill attribute so I had to use !IMPORTANT to force the css to take precedent.

#svg2 {
    width: 64px; height: 64px;
    transform: scale(4);
}
path {
    fill: #333 !IMPORTANT;
}

Edit your target svg file, before the opening <svg tag, to include a stylesheet; Note that the href is relative to the svg file url.

<?xml-stylesheet type="text/css" href="myfile.css" ?>

It's possible to change the path fill color of the svg. See below for the CSS snippet:

To apply the color for all the path: svg > path{ fill: red } To apply for the first d path: svg > path:nth-of-type(1){ fill: green } To apply for the second d path: svg > path:nth-of-type(2){ fill: green} To apply for the different d path, change only the path number: svg > path:nth-of-type(${path_number}){ fill: green} To support the CSS in Angular 2 to 8, use the encapsulation concept:

:host::ng-deep svg path:nth-of-type(1){
        fill:red;
    }

You can use this syntax but it will require some changes in the SVG file. And remove any fill/stroke from the SVG itself.

icon.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!-- use symbol instead of defs and g, 
  must add viewBox on symbol just copy yhe viewbox from the svg tag itself
  must add id on symbol
-->
<symbol id="location" viewBox="0 0 430.114 430.114">
  <!-- add all the icon's paths and shapes here -->
  <path d="M356.208,107.051c-1.531-5.738-4.64-11.852-6.94-17.205C321.746,23.704,261.611,0,213.055,0   C148.054,0,76.463,43.586,66.905,133.427v18.355c0,0.766,0.264,7.647,0.639,11.089c5.358,42.816,39.143,88.32,64.375,131.136   c27.146,45.873,55.314,90.999,83.221,136.106c17.208-29.436,34.354-59.259,51.17-87.933c4.583-8.415,9.903-16.825,14.491-24.857   c3.058-5.348,8.9-10.696,11.569-15.672c27.145-49.699,70.838-99.782,70.838-149.104v-20.262   C363.209,126.938,356.581,108.204,356.208,107.051z M214.245,199.193c-19.107,0-40.021-9.554-50.344-35.939   c-1.538-4.2-1.414-12.617-1.414-13.388v-11.852c0-33.636,28.56-48.932,53.406-48.932c30.588,0,54.245,24.472,54.245,55.06   C270.138,174.729,244.833,199.193,214.245,199.193z"/>
</symbol>

icon.html

<svg><use xlink:href="file_path/location.svg#location"></use></svg>

If you use a path, you can set the stroke color: I used for hover effect here:

svg:hover path {
  stroke: blue;
}

You should be able to modify dimensions, color or other properties with:

:host::ng-deep svg {
 ...
}

this is a simple solution that works for me:

put the svg in a div tag with "id"

then

#id-div svg g {
     fill: #3366FF; 
}

To change any SVGs color Add the SVG image using an 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%);
}