0

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

mezich
  • 1
  • 1
  • 1
    Looks OK to me on Firefox on a Mac. What am I looking for exactly? – Robert Longson Feb 13 '23 at 12:06
  • Thanks for attention. I've attached to post image showing that the edges are not sharp in Chrome on Windows – mezich Feb 13 '23 at 15:07
  • Report it to Chrome then if you wish: https://bugs.chromium.org/p/chromium/issues/ although really it's just antialiasing so I don't think it's a bug. – Robert Longson Feb 13 '23 at 15:08
  • 1
    It's not a Chrome bug. Safari on mac also blurring symbol in pattern. – mezich Feb 13 '23 at 15:17
  • As I said, it's antialiasing, it's expected. You can set shape-rendering="crispEdges" if you don't like it but you might think that's worse. – Robert Longson Feb 13 '23 at 15:28
  • So why antialiasing looks different in same size in symbol and same symbol in pattern? – mezich Feb 13 '23 at 15:39
  • Key point - same size of graphical object symbol and symbol in pattern. Pattern should just repeat this graphics without modification. – mezich Feb 13 '23 at 15:47
  • Colour in pattern does not affect and was added to see pattern area. When you remove colour background, you will see different rendering of same graphical objects. – mezich Feb 13 '23 at 16:33

1 Answers1

0

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>
mezich
  • 1
  • 1