How to Change Color of SVG in CSS

by
How to Change SVG Color

Changing the color of an SVG (Scalable Vector Graphics) element can be achieved in various ways, depending on the specific part of the SVG you want to modify. Here’s a general guide.

Different Ways to Change Color of SVG

In this post, I will share multiple methods for changing the color of SVG elements. We will explore how to modify the color of an SVG image, change the background color of an SVG, and more.

#1 Inline SVG in HTML

When you place an SVG directly into your HTML, it’s called “inline SVG“. This method is great because it lets you easily change the SVG’s appearance using CSS. For instance, if you have a circle in your SVG and you want to change its color, you can do that with a simple CSS fill property rule.

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="red" />
</svg>

<!-- Second Path Method -->

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
    <path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206 C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161 C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505 c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081 c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>
</svg>
HTML

To change the circle’s color to blue using CSS.

circle {
    fill: blue;
}

/* Target through Path Id */
CSS

Output:

Inline SVG change color

#2 Change SVG Color On Click

JavaScript is a tool that lets you make changes to your webpage based on actions or events. If your SVG is inline, you can use JavaScript to change its properties. For example, you can change the color of a circle in your SVG when a button is clicked.

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="red" />
</svg>
<button onclick="changeColor()">Click to Change Color</button>
HTML
function changeColor() {
    let circle = document.querySelector('circle');
    circle.style.fill = 'green';
}
JavaScript

Output:

click to change svg Color

#3 How to Change SVG Color using <object> or <iframe>?

Changing the color or style of an SVG embedded using <object> or <iframe> is a bit more involved than with inline SVGs. This is because the SVG is loaded in a separate document context, making it harder to access directly from the parent document. However, it’s still possible with some additional steps.

Here’s how you can change the color of SVG using both methods:

<!-- Embedding SVG using <object> -->
<object id="mySVGObject" data="your-image.svg" type="image/svg+xml"></object>

<!-- Embedding SVG using <iframe> -->
<iframe id="mySVGIframe" src="your-image.svg"></iframe>
HTML
// For <object>

let svgObject = document.getElementById("mySVGObject");
if (svgObject) {
    let svgDocObject = svgObject.contentDocument;
    let circleObject = svgDocObject.querySelector('circle');
    if (circleObject) {
        circleObject.setAttribute('fill', 'blue');
    }
}

// For <iframe>

let svgIframe = document.getElementById("mySVGIframe");
if (svgIframe) {
    let svgDocIframe = svgIframe.contentDocument || svgIframe.contentWindow.document;
    let circleIframe = svgDocIframe.querySelector('circle');
    if (circleIframe) {
        circleIframe.setAttribute('fill', 'blue');
    }
}
JavaScript

Related Post

#4 How to change SVG Image Color in <img> tag?

Using the <img> tag to embed SVGs is straightforward, but it comes with limitations. SVGs added this way are treated as static images, meaning you can’t modify their appearance using CSS or JavaScript within the browser. If you need to change the SVG’s appearance, you’d either have to edit the SVG file directly or use one of the alternative embedding methods.

<img src="path-to-your-image.svg" alt="Description of SVG">
HTML

#5 Modernizr and SVG Support

While SVG is widely supported in modern browsers, it’s always a good idea to ensure compatibility for all users.

  1. What is Modernizr?:
    • Modernizr is a handy JavaScript library that detects features available in a user’s browser. It’s like a safety net, ensuring that your website looks great and functions correctly across different browsers.
  2. Checking for SVG Support:
    • With Modernizr, you can check if a browser supports SVG. If it doesn’t, you can provide a fallback, like a PNG image, ensuring that users still get a visual, even if it’s not the SVG.
  3. Using Modernizr for Styling Flexibility:
    • If the browser supports SVG, you can embed your SVG inline and apply any styles you need. This way, you get the best of both worlds: beautiful SVG graphics and broad compatibility.

If a browser doesn’t support SVG, you can use Modernizr to show a different image instead.

if (!Modernizr.svg) {
    // Show a different image or graphic
}
JavaScript

Leave a Comment