How to get rid of unwanted thin borders in SVG? Different behavior (IE, Chrome, etc.)

user_7494773 0
Viewed 523

I am creating some SVG image that consists of multiple rectangles. Those rectangles are one next to the other, the edges "touch" each other, some browsers (e.g., Chrome, Vivaldi) and image converters render unwanted tiny lines between those rectangles. Meanwhile, some other browsers (IE, Edge) displays the SVG in the desired way.

I checked the SVG in several browsers and in the Inkscape editor (I have exported the SVG into PNG, and the lines were also present).

I can solve there problem with adding some tiny overlap, but I don't like such a solution.

Is that a bug in SVG libraries used in browsers and Inkscape? Or shall I use some SVG feature to fix it?

Chrome example

Inkscape example

Edge example

<svg height="10cm" viewBox="0 0 10 10" width="10cm" xmlns="http://www.w3.org/2000/svg">
    <rect fill="#ff00ff" height="1" opacity="1" width="1" x="1" y="1"/>
    <rect fill="#ff00ff" height="1" opacity="1" width="1" x="2" y="1"/>
    <rect fill="#ff00ff" height="1" opacity="1" width="1" x="3" y="1"/>

    <rect fill="#167f81" height="1" opacity="1" width="1" x="1" y="2"/>
    <rect fill="#167f81" height="1" opacity="1" width="1" x="2" y="2"/>
    <rect fill="#167f81" height="1" opacity="1" width="1" x="3" y="2"/>

    <rect fill="#000000" height="1" opacity="1" width="1" x="1" y="3"/>
    <rect fill="#000000" height="1" opacity="1" width="1" x="2" y="3"/>
    <rect fill="#000000" height="1" opacity="1" width="1" x="3" y="3"/>   
</svg>
inkscape google-chrome internet-explorer svg browser
1 Answers

These edges are the result of tradeoffs renderers make when borders don't match with screen pixels or printer dots. You can state

shape-rendering="crispEdges"

to give a hint to the renderer to set the edges such that they should always coincide with pixels, even if the result of computing the conversion from userspace coordinates to real-world cm units would give a fraction.

Note that this is a hint that renderers may or may not honor.

In addition, some renderers have a bit of a hard time with rounding routines when dealing with small numbers. If you multiply all of your rects sizes and positions with ten, and consequently raise the viewBox size by the same factor, but leave the <svg> width and height unchanged, results may improve.

user_49967790
Related