如何防止SVG图像周围的CSS背景颜色“渗出”？

Question

I have an SVG file which I display white normally, or red when the user hovers over it. This is made by having transparent areas of the image and using the following CSS & HTML:

a>img{background:#fff;width:32px;height:32px}
a:hover>img{background:#900}

<a href="blah.html"><img src="blah.svg"></a>

The problem is that I sporadically get very thin borders of white (or red) around the image. Different browsers/zoom levels/devices show different borders - sometimes none, sometimes some, sometimes all of them.

This would appear to suggest that the SVG file isn't quite "filling" the img tag.

I might assume that the problem is that the SVG isn't quite square, so it's not stretching perfectly to 32x32 pixels, but sometimes I get borders on all four sides, so it can't be that simple. (And indeed the SVG file has a viewbox of "0 0 195 195" and doesn't appear to have any points outside of that range.

It's worth noting that changing the dimensions to 39x39 pixels (a perfect divisor of 195) doesn't fix the issue, not that I expected it to, due to the vector nature of SVG.

Fiddle: http://jsfiddle.net/3wtazst8/1/

Any suggestions?

Thanks

Answer 1

I know this is over a year old, but I was having the same issue and considered Paul LeBeau's advice regarding extending outside the viewBox. Below is an example showing the issue and the fix.

Icons with background colors showing issue and showing fix

The badge icon does not show the bleed, while the medal icon does.

Side-by-side image of icons within viewBox and extended beyond viewBox

Viewing the left SVG in Illustrator, the background of the image goes to the very edge of the viewBox.

Viewing the right SVG in Illustrator, the background of the image extends beyond the edge of the viewBox.

Fixing your SVG so the background extends beyond viewBox will fix your issue.