Geek Answers Handbook

The background image palette has a gap between them when using an SVG image. How to solve in Chrome?

When I use the SVG image as a lined background for the body of my page, there is a slight gap between the plates. If I switch to the PNG version of the file, this will not happen.

I am using the latest version of Google Chrome for Mac - version 19.0.1084.56. I have not tested Windows because I do not have this platform. The file works in both Safari and FF.

After the Google group searches and searches here, I have not found such reports. Maybe someone 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>
+8
google-chrome css3 svg background-image
source share
3 answers

This turned out to be not only for Chrome, but also in this browser. As I said above, here is the solution: After reading the solution for a slightly different Chrome / svg problem, I understood the answer. Go here if someone else runs into this problem. I created my SVG file in Illustrator. Apparently, the size of my drawing / image was not in the exact pixel. 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 sizes were exactly even pixels, and then double-checked in a text file. Corrected sizes:

 width="230px height="148px"

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

+8
source share

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

  • Make sure that height and width are aka “no fractional component” integers (as mentioned in Violet, no decimals)
    Example: height="326.25" vs height="326"

  • Make sure your viewbox also an integer Example viewBox="0 0 306.25 753" vs viewBox="0 0 306 753"

  • And if you have a viewport, you can also set the attribute preserveAspectRatio More about MDN

  • Another thing to look out for is setting the height and width attribute in the svg tag. This concerns the problem of sizing IE background-size . This is a good article about this.

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

0
source share

This is not a problem of width or height. It appears even if your svg pattern is 100px x 100px and does not have a decimal number.

You can solve the problem by placing preserveAspectRatio = "none" in the svg file: <svg preserveAspectRatio="none" ...>

But if you want to repeat the svg pattern, you cannot select this option because your pattern will be distorted.

Did you find the answer?

0
source share

More articles:


All Articles