CODEWITHSUNDEEP
htmlcsssvgvector
IEnumerable
IEnumerable

Reputation: 3800

SVG image shows a thin border that I cant remove

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;
}

enter image description here

Upvotes: 7

Views: 8722

Answers (4)

Arturo Garcia Guajardo
Arturo Garcia Guajardo

Reputation: 1

Happened to me with this "hairy" lines in the smiles, this was because I rounded the corners by myself, the line was "cut"and the browser tried to smooth the lines causing this thin lines at the smile and eyebrows, try to use one figure or a figure without to much cuts.

I know this is from 2020, but someone could get help without using codes.

[]: https://i.sstatic.net/Zq13xMmS.png

Upvotes: 0

Milan Gedink
Milan Gedink

Reputation: 21

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

Upvotes: 2

Jubilee Akputa
Jubilee Akputa

Reputation: 11

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.

Upvotes: 1

Timmy Chan
Timmy Chan

Reputation: 985

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.

Upvotes: 8

Related Questions