14

When I use a SVG image as the tiled background for the body of my page, there is a slight gap between the tiles. If I switch to the PNG version of the file, it does not happen.

I am using the latest version of Google Chrome for Mac – version 19.0.1084.56. I haven’t tested Windows because I don’t have that platform. File works as expected in Safari and FF.

After a bunch of Google searches and searching here on SO I haven’t found any similar reports. Maybe someone here has a solution.

Here is my test code:

<!DOCTYPE html>
<html>
<head>
<title>SVG background test</title>
<style type="text/css">
body {
   background-color: #FFF;
   background-image: url(img/assets/background.svg);
   background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>
Palec
  • 12,743
  • 8
  • 69
  • 138
Violet
  • 351
  • 1
  • 3
  • 12

3 Answers3

11

This turned out not just to be happening it Chrome, but it was more noticeable in that browser. As I posted above, here is the solution: After reading a solution for a slightly different Chrome/svg problem I figured out the answer. Posting back here in case someone else runs across this issue. I created my SVG file in Illustrator. Apparently my artboard/image size was not in precise pixels. I discovered this by opening my SVG file in a text editor and looking at the top of the file I saw this :

width="229.9999px" height="147.4256px"

I opened the svg file in illustrator and made sure that the dimensions were exactly even pixels, then double checked again in the text file. Corrected dimensions were:

width="230px height="148px"

For some reason simply editing the values in the text file did not work for me, but then again it was faster to just fix in Illustrator than figure out how to edit the svg text file correctly. At any rate, now I do not have a gap in my tiles. Hope that helps someone else if they are having this problem.

Violet
  • 351
  • 1
  • 3
  • 12
  • 4
    This does not solve my problem. I have a svg file with 100px width and 100px height, but there is still a gap here. The interesting thing is, Firefox seems not to have this problem. – John Wu Nov 25 '14 at 08:29
  • YOU GENIUS! THANK YOU – paulslater19 Dec 17 '14 at 22:28
  • 1
    This may cause the bug to go away at 100% zoom level, but it does not eliminate the browser render bug which still exists in 2019. At various zoom levels, there is still a gap between the repeating SVG used as a CSS background. – TelFiRE May 26 '19 at 01:10
2

There are four things to look for (this answer is for other people who end up here looking for a solution):

  1. Making sure the height and width are integers aka "without a fractional component" (as mentioned by Violet, no decimals)
    Example: height="326.25" vs height="326"

  2. Making sure your viewbox is also integers
    Example viewBox="0 0 306.25 753" vs viewBox="0 0 306 753"

  3. And if you have a viewport, you can also set the preserveAspectRatio attribute
    Learn More On MDN

  4. Another thing to pay attention to is have the height and width attribute set in the svg tag. This addresses an IE background-size sizing problem. This is a good article about it.

In my situation, the SVG repeated correctly in Chrome, but had a gap in Firefox until I set all my attributes to integers.

Jason Lydon
  • 7,074
  • 1
  • 35
  • 43
1

It's not a problem of width or height. It appears even if your svg pattern is 100px x 100px and have no decimal.

You can resolve the problem putting preserveAspectRatio="none" in your svg file as it : <svg preserveAspectRatio="none" ...>

But when you want to repeat a svg pattern you can't choose this option because your pattern will be distorted.

Have you found the answer ?

OneCricketeer
  • 179,855
  • 19
  • 132
  • 245
user3101788
  • 21
  • 1
  • 4
  • If you have another question, please ask it by clicking the [Ask Question](//stackoverflow.com/questions/ask) button. – OneCricketeer Oct 12 '16 at 17:08
  • Changing coordinates to integers did nothing for an occasional gap I had in Firefox. preserveAspectRatio="none" worked nicely, thanks. – MSC Mar 26 '21 at 07:03