How to change svg color

Question

I want to change svg color

HTML

img {
    width:50%;
    height: 50%;
}

<link rel="stylesheet" href="css/style.css">

<img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Dollar_sign_in_circle_cleaned_%28PD_version%29.green.svg">

How I can do it in css file?

I tryed:
https://www.youtube.com/watch?v=emFMHH2Bfvo&ab_channel=Fireship
https://www.youtube.com/watch?v=qA_-O35O_X4&ab_channel=Skillthrive

Color changes only if I change .svg file

Linked svgs can't have their color changed, you'd need to include the actual svg code inside the html to change the color — dantheman, Feb 26 '23 at 14:01
But it will be so big like 1 svg=400 lines of code (its possible to somehow fix it) — nevazno_html_css_js_1, Feb 26 '23 at 14:02
Refer to the question: https://stackoverflow.com/questions/22252472/how-can-i-change-the-color-of-an-svg-element — JuliusCaesar114, Feb 26 '23 at 14:05

Rizeen · Accepted Answer · 2023-02-26T14:35:36.117

1

Try this:

img {
    width:50%;
    height: 50%;
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);

}

<link rel="stylesheet" href="css/style.css">

<img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Dollar_sign_in_circle_cleaned_%28PD_version%29.green.svg">

For another color use this

edited Feb 26 '23 at 14:35

answered Feb 26 '23 at 14:19

Rizeen

1,296
1
6
17

yes - thanks a lot - it works - I actually tryed the same but it did't work out – nevazno_html_css_js_1 Feb 26 '23 at 14:26

score 0 · Answer 2 · answered Feb 26 '23 at 16:36

This method will allow you to control color of the element.

<!-- css -->
.colorize {
 stroke: #000000;
 stroke-width: 0;
 fill: #189948;}

.colorize-inside {
 stroke: #000000;
 stroke-width: 0;
 fill: #ffffff;}

.colorize:hover {
 stroke: #000000;
 stroke-width: 1px;
 fill: #FF0000;}

<!-- svg -->
<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="216px" height="216px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve">

<circle cx="108.049" cy="108.049" r="102.049" class="colorize"/>

<circle class="colorize-inside" cx="107.039" cy="107.04" r="83.862"/>

<g>

<path class="colorize" d="M99.413,169.801v-14.319c-10.099-0.452-19.896-3.316-25.624-6.481l4.521-17.635      c6.331,3.467,15.224,6.632,25.021,6.632c8.742,0,14.62-3.467,14.62-9.345c0-5.729-4.823-9.346-16.127-13.113        c-16.128-5.426-27.131-12.963-27.131-27.583c0-13.415,9.345-23.815,25.473-26.83V46.808h14.771v13.264
    c9.948,0.302,16.73,2.562,22.006,4.974l-4.521,17.032c-3.768-1.809-10.852-5.275-21.705-5.275c-9.796,0-12.962,4.371-12.962,8.591   c0,4.823,5.275,8.139,18.237,12.812c17.938,6.331,25.021,14.621,25.021,28.337c0,13.415-9.346,24.87-26.679,27.733v15.525H99.413z"/>
</g>

</svg>

https://jsfiddle.net/jasonbruce/ymebruc5/2/

How to change svg color

2 Answers2