How to set a External SVG color in HTML using CSS?

Question

I am trying to use SVG on my web page.

But it's color is black. So, I want it to be changed. So, I have done-

.red_color_svg
{
    color: red;
    border: 5px solid currentColor;
    fill: currentColor;
}

<object type="image/svg+xml" data="https://rawcdn.githack.com/encharm/Font-Awesome-SVG-PNG/master/black/svg/heart.svg" class="weather_icon red_color_svg circle"></object>

To import heart_border.svg file and make its color red. But it does not work as you see i the output.

Can anyone help me please to solve this?

Thank you very much in advance for helping.

Answer 1

CSS does not apply cross document and you've two documents here heart_border.svg and the container html document.

You need to include the CSS in heart_border.svg e.g. by adding a <link> element or an <xml-stylesheet> processing instruction or by adding it inline in that file via a <style> element.

Alternatively if you add the SVG inline in the html document itself so that you only have one document the CSS will then apply.