Как разместить <rect> s бок о бок?

Question

Я хочу разместить заполненные квадраты в SVG рядом друг с другом, но между ними есть тонкие линии. Как устранить эти строки?

Пример:

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

Моя репутация не позволяет мне размещать изображения, но вы можете внимательно посмотреть на мой аватар.

Answer 1

Вы видите сглаживание на работе.

Добавить фигуру-рендеринг = "crispEdges" к корневому элементу <svg> (или, альтернативно, каждому прямоугольнику), чтобы получить нужный дисплей.