0xF
0xF

Reputation: 3728

How to place <rect>s side-by-side?

I want to place filled squares in SVG next to each other, but there are thin lines between them. How to eliminate these lines?

Example:

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="3cm" height="3cm" viewBox="0 0 10 10">
        <rect x="0" y="0" width="1" height="1" fill="black" />
        <rect x="2" y="0" width="1" height="1" fill="black" />
        <rect x="4" y="0" width="1" height="1" fill="black" />
        <rect x="6" y="0" width="1" height="1" fill="black" />
        <rect x="8" y="0" width="1" height="1" fill="black" />
        <rect x="0" y="1" width="1" height="1" fill="black" />
        <rect x="2" y="1" width="1" height="1" fill="black" />
        <rect x="3" y="1" width="1" height="1" fill="black" />
        <rect x="4" y="1" width="1" height="1" fill="black" />
        <rect x="5" y="1" width="1" height="1" fill="black" />
        <rect x="6" y="1" width="1" height="1" fill="black" />
        <rect x="7" y="1" width="1" height="1" fill="black" />
        <rect x="9" y="1" width="1" height="1" fill="black" />
        <rect x="0" y="2" width="1" height="1" fill="black" />
        <rect x="2" y="2" width="1" height="1" fill="black" />
        <rect x="8" y="2" width="1" height="1" fill="black" />
        <rect x="0" y="3" width="1" height="1" fill="black" />
        <rect x="1" y="3" width="1" height="1" fill="black" />
        <rect x="3" y="3" width="1" height="1" fill="black" />
        <rect x="5" y="3" width="1" height="1" fill="black" />
        <rect x="6" y="3" width="1" height="1" fill="black" />
        <rect x="8" y="3" width="1" height="1" fill="black" />
        <rect x="9" y="3" width="1" height="1" fill="black" />
        <rect x="0" y="4" width="1" height="1" fill="black" />
        <rect x="1" y="4" width="1" height="1" fill="black" />
        <rect x="5" y="4" width="1" height="1" fill="black" />
        <rect x="6" y="4" width="1" height="1" fill="black" />
        <rect x="8" y="4" width="1" height="1" fill="black" />
        <rect x="0" y="5" width="1" height="1" fill="black" />
        <rect x="3" y="5" width="1" height="1" fill="black" />
        <rect x="4" y="5" width="1" height="1" fill="black" />
        <rect x="9" y="5" width="1" height="1" fill="black" />
        <rect x="0" y="6" width="1" height="1" fill="black" />
        <rect x="5" y="6" width="1" height="1" fill="black" />
        <rect x="6" y="6" width="1" height="1" fill="black" />
        <rect x="8" y="6" width="1" height="1" fill="black" />
        <rect x="0" y="7" width="1" height="1" fill="black" />
        <rect x="4" y="7" width="1" height="1" fill="black" />
        <rect x="5" y="7" width="1" height="1" fill="black" />
        <rect x="6" y="7" width="1" height="1" fill="black" />
        <rect x="8" y="7" width="1" height="1" fill="black" />
        <rect x="9" y="7" width="1" height="1" fill="black" />
        <rect x="0" y="8" width="1" height="1" fill="black" />
        <rect x="1" y="8" width="1" height="1" fill="black" />
        <rect x="2" y="8" width="1" height="1" fill="black" />
        <rect x="7" y="8" width="1" height="1" fill="black" />
        <rect x="8" y="8" width="1" height="1" fill="black" />
        <rect x="0" y="9" width="1" height="1" fill="black" />
        <rect x="1" y="9" width="1" height="1" fill="black" />
        <rect x="2" y="9" width="1" height="1" fill="black" />
        <rect x="3" y="9" width="1" height="1" fill="black" />
        <rect x="4" y="9" width="1" height="1" fill="black" />
        <rect x="5" y="9" width="1" height="1" fill="black" />
        <rect x="6" y="9" width="1" height="1" fill="black" />
        <rect x="7" y="9" width="1" height="1" fill="black" />
        <rect x="8" y="9" width="1" height="1" fill="black" />
        <rect x="9" y="9" width="1" height="1" fill="black" />
    </svg>

My reputation doesn't allow me to post images, but you can look closely at my avatar.

Upvotes: 2

Views: 164

Answers (1)

Robert Longson
Robert Longson

Reputation: 124249

You're seeing antialiasing at work.

Add shape-rendering="crispEdges" to the root <svg> element (or alternatively to each rect) to get the display you want.

Upvotes: 5

Related Questions