I am playing around with SVGs (trying to replace icon fonts with SVG.) I got it to render the image/svg using object tag. However, I can't get it to change color from CSS. Assuming, I prefer coloring it from CSS, is there a way to do that while I use to embed SVG.
<object class="partnerLogo" type="image/svg+xml" data="assets/logos/sample.svg">
Your browser does not support SVG
</object>
CSS, I tried so far:
.partnerLogo {
width: 100%;
height: 100px;
color: red;
color-fill: red;
}
In sample.svg file, I added, <?xml-stylesheet type="text/css" href="../css/styles.css"?>
just before
styles.css is being added to the page.
Thanks!
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.
You must add the formattings inline, inside the actual SVG. If you need to access and alter the actual objects and paths of an SVG from your main css file, you must embedd it inline, using the < svg > tag. Save this answer.
Scalable Vector Graphics or SVG's are graphics that are defined using an XML text file. This means they can be opened with a text editor and the HEX code that determines the colors can be changed.
The fill property is a presentation attribute used to set the color of a SVG shape.
It isn't possible to directly modify the fill if you're using the SVG using the <object>
method. The SVG is included as a document fragment inside the object tag, so your properties aren't passed as you can see in this image.
However, there are two ways you can modify the colors of an external SVG.
Using Javascript you can fetch the SVG contents via an XHR, and then inject it as inline SVG. As it's inline SVG technically, you can modify the fill color. There's a library I have written (svg-loader) that make it really easy to do this.
You just need to include the library and use data-src attributes to load SVGs.
Example: Here, I have included a logo in three different formats, modifying the fill color.
<script type="text/javascript" src="https://unpkg.com/external-svg-loader@latest/svg-loader.min.js" async></script>
<div style="display:flex;">
<div style="background:black;">
<svg data-src="https://s2.svgbox.net/assets/logo-white.svg" fill="yellow"></svg>
</div>
<div style="background:purple;">
<svg data-src="https://s2.svgbox.net/assets/logo-white.svg" fill="white"></svg>
</div>
<div style="background:green;">
<svg data-src="https://s2.svgbox.net/assets/logo-white.svg" fill="red"></svg>
</div>
</div>
You can use the filter
CSS property to reach any color using bunch of operations (brightness, contrast, hue-rotate..). There an existing stack overflow discussion on this.
Example:
.red {
filter: invert(20%) sepia(97%) saturate(4013%) hue-rotate(353deg) brightness(93%) contrast(127%);
}
<img src="https://s2.svgbox.net/assets/logo-white.svg" class="red" />
The big drawback here is that you'd need to calculate this for every color (using this) and doesn't make it obvious how it works. Also, it won't work well with SVGs having multiple colors.
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