Question 44835 in Html Question posted in
Some basic documentation can be found here.

How to change svg color – Html

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

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search