How To Change Color Of SVG (Various Ways Using CSS)

In one of the previous articles, I have mentioned Best 5+ Free HTML Rich Text Editor to use but now in this article, I have provided few possible ways to change the color of SVG images using CSS or Javascript.

If you are using SVG image icons or  SVG image logo and want to change the color of the image, then you can have an issue while changing its color, because if you will use CSS property like background-color or color for SVG files it will not work, so I have provided solutions to resolve this issue.

Change SVG color using CSS

Every SVG has XML file like structure so, it could be as below

<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24"> <path d="M19,1H5A5.006,5.006,0,0,0,0,6V18a5.006,5.006,0,0,0,5,5H19a5.006,5.006,0,0,0,5-5V6A5.006,5.006,0,0,0,19,1ZM5,3H19a3,3,0,0,1,2.78,1.887l-7.658,7.659a3.007,3.007,0,0,1-4.244,0L2.22,4.887A3,3,0,0,1,5,3ZM19,21H5a3,3,0,0,1-3-3V7.5L8.464,13.96a5.007,5.007,0,0,0,7.072,0L22,7.5V18A3,3,0,0,1,19,21Z"/> </svg>

So, if you want to change SVG color, then you can directly target "path" element or "polygon" element of SVG structure and use CSS property "fill"

So, you can have CSS has belowsvg path{ fill:red }

Output

Here is the complete Fiddle sample

But the above solution will only work when you have SVG with path information. 

You can also open SVG in any Text Editor and then get to it's XML as shown above and then in <path> tag use property "fill" to add change color, as shown below<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24"> <path fill="#AB7C94" d="M19,1H5A5.006,5.006,0,0,0,0,6V18a5.006,5.006,0,0,0,5,5H19a5.006,5.006,0,0,0,5-5V6A5.006,5.006,0,0,0,19,1ZM5,3H19a3,3,0,0,1,2.78,1.887l-7.658,7.659a3.007,3.007,0,0,1-4.244,0L2.22,4.887A3,3,0,0,1,5,3ZM19,21H5a3,3,0,0,1-3-3V7.5L8.464,13.96a5.007,5.007,0,0,0,7.072,0L22,7.5V18A3,3,0,0,1,19,21Z"/> </svg>

Another way (Using SVG as background image)

You can also use SVG as a background image for an icon and then use CSS 'mask' property to fill it as Background.

Once you have set it as the background image, you can simply use 'background-color' CSS property to change image's color

Example CSS.icon { width: 48px; height: 48px; display: inline-block; -webkit-mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%; mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; } .icon-red { background-color: red; } .icon-orange { background-color: orange; } .icon-yellow { background-color: yellow; }

With Sample HTML

<i class="icon icon-red"></i> <i class="icon icon-orange"></i> <i class="icon icon-yellow"></i>

Gives output as below

Fiddle

Using Filter and SVG inside IMG tag

If you are using SVG with IMG tag, you can use CSS property 'filter' with saturation, which will change the color of the SVG image

Sample HTML<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg" class="colorize-orange ">

CSS.colorize-orange { -webkit-filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); }

Here is the fiddle

Using CSS Mask

We can also use CSS mask property to change SVG color<i class="icon"></i>

CSSbody{ overflow:hidden; } .icon { --size: 70px; display: inline-block; width: var(--size); height: var(--size); transition: .12s; -webkit-mask-size: cover; mask-size: cover; } .icon-heart{ background: black; animation: 4s frames infinite linear; -webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg); mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg); } @keyframes frames { 0% { transform:translatex(100vw) } 25% { background: red; } 75% { background: lime; } 100% { transform:translatex(-100%) } }

Fiddle: https://jsfiddle.net/5hd0xfLj/

This approach can be useful if SVG is external, and included via URL.

That's it, these are some 4 useful ways to change color of SVG using CSS.

You may also like to read:

Vertical Carousel (Bootstrap 4 and Bootstrap 3 With jQuery)

Useful CSS animation examples with code & animation basics

Top HTML and CSS interview questions

Creating Underline text in HTML (With or Without CSS)

Best HTML Editors for developers (Free)

Creating nested tables in HTML ( Example with code)