SVG object change color from external CSS

Question

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!

Answer 1

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.

1) Use Javascript (recommended)

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>

2) Use filter CSS property

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.