CSS background color in <IMG> using external SVG as SRC

Question

I have an SVG square with a mid-shape cutout (think cookie cutter). SVG was created in Illustrator with the edges of the form extending to the edge of the art board.

The color of the shape matches the background color.

To change the color of the SVG form, I just change the background color of the IMG in CSS. This works great, however you will notice that there is a half-pixel color flowing out of shape, as if it were a border.

Depending on the size specified in the IMG, the border disappears or reappears. Any tips on how to get rid of this?

Working example: http://jsfiddle.net/ja6Tx/

HTML:

<div class="container"> <img class="logo" src="http://toobulo.com/img/logo-icon.svg" /> </div> 

CSS

  body {background:#252525;} img.logo {background:yellow;} 

UPDATE: I decided to replicate the problem in a simpler form to eliminate any decimal pixel problems, and the problem still exists. (On any screen).

See here: http://jsfiddle.net/w7vrs/

Now we have a rectangle of 320x240. Please note that the problem never occurs if the width of the container matches the same aspect ratio (160, 640, etc.). Once you change the width of the .img-container to something like 451px, the problem will return.

The fact is that SVG is designed to scale, so I don’t need to specify the exact pixel width to use SVG.

As you can see, the code for the new SVG is almost nothing:

 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="320px" height="240px" viewBox="0 0 320 240" style="enable-background:new 0 0 320 240;" xml:space="preserve"> <style type="text/css"> <![CDATA[ .st0{fill:#020202;} ]]> </style> <rect class="st0" width="320" height="240"/> </svg> 

Answer 1

The external SVG image has a width of 237.104 pixels. If you change all occurrences of 237.104 to 237 , the problem disappears.

Replacing the first few lines with the following should do the trick:

 <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="237px" height="400px" viewBox="0 0 237 400" enable-background="new 0 0 237 400" xml:space="preserve"> <path fill="#252525" d="M65.375,258.523c-0.013-0.014-0.026-0.026-0.04-0.041l0.088,0.1 C65.388,258.543,65.375,258.527,65.375,258.523z"/> <path fill="#252525" d="M60.655,171.371C60.631,171.387,60.166,171.83,60.655,171.371L60.655,171.371z"/> <path fill="#252525" d="M0,0v400h237V0H0z M229.401,236.861c-1.209,3.683-2.285,7.473-3.723,11.129 

(Other problems may occur, but clearing your SVG file and snapping to a pixel grid should solve everything.)

---

Update: Your alternate SVG is still drawing outside the box ( d="M0,0v400h237.104V0H0z ). Here's a cleaned version of SVG where it is a little easier to see what happens:

 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="237" height="400" viewBox="0 0 237 400" enable-background="new 0 0 237 400" xml:space="preserve"> <path fill="#252525" d="M0,0v400h237v-400H0z M198,290.5c-25.667,25.667-54.125,35.125-85.625,35.125 c-31.25,0-61.375-15.5-78.708-32.792C17.146,276.353,1.5,253.458,1.5,215.125c0-32.875,19.625-62.375,36.5-75.958 c12.874-10.362,33.917-20,58.25-20c22.5,0,43.5,11.208,54.271,20.827c10.41,9.295,25.965,28.007,25.965,55.315 c0,26-14.236,43.691-25.283,51.748c10-13.333,12.464-28.223,12.464-37.89c0-13.542-4.667-27.042-13.667-37.667 c-8.537-10.078-26.334-20.667-44.333-20.667c-20.167,0-33.575,8.098-44,18.905c-9.417,9.761-16.263,27.011-16.263,41.428 c0,18.833,7.346,34.708,16.93,44c10.497,10.178,28.333,21.666,50.667,21.666c25.125,0,46.33-10.434,60.667-31 c12.083-17.333,17-33.333,17-51.334c0-23.625-9.126-48.455-30.134-67.54C137.875,106.375,109.875,97.2,84.443,97.2 c-28.068,0-56.693,10.425-76.109,25.657C36.625,86,74.79,75.289,105.789,75.289c33.336,0,69.919,14.419,94.586,41.086 S234,171.25,234,201.833C234,228.167,223.667,264.833,198,290.5z"/> </svg> 

The first part of the <path> element is the bounding rectangle M0,0v400h237v-400H0z . Now the coordinates are integers, so there should be no problems. (Although Damien’s proposal is worth considering.)

---

Ok, I'll try again :-)

I could not reproduce the problem in JSFiddle that you posted, but if SVG is allowed to scale with the viewport size, then sometimes it turns yellow.

To fix this, I expanded the background of the SVG image with an extra pixel beyond the size of the viewport. This seems to fix the problem (at least in Chrome) .

So, to solve your initial question, I think that all you need to do is change the first part of the path data to M-1,-1v402h239v-402H-1z as follows:

 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="237" height="400" viewBox="0 0 237 400" enable-background="new 0 0 237 400" xml:space="preserve"> <path fill="#252525" d="M-1,-1v402h239v-402H-1z M198,290.5c-25.667,25.667-54.125,35.125-85.625,35.125 c-31.25,0-61.375-15.5-78.708-32.792C17.146,276.353,1.5,253.458,1.5,215.125c0-32.875,19.625-62.375,36.5-75.958 c12.874-10.362,33.917-20,58.25-20c22.5,0,43.5,11.208,54.271,20.827c10.41,9.295,25.965,28.007,25.965,55.315 c0,26-14.236,43.691-25.283,51.748c10-13.333,12.464-28.223,12.464-37.89c0-13.542-4.667-27.042-13.667-37.667 c-8.537-10.078-26.334-20.667-44.333-20.667c-20.167,0-33.575,8.098-44,18.905c-9.417,9.761-16.263,27.011-16.263,41.428 c0,18.833,7.346,34.708,16.93,44c10.497,10.178,28.333,21.666,50.667,21.666c25.125,0,46.33-10.434,60.667-31 c12.083-17.333,17-33.333,17-51.334c0-23.625-9.126-48.455-30.134-67.54C137.875,106.375,109.875,97.2,84.443,97.2 c-28.068,0-56.693,10.425-76.109,25.657C36.625,86,74.79,75.289,105.789,75.289c33.336,0,69.919,14.419,94.586,41.086 S234,171.25,234,201.833C234,228.167,223.667,264.833,198,290.5z"/> </svg> 

Answer 2

This is an odd bug, probably due to padding around inline elements. Here is what I found for this. Put your svn inside the "image container" div container, for example:

 <div class = 'img-container'> <img class="logo" src="http://toobulo.com/img/logo-icon.svg" /> </div> 

Then you set the image width to 100% and set the width in the container to the width you need:

 .img-container { width: 200px; } img.logo {background:yellow; width:100%; } 

Working fiddle: http://jsfiddle.net/ja6Tx/5/

Answer 3

I refer to your update.
It seems like this is basically a problem in Firefox (where I can reproduce the problem), while in Chrome the problem does not appear.

I assume that this is the result of some “rounding errors” in internal browser calculations.

One easy way to avoid this is to use clip for the image:

 img.logo { clip:rect(0 0 auto 452px); } 

So the “problem” disappeared (in FF) - see JSFiddle

Answer 4

Just using the last HTML5 <svg> element the error does not occur:

http://jsfiddle.net/ja6Tx/55/

Browsers seem to use a different renderer depending on where the SVG came from (svg element, object or image, or defined as a background image in the stylesheet).

Answer 5

I think I found a strange little hack for him.

 body { background:#252525; margin:-1px; } .img-container { width: 199px; height:338px; overflow:hidden; } img.logo {background:yellow; width:200px; height:340px; } 

Make the container a pixel or two smaller than your image and hide the overflow. Playing with this, I have a theory that your SVG is so large that it falls between the pixel sizes. I feel that way because when playing with this in Safari, fixing the width will lead to the same height offset and vice versa. Perhaps the real solution is to make sure your image is built and exported with a size that scales exactly in pixels.

But this CSS at least solves this problem for a short time. If you want, I can also spend some time remaking svg in illustrator and see if I can fix it there using a different document setting.

http://jsfiddle.net/ENVKA/

UPDATE: I was able to confirm that the SVG was built with a width that was between the whole pixel. By setting the document units in pixels and setting the artboard to 237 px (the previous setting was 237.1 px), the image works as it should. No CSS hack needed!

http://jsfiddle.net/JB9Cc/

Answer 6

As others have noted, this is due to how different browsers round decimal numbers. Check out this post about how different browsers handle subpixels: http://ejohn.org/blog/sub-pixel-problems-in-css/

I think the best way to handle this is to not colorize the image. Instead, do what most people will do in this situation, and just use a background div. Sort of

http://jsfiddle.net/ja6Tx/50/

  <div class="container"> <div class="logo"> <div class="bg"></div> <img src="http://toobulo.com/img/logo-icon.svg" /> </div> </div> .logo{ position: relative; height: 400px; width: 237px; } .bg { position: absolute; top:10px; left: 1px; height: calc(100% - 20px); width: calc(100% - 1px); background:yellow; } img{ position: absolute; width:100%; } 

In my testing on my macbook pro retina it does not show any yellow borders, plus this is just the most logical way to solve problems related to SVG inconsistency.

Answer 7

Create your background using a pseudo-element. Then you can put the background in a pixel from the edge of the image, for example:

 .logo { position: relative; } .logo::before { background: yellow; bottom: 1px; content: ''; display: block; left: 1px; position: absolute; right: 1px; top: 1px; z-index: -1; } 

Answer 8

I know it's been over a year now, but I had the same problem, and I covered Paul LeBeau in another question regarding the extension outside of the viewBox. The following is an example showing the problem and the fix.

Background color icons showing the problem and showing the fix

The badge icon does not show bleeding, but the medal icon.

Side image of icons in viewBox and extended outside viewBox

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

View the correct SVG in Illustrator, the image background goes beyond the viewBox.

Fixing your SVG so that a solid background extends beyond the viewBox, your problem will be fixed.