Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SVG object change color from external CSS

Tags:

html

css

svg

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!

like image 422
user3861559 Avatar asked Apr 09 '17 21:04

user3861559


People also ask

Can I change the color of an SVG with CSS?

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.

How do I change the color of an object in SVG?

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.

Can SVG colors be changed?

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.

Which property changes the color of SVG in CSS?

The fill property is a presentation attribute used to set the color of a SVG shape.


1 Answers

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.

like image 152
Shubham Avatar answered Sep 19 '22 15:09

Shubham