Reusing symbol in SVG pattern without blurring

65 views Asked by At

I found that symbol reused in pattern looks blurry.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="70mm" height="84mm">

<defs>
<symbol id="Pole" viewBox="0 0 30 30">
    <path fill="#666" fill-rule="evenodd" d="m 9 9 l 3 6 l -3 6 l 6 -3 l 6 3 l -3 -6 l 3 -6 l -6 3 z m -6 4 v 4 h 10 v 8 h 4 v -8 h 10 v -4 h -10 v -8 h -4 v 8 z m 12 -13 a 1 1 0 0 0 0 30 a 1 1 0 0 0 0 -30"/> 
</symbol>

<pattern id="Poles_StepDependedWidth" x="0" y="0" width=".25" height="1" patternUnits="objectBoundingBox">
    <rect height="100%" width="100%" fill="red" opacity="0.25" />
    <use href="#Pole" width="7mm" height="7mm" />
</pattern>
</defs>

<rect x="7mm" y="4.5mm" height="7mm" width="70mm" fill="url(#Poles_StepDependedWidth)"/>
<use href="#Pole" x="0" y="4.5mm" width="7mm" height="7mm" />

</svg>

Playng with combination of patternUnits, viewBox (for pattern and symbol) didn't fix the blurring symbol in pattern (with red background).

Here is an image showing that the edges are not so sharp

More complex image showing blurring

1

There are 1 answers

0
mezich On

Solved. The problem is caused by accumulation when rounding values. In svg header for width/height need to use integer measurements (in pixels). Here is an example where the symbol is rendered identically.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">

<defs>
    <symbol id="S" viewBox="0 0 30 30">
        <path fill="#666" fill-rule="evenodd" d="m 9 9 l 3 6 l -3 6 l 6 -3 l 6 3 l -3 -6 l 3 -6 l -6 3 z m -6 4 v 4 h 10 v 8 h 4 v -8 h 10 v -4 h -10 v -8 h -4 v 8 z m 12 -13 a 1 1 0 0 0 0 30 a 1 1 0 0 0 0 -30"/> 
    </symbol>

    <pattern id="P_BoundingBox" x="0" y="0" width=".5" height="1" patternUnits="objectBoundingBox">
        <use href="#S" x="0" y="0" width="30" height="30" />
    </pattern>

    <pattern id="P_SpaceOnUse" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse">
        <use href="#S" x="0" y="0" width="30" height="30"/>
    </pattern>
</defs>

    <use href="#S" x="0" y="30" width="30" height="30" />
    <g stroke-width="2" stroke-opacity=".25">
        <rect x="30" y="30" height="30" width="60" fill="url(#P_BoundingBox)" stroke="red"/>
        <rect x="90" y="30" height="30" width="60" fill="url(#P_SpaceOnUse)" stroke="blue"/>
    </g>
</svg>