Open In App

How To Change Color Of SVG On Hover?

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

SVG stands for Scalable Vector Graphics which is an XML form approach to create graphical elements using the code format of XML, that is, Extensive Markup Language. We can use CSS elements to add colors to svg, or change its properties and even add pseudo-class effects to it. In this article, we will learn how to change the color of an SVG on Hover.

How to Change the Color Of SVG On Hover

SVG's color on hovering does not change by simply writing the color or background color in the hover state. This requires the use of a fill CSS term that displays the color it wants to change for the SVG Icon. Normal terms cannot change SVG icon as it is not a box or a div tag. It is other element that uses the property of fill which constitutes either color in it, or the URL that contains the color.

Below are the topics that are covered in this article:

Table of Content

Inline SVG Elements

Inline SVG means writing the SVG in the form of codes. There are multiple websites that provide the code for svg element that you can use in your code.

Example: The link of SVG is provided in the HTML code, and at the same time, CSS for hovering is provided with the property of fill. This allows us to create a hover element for the same.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Inline SVG Hover</title>
    <style>
        .container {
            font-family: Poppins;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 60px;
            height: 100vh;
        }

        .head {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .inline-svg {
            fill: #000000;
            height: 200px;
            width: 200px;
        }

        .inline-svg:hover {
            fill: green;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="head">
            <h1>Inline SVG Elements</h1>
            <svg class="inline-svg" version="1.1" id="Capa_1" xmlns="https://www.w3.org/2000/svg"
                xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 419 419" xml:space="preserve">
                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                <g id="SVGRepo_iconCarrier">
                    <path d="M381.675,20.803c-20.584,0-37.33,16.747-37.33,37.331c0,
                        4.819,0.951,9.628,2.772,14.085l-61.297,
                        61.297 c-15.555-11.566-34.813-18.42-55.642-18.42c-16.635,
                        0-32.861,4.426-47.175,12.833l-38.512-44.224 c2.607-5.18,
                        3.973-10.901,3.973-16.731c0-20.58-16.745-37.323-37.327-37.323c-20.582,
                        0-37.327,16.743-37.327,37.323 c0,20.584,16.745,37.331,37.327,37.331c3.89,
                        0,7.699-0.594,11.365-1.77l38.083,43.729c-15.413,17.185-23.852,
                        39.139-23.852,62.276 c0,9.273,1.376,18.442,4.094,27.305l-83.869,
                        59.693c-5.893-3.667-12.614-5.59-19.63-5.59C16.745,289.949,0,
                        306.692,0,327.273 c0,20.584,16.745,37.33,37.328,37.33c20.582,
                        0,37.327-16.746,
                        37.327-37.33c0-2.755-0.303-5.486-0.904-8.159l79.983-56.924 c10.309,
                        14.638,24.691,26.114,41.197,32.872l-8.918,25.146c-18.973,
                        1.734-33.912,17.78-33.912,37.17 c0,20.582,16.745,37.326,37.327,
                        37.326c20.582,0,37.328-16.744,
                        37.328-37.326c0-10.949-4.855-21.33-13.139-28.4l9.668-27.26 c2.343,
                        0.178,4.65,0.268,6.893,0.268c11.969,0,23.61-2.249,34.657-6.691l40.105,
                        48.345c-2.775,5.309-4.229,11.201-4.229,17.227 c0,20.584,16.743,37.331,
                        37.322,37.331c20.585,0,37.332-16.747,
                        37.332-37.331c0-20.58-16.747-37.323-37.332-37.323 c-3.691,
                        0-7.318,0.539-10.822,1.606l-37.223-44.87c21.434-17.844,33.632-43.73,
                        33.632-71.738c0-20.273-6.492-39.057-17.502-54.387 l61.468-61.468c4.458,
                        1.819,9.269,2.771,14.089,2.771c20.581,0,37.325-16.743,37.325-37.323 C419,
                        37.55,402.256,20.803,381.675,20.803z M230.178,158.153c27.784,0,50.388,
                        22.604,50.388,50.388 c0,27.784-22.603,50.388-50.388,50.388c-27.785,
                        0-50.39-22.604-50.39-50.388C179.788,180.757,202.393,158.153,230.178,158.153z">
                    </path>
                </g>
            </svg>
        </div>
    </div>
</body>

</html>


Output:

svg3
Inline SVG Elements

Using SVG as a Background

We can also use SVG as a background in CSS file. CSS gives us a property of background fill in which we can specify the link of svg in the URL field. The difference between using SVG as a background and that in the form of URL is that in background, the SVG element's path is specified and there is not URL for showing the SVG element, we use the path defined for it.

Example: This HTML code creates a webpage that displays a centered, hoverable div with an SVG background image that changes color when hovered.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SVG Background Hover</title>
    <style>
        .container {
            font-family: Poppins;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 60px;
            height: 100vh;
        }

        .head {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .background-svg {
            width: 200px;
            height: 200px;
            background-image: url('images/img.svg');
            background-size: cover;
            background-repeat: no-repeat;
        }

        .background-svg:hover {
            background-image: url( ` data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" 
            viewBox="0 0 419 419"><path d=" M381.675,20.803c-20.584,0-37.33,16.747-37.33,
            37.331c0,4.819,0.951,9.628,2.772,14.085l-61.297,
            61.297 c-15.555-11.566-34.813-18.42-55.642-18.42c-16.635,
            0-32.861,4.426-47.175,12.833l-38.512-44.224 c2.607-5.18,
            3.973-10.901,3.973-16.731c0-20.58-16.745-37.323-37.327-37.323c-20.582
            ,0-37.327,16.743-37.327,37.323 c0,20.584,16.745,37.331,37.327,
            37.331c3.89,0,7.699-0.594,11.365-1.77l38.083,43.729c-15.413,
            17.185-23.852,39.139-23.852,62.276 c0,9.273,1.376,18.442,
            4.094,27.305l-83.869,59.693c-5.893-3.667-12.614-5.59-19.63-5.59C16.745,
            289.949,0,306.692,0,327.273 c0,20.584,16.745,37.33,37.328,37.33c20.582,
            0,37.327-16.746,37.327-37.33c0-2.755-0.303-5.486-0.904-8.159l79.983-56.924 c10.309
            ,14.638,24.691,26.114,41.197,32.872l-8.918,25.146c-18.973,1.734-33.912,
            17.78-33.912,37.17 c0,20.582,16.745,37.326,37.327,37.326c20.582,0,
            37.328-16.744,37.328-37.326c0-10.949-4.855-21.33-13.139-28.4l9.668-27.26 c2.343,
            0.178,4.65,0.268,6.893,0.268c11.969,0,23.61-2.249,34.657-6.691l40.105,
            48.345c-2.775,5.309-4.229,11.201-4.229,17.227 c0,20.584,16.743,37.331,
            37.322,37.331c20.585,0,37.332-16.747,
            37.332-37.331c0-20.58-16.747-37.323-37.332-37.323 c-3.691,
            0-7.318,0.539-10.822,1.606l-37.223-44.87c21.434-17.844,
            33.632-43.73,33.632-71.738c0-20.273-6.492-39.057-17.502-54.387 l61.468-61.468c4.458,
            1.819,9.269,2.771,14.089,2.771c20.581,0,37.325-16.743,37.325-37.323 C419,37.55,
            402.256,20.803,381.675,20.803z M230.178,158.153c27.784,0,50.388,22.604,50.388,
            50.388 c0,27.784-22.603,50.388-50.388,50.388c-27.785,
            0-50.39-22.604-50.39-50.388C179.788,180.757,202.393,158.153,
            230.178,158.153z" fill="%23ff0000"/></svg> `);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="head">
            <h1>SVG Background Image</h1>
            <div class="background-svg"></div>
        </div>
    </div>
</body>

</html>


Output:

svg1
SVG Background Image

Use a mask tag

We will use the ID of the svg icon specified in the mask tag and then apply mask property to the element. Mask property of CSS allows to completely remove or partially increase the visibility of the mask element.

Example: This HTML code creates a masked SVG element that changes its background color from black to green on hover.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mask SVG Hover</title>
    <style>
        .container {
            font-family: Poppins;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 60px;
            height: 100vh;
        }

        .head {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .mask {
            width: 200px;
            height: 200px;
            mask: url(#mask);
            mask-size: contain;
            background: #000000;
            transition: background 0.3s;
        }

        .mask:hover {
            background: green;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="head">
            <h1>Masked SVG Element Hover</h1>
            <svg class="mask" version="1.1" id="Capa_1" xmlns="https://www.w3.org/2000/svg"
                xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 419 419" xml:space="preserve">
                <defs>
                    <mask id="mask">
                        <rect width="100%" height="100%" fill="white" />
                        <path
                            d="M381.675,20.803c-20.584,0-37.33,16.747-37.33,
                            37.331c0,4.819,0.951,9.628,2.772,14.085l-61.297,
                            61.297 c-15.555-11.566-34.813-18.42-55.642-18.42c-16.635,
                            0-32.861,4.426-47.175,12.833l-38.512-44.224 c2.607-5.18,
                            3.973-10.901,3.973-16.731c0-20.58-16.745-37.323-37.327-37.323c-20.582,
                            0-37.327,16.743-37.327,37.323 c0,20.584,16.745,37.331,
                            37.327,37.331c3.89,0,7.699-0.594,
                            11.365-1.77l38.083,43.729c-15.413,
                            17.185-23.852,39.139-23.852,62.276 c0,
                            9.273,1.376,18.442,4.094,27.305l-83.869,
                            59.693c-5.893-3.667-12.614-5.59-19.63-5.59C16.745,
                            289.949,0,306.692,0,327.273 c0,20.584,16.745,37.33,
                            37.328,37.33c20.582,0,37.327-16.746,
                            37.327-37.33c0-2.755-0.303-5.486-0.904-8.159l79.983-56.924 c10.309,
                            14.638,24.691,26.114,41.197,32.872l-8.918,25.146c-18.973,1.734-33.912,
                            17.78-33.912,37.17 c0,20.582,16.745,37.326,37.327,37.326c20.582,0,
                            37.328-16.744,37.328-37.326c0-10.949-4.855-21.33-13.139-28.4l9.668-27.26 c2.343
                            ,0.178,4.65,0.268,6.893,0.268c11.969,0,23.61-2.249,34.657-6.691l40.105,
                            48.345c-2.775,5.309-4.229,11.201-4.229,17.227 c0,20.584,16.743,37.331,
                            37.322,37.331c20.585,0,37.332-16.747,37.332-37.331c0-20.58-16.747-37.323-37.332-37.323
                               c-3.691,
                            0-7.318,0.539-10.822,1.606l-37.223-44.87c21.434-17.844,33.632-43.73,
                            33.632-71.738c0-20.273-6.492-39.057-17.502-54.387 l61.468-61.468c4.458,1.819,9.269,
                            2.771,14.089,2.771c20.581,0,37.325-16.743,37.325-37.323 C419,37.55,402.256,20.803,
                            381.675,20.803z M230.178,158.153c27.784,0,50.388,22.604,50.388,50.388 c0,27.784-22.603,
                            50.388-50.388,50.388c-27.785,0-50.39-22.604-50.39-50.388C179.788,180.757,202.393
                               ,158.153,230.178,158.153z"
                            fill="black" />
                    </mask>
                </defs>
            </svg>
        </div>
    </div>
</body>

</html>

Output:

MaskSVGHover
Masked SVG Element Hover

SVG background images as data URLs

In SVG Background image as Data URLs, both the hover state and normal state consist of the URL field and within that the URL of SVG is stored. Both places, the URL is used and this helps to change hover color of SVG.

Example: This code applies an SVG as a background image in a div, and changes the SVG's fill color on hover using data URLs.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SVG Background Hover as Data URL</title>
    <style>
        .container {
            font-family: Poppins;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 60px;
            height: 100vh;
        }

        .head {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .background-svg {
            width: 200px;
            height: 200px;
            background-image: url(`data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg"
            viewBox="0 0 419 419" ><path d="M381.675,20.803c-20.584,0-37.33,16.747-37.33,37.331c0,
                    4.819, 0.951, 9.628, 2.772, 14.085l-61.297, 
                    61.297 c-15.555-11.566-34.813-18.42-55.642-18.42c-16.635,
                    0-32.861, 4.426-47.175, 12.833l-38.512-44.224 c2.607-5.18, 3.973-10.901,
                    3.973-16.731c0-20.58-16.745-37.323-37.327-37.323c-20.582, 0-37.327,
                    16.743-37.327, 37.323 c0, 20.584, 16.745, 37.331, 37.327, 37.331c3.89, 0,
                    7.699-0.594, 11.365-1.77l38.083, 43.729c-15.413, 17.185-23.852, 39.139-23.852,
                    62.276 c0, 9.273, 1.376, 18.442, 4.094, 27.305l-83.869,
                    59.693c-5.893-3.667-12.614-5.59-19.63-5.59C16.745,
                    289.949, 0, 306.692, 0, 327.273 c0, 20.584, 16.745, 37.33, 37.328,
                    37.33c20.582, 0,
                    37.327-16.746, 37.327-37.33c0-2.755-0.303-5.486-0.904-8.159l79.983-56.924 c10.309,
                    14.638, 24.691, 26.114, 41.197, 32.872l-8.918, 25.146c-18.973, 1.734-33.912,
                    17.78-33.912,
                    37.17 c0, 20.582, 16.745, 37.326, 37.327, 37.326c20.582, 0, 37.328-16.744,
                    37.328-37.326c0-10.949-4.855-21.33-13.139-28.4l9.668-27.26 c2.343, 0.178,
                    4.65, 0.268, 6.893, 0.268c11.969, 0, 23.61-2.249, 34.657-6.691l40.105, 48.345c-2.775,
                    5.309-4.229, 11.201-4.229, 17.227 c0, 20.584, 16.743, 37.331, 37.322, 37.331c20.585, 0,
                    37.332-16.747, 37.332-37.331c0-20.58-16.747-37.323-37.332-37.323 c-3.691, 0-7.318,
                    0.539-10.822, 1.606l-37.223-44.87c21.434-17.844, 33.632-43.73,
                    33.632-71.738c0-20.273-6.492-39.057-17.502-54.387 l61.468-61.468c4.458,
                    1.819, 9.269, 2.771, 14.089, 2.771c20.581, 0, 37.325-16.743, 37.325-37.323 C419,
                    37.55, 402.256, 20.803, 381.675, 20.803z M230.178, 158.153c27.784, 0, 50.388, 22.604,
                    50.388, 50.388 c0, 27.784-22.603, 50.388-50.388, 50.388c-27.785,
                    0-50.39-22.604-50.39-50.388C179.788,
                    180.757, 202.393, 158.153, 230.178, 158.153z" fill=" %23000"/></svg>`);
                    background-size: cover;
                    background-repeat: no-repeat;
            }

                .background-svg:hover {
                 background-image: url(`data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" 
                 viewBox="0 0 419 419" ><path d="M381.675,20.803c-20.584,0-37.33,16.747-37.33,37.331c0,
                         4.819, 0.951, 9.628, 2.772, 14.085l-61.297, 
                         61.297 c-15.555-11.566-34.813-18.42-55.642-18.42c-16.635,
                         0-32.861, 4.426-47.175, 12.833l-38.512-44.224 c2.607-5.18, 3.973-10.901,
                         3.973-16.731c0-20.58-16.745-37.323-37.327-37.323c-20.582, 0-37.327, 
                         16.743-37.327,
                         37.323 c0, 20.584, 16.745, 37.331, 37.327, 37.331c3.89, 0, 7.699-0.594,
                         11.365-1.77l38.083,
                         43.729c-15.413, 17.185-23.852, 39.139-23.852, 62.276 c0, 9.273, 1.376, 18.442, 4.094,
                         27.305l-83.869, 59.693c-5.893-3.667-12.614-5.59-19.63-5.59C16.745, 289.949, 0, 306.692,
                         0, 327.273 c0, 20.584, 16.745, 37.33, 37.328, 37.33c20.582, 0, 37.327-16.746,
                         37.327-37.33c0-2.755-0.303-5.486-0.904-8.159l79.983-56.924 c10.309, 14.638,
                         24.691, 26.114, 41.197, 32.872l-8.918, 25.146c-18.973, 
                         1.734-33.912, 17.78-33.912,
                         37.17 c0, 20.582, 16.745, 37.326, 37.327, 37.326c20.582, 0, 37.328-16.744,
                         37.328-37.326c0-10.949-4.855-21.33-13.139-28.4l9.668-27.26 c2.343,
                         0.178, 4.65, 0.268, 6.893, 0.268c11.969, 0, 23.61-2.249, 34.657-6.691l40.105,
                         48.345c-2.775, 5.309-4.229, 11.201-4.229, 17.227 c0, 20.584, 16.743, 37.331, 37.322,
                         37.331c20.585, 0, 37.332-16.747, 37.332-37.331c0-20.58-16.747-37.323-37.332-37.323 c-3.691,
                         0-7.318, 0.539-10.822, 1.606l-37.223-44.87c21.434-17.844, 33.632-43.73,
                         33.632-71.738c0-20.273-6.492-39.057-17.502-54.387 l61.468-61.468c4.458,
                         1.819, 9.269, 2.771, 14.089, 2.771 c20.581, 0, 37.325-16.743, 37.325-37.323 C419,
                         37.55, 402.256, 20.803, 381.675, 20.803z M230.178, 158.153c27.784, 0, 50.388, 22.604,
                         50.388, 50.388 c0, 27.784-22.603, 50.388-50.388, 50.388c-27.785,
                         0-50.39-22.604-50.39-50.388C179.788, 180.757, 202.393, 158.153,
                         230.178, 158.153z" fill=" %23ff0000"/></svg>`);

                }
    </style>
</head>

<body>
    <div class="container">
        <div class="head">
            <h1>SVG Background Image</h1>
            <div class="background-svg"></div>
        </div>
    </div>
</body>

</html>


Output:

svg1
SVG Background Image as URL

Next Article
How to Change the Item Color of List on Hover ?

R
riyarjha
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox