CODEWITHSUNDEEP
csssvg
Mohamad Al Asmar
Mohamad Al Asmar

Reputation: 1177

SVG background image has strange lines on top

.banner{
  width: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: content-box;
    margin: 0;
    height: 486px;
    padding: 0;
}
.banner img {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
}
span.img {
    background-image:url(https://cdn.aqeed.com/assets/images/qeedo/qeedofamily.svg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    position: absolute;
    height: 78%;
    width: 21%;
    left: auto;
    right: 12%;
    bottom: 0;
}
<html>
<head>
</head>
<body>
<div class="banner banner-product aq-container">
        <img src="https://cdn.aqeed.com/assets/images/banners/medicalbanner.svg" alt="Request Quote">
            <span style="background-image:url(https://cdn.aqeed.com/assets/images/qeedo/qeedofamily.svg)" class="img"></span>
    </div>
</body>

</html>

I am using a lot of SVG images in my website, but lately some appeared to have a strange line on the top edge of the svg, and some have this line appear only on small sizes (mobile), I requested a new svg from the designer but its obvious that the svg itself is clear, as seen in source panel of the browser. this is happening on all browsers. below is a screenshot of the edgeof the svg, the lines appear under yellow marker:

enter image description here

this is the second one on mobile:

enter image description here

Upvotes: 0

Views: 2292

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101830

I can't tell which part of the image your first thumbnail is indicating. But the second image corresponds to the top of the hospital.

The hospital is actually not a proper vector, it is a PNG file embedded as a <pattern>. I suspect the cause of your stray lines could be just some rounding issues that occur when a large object (1092x790 pattern & image) are scaled down to very small sizes (on mobile). The lines that you see may be the bottom of the hospital image as it repeats vertically in the <pattern>.

There are actually two of these image patterns in the SVG. The second one is a big grey PNG that is used for the road at the bottom.

My advice is to ask your designer to remove the two PNG images from the SVG and redraw them as vectors. I have high confidence that will get rid of your problem.

And as a bonus, it will also shrink your SVG significantly. Those two PNG images take up 72k of your 137k SVG file. If you change those images to vectors, you can nearly halve your file size.

Upvotes: 2

Related Questions