I'm building a website where I use SVGs images for the main background, this SVGs are splitted in 3, the header, the main background and a divisor, the idea is make them looks like just one svg, for desktop the display of them is good, the problem comes in mobile, where in some widths the "browser" or the SVGs start creating little white lines between them (See link picture, the painted zones be for confidentiality agreement)https://flic.kr/p/2naLed2

I tried searching questions already asked about this problem, the first solution that I tried is to give to the SVG's a negative margin top, this works for one of the illustrations, but the other one keeps showing the white lines. I think the problem is about the rendering of the SVGs or something like that, but I can't find a working solution. I'll let the SASS for that part of the website.

The main illustration and the divisor are on the page on img tag

.main-ilustration {
        margin: 0;
        background-color: #07070f;

        .ilustration {
            width: 100%;
            margin-top: -1px;
        }

        .ilustration-divisor{
            margin-top: -2px;
            margin-bottom: -1px;
        }
    }

and the SASS for the header

header {
    background-image: url(../Pictures/Banner-Header.svg);
    background-repeat: repeat;
    
    .container-fluid {
        padding: 1rem 2rem;
    }
}

CodePudding user response：

the suitable solution I can provide is that you need to remove the background from the SVGs files in illustrator and then just set the black background-color to the body.