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

Solution 1:

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.

Solution 2:

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

path:hover{
  fill:red;
}

Solution 3:

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.

Solution 4:

you put this css for svg circle.

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

Solution 5:

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.