svg as background image color change

Question

I set up svg icon as less variable:

@logo: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 612 792"><path fill="@{t-body-color}" d="M281.4,463.6h-11.3c0,0,0.6-17.5-2-35.7c14.2-15.2,19.8-46.4,19.8-46.4s7,1.7,11.6-21.5c4.7-23.1-4.7-26.8-4.7-26.8s0.6-40,2-62.5c1.3-17.9-10.3-28.2-14.9-31.5c-1.3-1-2-2.3-2.3-3.9c-1.3-8.6-6.2-36.5-14-43.7c-16.9,20.8-102,36.7-102,36.7c-27.8,7-33.8,31.5-32.8,42.4c2,22.5,2,62.5,2,62.5s-9.5,3.7-4.7,26.8c4.7,23.1,11.6,21.5,11.6,21.5s6,31.1,19.8,46.4c-2.7,18.6-2,35.7-2,35.7h-11.3c-1,0-2,0.6-2,1.7c-1.3,6.2-0.6,24.5-9.5,30.5c-26.2,17.1-135.1,49.6-135.1,76V702h428.3V595.3c0-50.1-108.9-82.5-135.1-99.6c-9.3-6-8.3-24.5-9.5-30.5C283.1,464.2,282.4,463.6,281.4,463.6L281.4,463.6zM465.9,471.5v-22.2c0,0,48.7-4.3,63.3-41.4c-15.2-5-34.8-16.5-41.1-48.3c-3.9-20.2,5.6-60.6-3.3-77.1c-5.3-9.5-16.9-20.2-29.1-21.2c-7.3-16.3-31.5-20.8-44.4-20.8c-32.1,1-59,17.5-71.8,42.1c-8.9,16.5,0.6,56.9-3.3,77.1c-6.2,31.8-25.8,43.1-41.1,48.3c14.6,37.5,63.3,41.4,63.3,41.4v22.2c-1,0-10.6,3.3-18.2,29.5c-1,0.6,1.3,3.7,3.7,4.7c60.2,25.2,96.7,50.1,96.7,90.1v106.7H612c0,0,0.4-122.5,0-130.2c-1.3-23.9-101.3-56.3-128.2-71.2C476.5,474.8,466.8,471.5,465.9,471.5L465.9,471.5z"/></svg>');`

and added as background-image:

 .logo-white {
    background: @logo center center no-repeat;
    background-size: auto @logo-h;
    width: 5rem;
    height: @logo-h !important;
    z-index: 1000000;
}

and i want to be able to change fill color via css, is it any way i can do this?

There is not. Images have no DOM. – Robert Longson May 19 '15 at 18:17 — Robert Longson, May 19 '15 at 18:17

score 0 · Answer 1 · answered May 19 '15 at 19:53

It is possible, but you need to redo how you're using the SVG file. Instead of calling it through CSS, you load the SVG once at the beginning of your document and then you can call <use xlink:href="#id"></use> where the image goes in your document and then you can apply the fill attribute to that.

So for instance, load your SVG inline in your document like so:

<!DOCTYPE html>
<html>
<head></head>
<body>

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" style="display:none;">
    <defs>
        <g id="shape">
            <rect width="100%" height="100%" />
        </g>
    </defs>
</svg>

</body>
</html>

Then in your HTML where that image displays, reference that SVG like so:

<svg viewBox="0 0 300 200">
    <use xlink:href="#shape"></use>
</svg>

You can then style that <svg> using the fill attribute.

.red svg {
    fill: red;
}
.blue svg {
    fill:blue;
}

See demo fiddle or find out more about this trick.

UPDATE: You did mention background images specifically. This won't work if you have to use background-image in CSS. As far as I know, it only works on inline SVGs like this (not external SVGs, SVGs called with the <img> tag, or CSS background-image).

svg as background image color change

1 Answers1