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.

Answer 2

I know this is an old question now - but this is for any future readers who want to colour their SVGs with pure CSS rather than have to use JS. I find this method quite convenient compared to other methods - and you can even colour your SVGs with a gradient etc.!

I simply make a div which will contain my SVG and give it a class.

HTML:

<div class="colourful-svg"></div>

Then the colour is done using masks and background colour in your CSS.

CSS:

.colourful-svg {
    mask-image: url("path/to/your/svg-file.svg");
    background: green;
    // Make sure you define dimensions for your div otherwise it won't show up
    height: 500px;
    width: 500px;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
  }

This will make your SVG fill the div you had made and therefore be the size you need it to. It then uses a mask to essentially only show your background colour through the SVG you have linked to using the url() function.

Masks now have pretty good support with prefixes (about 94% globally from caniuse.com at the time of writing), so I think this is quite a simple and easy way to implement colour SVGs - I hope someone finds this useful!

Answer 3

As far as I know, color in SVG-CSS should be stroke for borders and fill for backgrounds:

.partnerLogo {
  width: 100%;
  height: 100px;
  stroke: red;
  fill: red;
}

Answer 4

You can't use external CSS classes to style a SVG called within an < object > element, despite a lot of blog posts in the subject says you can interact with, buit this is misleading for this particular case. 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.

Here's a post that covers it all: https://vecta.io/blog/best-way-to-embed-svg

Answer 5

Using JavaScript to change the object's SVG color.

var svgElement = document.querySelector("#SELECTOR");
svgElement.contentDocument.querySelector('svg').style.fill = '#ff0000';

Hope this method will help.