How to Change SVG Colors with CSS
There are 3 ways to change SVG colors. The easiest way is using an image editing app such as Adobe Illustrator. Another way is to edit SVG codes directly. The last one is a method using CSS. In this post, I will explain how to change SVG colors with CSS and In the end, I will also teach you how to change colors directly from SVG files.
Table of Contents
How to Change a Color of an SVG Image with CSS
To change SVG colors, you need to use the fill property. This time I will change the color of the following black apple.
When displaying SVG as inline
First, make a div element and add an ID name or a class name. Then write a SVG code in the element. The class name used this time is "red-apple".
<div class="red-apple">
<svg xmlns="http://www.w3.org/2000/svg" width="187.51" height="200" viewBox="0 0 187.51 200"><defs><style>.f6e390ba-1090-4ded-aea9-435d2daa37ba{fill:#343333;}</style></defs><g id="f5c14de5-6493-449c-aba8-0d85b362f6e7" data-name="Layer 2"><g id="fe593e16-0eb4-46ca-b784-4d4880ee97df" data-name="Layer 1"><path class="f6e390ba-1090-4ded-aea9-435d2daa37ba" d="M184.44,75.3c-12.79-34.87-56.1-47.61-77-39.54C109.72,24.32,114.4,14,124.79,3.65c-2-1-4.86-2.44-7.16-3.65-5.17,3.11-12.18,12.92-14.25,21a83.34,83.34,0,0,0-2.31,13.69c-14-12.5-52-19.33-78.2,1.74-27.84,22.34-28,73-12.55,118C19.1,180,48.4,192.25,74.24,189.71c19.68,8.69,44.84,19.65,71-3.83C175.3,158.91,195.5,105.44,184.44,75.3Z"/></g></g></svg>
</div>Next, write the parent element name "read-apple" and "path" in a CSS file. Finally, use fill property and add the color code you want.
.red-apple path {
fill: #ed6866;
}When displaying SVG with img tags
Unfortunately, there is no way completely to change SVG colors that use img tags with only CSS. However, you can do that by using a JavaScript file named deSVG together. deSVG can rewrite SVG files read by img tags to inline codes.
In the case of importing deSVG from CDN, add the code below in the head tag or in the end of the body tag of the HTML file.
<script src="//cdn.jsdelivr.net/npm/desvg@1.0.2/desvg.min.js"></script>You can also download and use "desvg.js" from the GitHub link below.
GitHub - benhowdle89/deSVG: Remove inline SVG bloat from your HTML document
To use desvg.js, add a class name to the img tag. This time it is "yellow-apple".
Then run deSVG using the following js code. Write the class name "yellow-apple" added to the img tag. This can be written directly in the head tag or in the end of the body tag of the HTML file. Also, reading as an external js file is ok. In that case, "<script>" and "</script>" are not necessary.
<script>
window.addEventListener('load', function(){
deSVG('.yellow-apple', true);
});
</script>Finally, use the img class name and change the color with CSS.
.yellow-apple path {
fill: #faeb64;
}
How to Change an SVG Color Directly from an SVG file
To change a color directly from an SVG file, You need to search the color code you want to change in the SVG file with a text editor or a code editor. This time I will use Visual Studio Code, a free and high performance code editor provided by Microsoft.
You can download VSC from the page below.
First, open the SVG file.
Then, press command + F for Mac, control + F for Windows. Type "fill:" in the search window that opened.
Now you can see the color code you want to cgange.
Rewrite it to the color you want. Finally, press command + S for Mac, control + S for Windows to save it and it is done.
How to Change a hover color of SVG
To change SVG colors on hover, add ":hover" after the "path" after the SVG class or ID name, similar to changing text colors on hover.
<div class="hover-apple">
<svg xmlns="http://www.w3.org/2000/svg" width="187.51" height="200" viewBox="0 0 187.51 200"><defs><style>.f6e390ba-1090-4ded-aea9-435d2daa37ba{fill:#343333;}</style></defs><g id="f5c14de5-6493-449c-aba8-0d85b362f6e7" data-name="Layer 2"><g id="fe593e16-0eb4-46ca-b784-4d4880ee97df" data-name="Layer 1"><path class="f6e390ba-1090-4ded-aea9-435d2daa37ba" d="M184.44,75.3c-12.79-34.87-56.1-47.61-77-39.54C109.72,24.32,114.4,14,124.79,3.65c-2-1-4.86-2.44-7.16-3.65-5.17,3.11-12.18,12.92-14.25,21a83.34,83.34,0,0,0-2.31,13.69c-14-12.5-52-19.33-78.2,1.74-27.84,22.34-28,73-12.55,118C19.1,180,48.4,192.25,74.24,189.71c19.68,8.69,44.84,19.65,71-3.83C175.3,158.91,195.5,105.44,184.44,75.3Z"/></g></g></svg>
</div>.hover-apple path {
fill: #cccccc;
}
.hover-apple path:hover {
fill: #ed6866;
}To Conclude
Changing SVG colors with CSS is not too difficult and useful. I think this method is useful when using free SVG icons or hover functions.
This post introduced changing only one color of an SVG file but also you can change multiple colors of an SVG file by adding a class name for each path in the SVG file. However, that is a little complicated and not practical so in that case, I recommend using an image editing app such as Adobe Illustrator.