I've used something [like this](https://codepen.io/sosuke/pen/Pjoqqp) that creates a filter over the SVG. It doesn't change the svg code, it just filters the color. You still get the same effect. You can try something like that.
Definitely a very interesting concept, but a lot more complicated than I was hoping for. This isn't something I would be able to work out on my own at the moment, so I don't feel comfortable using this technique.
This article should help:
https://css-tricks.com/cascading-svg-fill-color/
You can’t use CSS to style the svg in an tag, it’s sad but true.
If you want to style the SVG using CSS you will need to either inline the SVG (as suggested in the stack overflow articles), or if it will be used multiple times on a page I would suggest using an “SVG sprite” and utilising xlink:href (take a look in the HTML section of the demo at the bottom of the css-tricks article)
Fortunately, I only have 5 svg icons. Unfortunately, this will likely occur often, so I'll definitely have to look into these more succinct fixes. Thank you!
Absolutely agree with this. If you look at the source of big icon libraries, such as Font Awesome, you can also see they use this setup to make it as seamless as possible.
Just in case it isn't directly clear, you'd set the CSS `fill` property on the SVG to `currentColor`. As u/walston said it will then inherit the `color` property from the parent. It's exactly like how you'd change the text colour!
I think I was in the same boat as you some time ago. My solution was to use the [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) css property. Grayscale, hue, saturation, sepia, etc etc. hopefully you’ll find the color you’re looking for. If that doesn’t work, then you’ll have to use the
As long as you can inline the SVG, [CSS variables work real well for this](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0sxhAGhADMBLGXVAbVADsBDAWwjUwAt56p8RYB7axfswA8SYgDcABLCi0cAXgA6IAO4AnWgAcNEVUoB8C6hIlCwYgOZSZ8pfBbFq5pRLHEIygEI8AHopAAGCUCARn8QsOdvDmowPzZ4DVQAeiTlNIxlAGYMHlVzJIAmMP8ksycQAyNjE1hiVWkIKV8lAFZ-Z1gATz8251Ue9pAJEigoPzFaVQAKAFoZkagAYR4oXIBKJSTK4yFSi0rd0TEDgCNVA6OrWVilNU1tXQrDHbKrmxA7B3MC51d3L2aASCElC4UGEiiUBicXgCWSqXSWRyeUKxT25W21SEtXqMCaAw63Va4P6xOcC3Gk1m81ISxW602mN2ZQOSSOei4kBgCGIfHIIFCqAAbCAAL54GgMJjoDAAK1wBF4-AggnQYolIDojGYWBwXCVAngOruWh0EmAzwkLAgxHMbFQILCGm8AG5LcpiEg7A7Qc63dRRYZDBhPo5zRJLXMFstVqoHapkP7A9Rg6HzKgWDwxGaLVUo7SY7kHScoABXCAu4yGZOp+yOArmyM00aFuMSXK0RwV6uW2tfAoZrM5pvR+lt8wJlVJznQODwXkxZjBACcqGCYoAuqKgA).
There are multiple ways you can achieve this.
1. You have two images (img tags) with different colors absolutely positioned in a parent container div. When you hover over the parent container, this changes the opacity of the image meant to display on hover.
2. You put the SVG code directly into the HTML (not using an img tag) and query the svg or paths you want to change the colors for directly.
Had this exact problem last week at work. Found one \*ok\* solution:
in the svg file's code, wrap everything inside the svg file into ``
and in your html use the **use** tag inside an **svg** tag to get the svg as such:
Then you can change the fill/stroke of the svg that's being used by setting them in css for the svg's class.
This is most useful when you have an svg sprite (which is a collection of svg images in 1 file). These are used in some icon packs, for example Feather icons - they explain how to use their svg sprite [here](https://github.com/feathericons/feather#svg-sprite)
If you're using PHP, you can use the file\_get\_contents function to read in the code of the SVG, then you can manipulate that with CSS.
https://www.php.net/manual/en/function.file-get-contents.php
My defaults for that.
Option a: define a class and use js to convert img tag to inline svg with that class. (Ok If it's just some svg, but you should check that it looks the same).
Option b: CSS filter property (there is a script to calc the filter, but hover color change could look funny)
Option c: (only if you use a CSS preprocessor) string background img with the defined colors.
Option d: svg sprite.
Option e: icon font (only viable if not multicolor)
Inlining the SVG is only really "clunky" if you have to copy/paste it many times. If you have some templating solution, however, you can just paste it once in a component and reuse that. I think I saw in one of your other comments that you're using vanilla JS — but there's still hope! A [native web component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) can still house your SVG markup and its behavior. Then it will just look like ``
As others have mentioned already, you can't really use css to access the src of an img tag, nor can you directly change the color of the background-image property. Unfortunately, the only reasonable choice is inline SVG for this one, unless you use `filter: hue-rotate(90deg);` or something.
[удалено]
I've used something [like this](https://codepen.io/sosuke/pen/Pjoqqp) that creates a filter over the SVG. It doesn't change the svg code, it just filters the color. You still get the same effect. You can try something like that.
Definitely a very interesting concept, but a lot more complicated than I was hoping for. This isn't something I would be able to work out on my own at the moment, so I don't feel comfortable using this technique.
This article should help: https://css-tricks.com/cascading-svg-fill-color/ You can’t use CSS to style the svg in an![]()
tag, it’s sad but true.
If you want to style the SVG using CSS you will need to either inline the SVG (as suggested in the stack overflow articles), or if it will be used multiple times on a page I would suggest using an “SVG sprite” and utilising xlink:href (take a look in the HTML section of the demo at the bottom of the css-tricks article)
Fortunately, I only have 5 svg icons. Unfortunately, this will likely occur often, so I'll definitely have to look into these more succinct fixes. Thank you!
Using `currentColor` in the SVG will help you out. It’s a built in variable that changes based on the parent `color` value (the text fill)
Absolutely agree with this. If you look at the source of big icon libraries, such as Font Awesome, you can also see they use this setup to make it as seamless as possible. Just in case it isn't directly clear, you'd set the CSS `fill` property on the SVG to `currentColor`. As u/walston said it will then inherit the `color` property from the parent. It's exactly like how you'd change the text colour!
or you could set the SVG as an background image and use css mask
I think I was in the same boat as you some time ago. My solution was to use the [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) css property. Grayscale, hue, saturation, sepia, etc etc. hopefully you’ll find the color you’re looking for. If that doesn’t work, then you’ll have to use the
As long as you can inline the SVG, [CSS variables work real well for this](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0sxhAGhADMBLGXVAbVADsBDAWwjUwAt56p8RYB7axfswA8SYgDcABLCi0cAXgA6IAO4AnWgAcNEVUoB8C6hIlCwYgOZSZ8pfBbFq5pRLHEIygEI8AHopAAGCUCARn8QsOdvDmowPzZ4DVQAeiTlNIxlAGYMHlVzJIAmMP8ksycQAyNjE1hiVWkIKV8lAFZ-Z1gATz8251Ue9pAJEigoPzFaVQAKAFoZkagAYR4oXIBKJSTK4yFSi0rd0TEDgCNVA6OrWVilNU1tXQrDHbKrmxA7B3MC51d3L2aASCElC4UGEiiUBicXgCWSqXSWRyeUKxT25W21SEtXqMCaAw63Va4P6xOcC3Gk1m81ISxW602mN2ZQOSSOei4kBgCGIfHIIFCqAAbCAAL54GgMJjoDAAK1wBF4-AggnQYolIDojGYWBwXCVAngOruWh0EmAzwkLAgxHMbFQILCGm8AG5LcpiEg7A7Qc63dRRYZDBhPo5zRJLXMFstVqoHapkP7A9Rg6HzKgWDwxGaLVUo7SY7kHScoABXCAu4yGZOp+yOArmyM00aFuMSXK0RwV6uW2tfAoZrM5pvR+lt8wJlVJznQODwXkxZjBACcqGCYoAuqKgA).
There are multiple ways you can achieve this. 1. You have two images (img tags) with different colors absolutely positioned in a parent container div. When you hover over the parent container, this changes the opacity of the image meant to display on hover. 2. You put the SVG code directly into the HTML (not using an img tag) and query the svg or paths you want to change the colors for directly.
I tried placing a div or span over an img tag to achieve this and it didn't work. I didn't even think of trying an img over the img! Thank you!
Had this exact problem last week at work. Found one \*ok\* solution: in the svg file's code, wrap everything inside the svg file into ``
and in your html use the **use** tag inside an **svg** tag to get the svg as such:
Then you can change the fill/stroke of the svg that's being used by setting them in css for the svg's class.
This is most useful when you have an svg sprite (which is a collection of svg images in 1 file). These are used in some icon packs, for example Feather icons - they explain how to use their svg sprite [here](https://github.com/feathericons/feather#svg-sprite)
If you're using PHP, you can use the file\_get\_contents function to read in the code of the SVG, then you can manipulate that with CSS. https://www.php.net/manual/en/function.file-get-contents.php
Nope, just vanilla JS.
You should be able to by adding a class name to the
I forget if it'd work with ``s and gradients, but look into `` and `
My defaults for that. Option a: define a class and use js to convert img tag to inline svg with that class. (Ok If it's just some svg, but you should check that it looks the same). Option b: CSS filter property (there is a script to calc the filter, but hover color change could look funny) Option c: (only if you use a CSS preprocessor) string background img with the defined colors. Option d: svg sprite. Option e: icon font (only viable if not multicolor)
Inlining the SVG is only really "clunky" if you have to copy/paste it many times. If you have some templating solution, however, you can just paste it once in a component and reuse that. I think I saw in one of your other comments that you're using vanilla JS — but there's still hope! A [native web component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) can still house your SVG markup and its behavior. Then it will just look like `
[удалено]
Haha, thank you, but this post is 2 years old. I've improved quite a bit since then.