SVG image shows a thin border that I cant remove

Question

I have a SVG image on my HTML page and its showing a very thin border around it (visible as a horizontal line on bottom).

I have tried to remove the border.

I have referenced the SVG as an external file in an image tag

HTML file

<img class="svgfix" src="img/home_footer_header.svg" alt="" width="100%" />

SVG File

<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="237.239" viewBox="0 0 1920 237.239">
    <g id="HomeFooter_Seperater" transform="translate(0 -1767.761)">
        <rect id="Rectangle_610" 
            data-name="Rectangle 610" 
            width="1920" 
            height="122" 
            transform="translate(0 1883)" 
            style="fill:rgb(58,58,58)"
            fill="#3a3a3a" />
        <path id="Seperator_Black" d="M-2652,3221.992l1920-86.4v141.95l-1920,85.376Z" transform="translate(2652 -1367.826)"/>
    </g>
</svg>

Attempt to fix

img.svgfix {
    border: 0;
    background-clip: padding-box;
    color: transparent;
}

Royce

Answer 1

This is caused by the svg renderer in browsers trying to smooth out your svg images.

You have the following fixes:

Option 1: Disable edge smoothing

img.svgfix rect {
    shape-renderer: crispEdges;
}

Browser support is all major browsers.

Trade off: The edges become jaggy.

Check out the docs

---

Option 2: Overlapping graphics

Make sure your <rect> overlaps the html element, such that the gap caused by the smoothing is not visible.

You could for example add a border to the svg element.

Hallowell

Answer 2

I have found that using an SVG in an tag with src:

<img src="yoursvg.svg"></svg>

It will put a border around your svg if you use an SVG tag it should be removed. I wasnt able to find the cause but it may be linked to img src being a link and thus having different styling ?

So if u want a fix u can use SVG

<svg></svg>

I know this is a very late reacting but it is a way around for anyone finding this post

Rufford

Answer 3

What I did was change the fill color of the svg to match the color of its background. Once I did the lines were visually removed from the svg.

Amphigory