2

I am creating an html page and I have all icons in svg format. Can I change the color of the svg image with css? Is it possible?

<style type="text/css">
    img.svg { fill: #b9c9d4; }
</style>
<head>
    <title></title>
</head>
<body>

<img class="svg" src="logo.svg" alt="" >

</body>
</html>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Shubham Shrivastava
  • 89
  • 1
  • 1
  • 6
  • 1
    if you are using the svg in a image tag, it is not possible to change anything within the SVG... More info: [Stackoverflow](https://stackoverflow.com/questions/40343354/changing-the-color-of-an-svg-image-using-css). – Jeroen Groenveld Feb 15 '18 at 04:06

1 Answers1

1

Not possible. You will need to change your HTML. One way I usually do it is by embedding the SVG file in the page and wrap it inside a container element like below...

<div class="logo">
   <svg>
   ...
   </svg>
</div>

With this in class you can easily target the svg using css child-based selectors as below...

.logo{
    width: 48px;
    height: 48px;
}

.logo svg{
    width: 48px;
    height: 48px;
    fill: #000000;
}
Leo
  • 14,625
  • 2
  • 37
  • 55