change css background-image svg paint behavior on hover?

Question

I am using an svg as a background image for a button.

The button needs different hover states, which are just changes to the svg fill values.

Is there a clever way to make these changes to the svg which is effectively just being used as an image, or do I need to create a different svg file with a different fill color?

Related: http://stackoverflow.com/questions/16042387/svg-spritesheet-targeting-with-css — cimmanon, Nov 04 '13 at 21:42
Duplicate of http://stackoverflow.com/questions/13367868/modify-svg-fill-color-when-being-served-as-background-image ? — peterflynn, Aug 31 '15 at 08:03
Does this answer your question? [How to modify the fill color of an SVG image when being served as background image?](https://stackoverflow.com/questions/13367868/how-to-modify-the-fill-color-of-an-svg-image-when-being-served-as-background-ima) — chrisweb, Apr 24 '23 at 07:32

score 5 · Answer 1 · answered Jul 02 '15 at 15:11

An another method with background-position.

HTML

<div class="locate">
    <a href="#">lorem ipsum</a>
</div>

CSS

 .locate a {
      padding-left: 20px;
      position: relative;
      text-decoration: underline;
      color: #000;
    }
    .locate a:before {
      width: 16px;
      height: 16px;
      content: "";
      background: transparent url('search.svg') no-repeat scroll 0 0;
      -webkit-background-size: 16px 32px;
      background-size: 16px 32px;
      position: absolute;
      top: 0;
      left: 0;
      /* For screen reader */
      speak: none;
    }
    .locate a:hover,
    .locate a:focus {
      color: #a2005a;
      text-decoration: none;
    }
    .locate a:hover:before,
    .locate a:focus:before {
      background-position: 0 -16px;
    }

SVG

<svg xmlns="http://www.w3.org/2000/svg">
<path d="M15.838,13.693l-2.785-2.786c0.705-1.103,1.121-2.408,1.121-3.813c0-3.911-3.17-7.081-7.081-7.081
    c-3.911,0-7.081,3.17-7.081,7.081c0,3.91,3.17,7.08,7.081,7.08c1.406,0,2.712-0.415,3.813-1.121l2.787,2.786
    c0.195,0.197,0.518,0.197,0.715,0l1.43-1.43C16.037,14.211,16.037,13.891,15.838,13.693z M7.093,12.15
    c-2.789,0-5.058-2.27-5.058-5.058c0-2.789,2.269-5.058,5.058-5.058c2.79,0,5.058,2.269,5.058,5.058
    C12.15,9.882,9.883,12.15,7.093,12.15z"/>
<path fill="#A2005A" d="M15.838,29.678l-2.785-2.786c0.705-1.103,1.121-2.408,1.121-3.813c0-3.91-3.17-7.08-7.081-7.08
    c-3.911,0-7.081,3.17-7.081,7.08s3.17,7.08,7.081,7.08c1.406,0,2.712-0.415,3.813-1.121l2.787,2.786
    c0.195,0.197,0.518,0.197,0.715,0l1.43-1.43C16.037,30.195,16.037,29.875,15.838,29.678z M7.093,28.135
    c-2.789,0-5.058-2.27-5.058-5.058s2.269-5.058,5.058-5.058c2.79,0,5.058,2.27,5.058,5.058C12.15,25.866,9.883,28.135,7.093,28.135z"
    />
</svg>

score 3 · Answer 2 · answered Jul 01 '15 at 09:47

Yes you can with SVG inline. Doesn't work in IE 11.

<p class="loupe"><a href="#">Lorem ipsum</a></p>

.loupe a {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><path d='M15.838,13.693l-2.785-2.786c0.705-1.102,1.121-2.408,1.121-3.813c0-3.911-3.17-7.081-7.081-7.081s-7.081,3.17-7.081,7.081c0,3.91,3.17,7.08,7.081,7.08c1.406,0,2.711-0.415,3.813-1.121l2.787,2.786c0.195,0.197,0.518,0.197,0.715,0l1.43-1.43C16.037,14.211,16.037,13.89,15.838,13.693z M7.093,12.15c-2.789,0-5.058-2.269-5.058-5.057c0-2.789,2.269-5.058,5.058-5.058c2.79,0,5.057,2.269,5.057,5.058C12.15,9.882,9.883,12.15,7.093,12.15z'/></svg>") no-repeat 0 0;
  padding-left: 20px;
  color: #000;
}
.loupe a:hover,
.loupe a:focus {
  background: url("data:image/svg+xml;utf8,<svg fill='red' xmlns='http://www.w3.org/2000/svg'><path d='M15.838,13.693l-2.785-2.786c0.705-1.102,1.121-2.408,1.121-3.813c0-3.911-3.17-7.081-7.081-7.081s-7.081,3.17-7.081,7.081c0,3.91,3.17,7.08,7.081,7.08c1.406,0,2.711-0.415,3.813-1.121l2.787,2.786c0.195,0.197,0.518,0.197,0.715,0l1.43-1.43C16.037,14.211,16.037,13.89,15.838,13.693z M7.093,12.15c-2.789,0-5.058-2.269-5.058-5.057c0-2.789,2.269-5.058,5.058-5.058c2.79,0,5.057,2.269,5.057,5.058C12.15,9.882,9.883,12.15,7.093,12.15z'/></svg>") no-repeat 0 0;
    text-decoration: none;
    color: red;
}

http://jsfiddle.net/korigan/7e14gogv/

I believe IE doesn't like spaces in data URLs if you convert them to %20 it should work there too. — Robert Longson, Jul 01 '15 at 09:51
I looked for a new method yesterday, without success. It's a pity to be forced to put illustrative icon in HTML. For me custom element are in CSS. — Steven Mouret, Jul 02 '15 at 10:50

score 1 · Answer 3 · answered Nov 04 '13 at 21:31

1

If you are using SVG as a background image it won't be interactive. Think of it as working pretty much like a raster image. Having two images is certainly one solution.

answered Nov 04 '13 at 21:31

Robert Longson

118,664
26
252
242

change css background-image svg paint behavior on hover?

3 Answers3