Menu
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.
985
Edit your SVG file, add fill="currentColor" to svg tag and make sure to remove any other fill property from the file. Note that currentColor is a keyword (not a fixed color in use). After that, you can change the color using CSS, by setting the color property of the element or from it's parent.
The fill property is a presentation attribute used to set the color of a SVG shape.
SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document. If you did everything correctly, your webpage should look exactly like the demo below.
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.
128
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
