0

I encountered an issue with SVG tile where gaps appear when the SVG is resized

JSFiddle

svg {
  outline: 1px solid red;
  width: 500px;
  height: 350px;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="294" height="345" viewBox="0 0 294 345">
  <defs>
    <filter id="texture4902" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
      <feImage xlink:href="https://i.imgur.com/bmcAxKs.jpg" preserveAspectRatio="none"  result="texture-img"
               width="100" height="100"></feImage>
      <feTile in="texture-img" x="0" y="0" width="100%" height="100%" result="tile"></feTile>
      <feComposite in2="SourceGraphic" operator="in" in="tile" result="composite"></feComposite>
      <feBlend in="SourceGraphic" in2="composite" mode="multiply"></feBlend>
    </filter>
  </defs>

  <g>
    <g filter="url(#texture4902)">
      <g>
        <image x="0" y="0" xlink:href="https://i.imgur.com/QMunN6l.png" opacity="1"></image>
      </g>
    </g>
  </g>
</svg>

Expected:
enter image description here

Result:
enter image description here

How to fix this issue? (occurs only on Chrome)

Info: The svg is resized by the user

Chrome bug (?) https://bugs.chromium.org/p/chromium/issues/detail?id=1037885

Improve this question

2 Answers 2

Reset to default
1

You can fix the edges by doing an erode/dilate at the end of your filter. Hacky - and it distorts the shape slightly - but it's better than those big lines.

svg {
  outline: 1px solid red;
  width: 500px;
  height: 350px;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="294" height="345" viewBox="0 0 294 345">
  <defs>
    <filter id="texture4902" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
      <feImage xlink:href="https://i.imgur.com/bmcAxKs.jpg" preserveAspectRatio="none"  result="texture-img"
               width="100" height="100"></feImage>
      <feTile in="texture-img" x="0" y="0" width="100%" height="100%" result="tile"></feTile>
      <feComposite in2="SourceGraphic" operator="in" in="tile" result="composite"></feComposite>
      <feBlend in="SourceGraphic" in2="composite" mode="multiply"></feBlend>
      <feMorphology operator="erode" radius="1"/>
      <feMorphology operator="dilate" radius="1"/>
    </filter>
  </defs>

  <g>
    <g filter="url(#texture4902)">
      <g>
        <image x="0" y="0" xlink:href="https://i.imgur.com/QMunN6l.png" opacity="1"></image>
      </g>
    </g>
  </g>
</svg>

Improve this answer
0
1

there are actually lighter parts on the edges of your texture... why you only see this in chrome idk... but making your image a bit larger makes the lines go away...

<feImage width="101" height="104"></feImage>

svg {
  outline: 1px solid red;
  width: 500px;
  height: 350px;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="294" height="345" viewBox="0 0 294 345">
  <defs>
    <filter id="texture4902" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
      <feImage xlink:href="https://i.imgur.com/bmcAxKs.jpg" preserveAspectRatio="none"  result="texture-img"
               width="101" height="104"></feImage>
      <feTile in="texture-img" x="0" y="0" width="100%" height="100%" result="tile"></feTile>
      <feComposite in2="SourceGraphic" operator="in" in="tile" result="composite"></feComposite>
      <feBlend in="SourceGraphic" in2="composite" mode="multiply"></feBlend>
    </filter>
  </defs>

  <g>
    <g filter="url(#texture4902)">
      <g>
        <image x="0" y="0" xlink:href="https://i.imgur.com/QMunN6l.png" opacity="1"></image>
      </g>
    </g>
  </g>
</svg>

Improve this answer
3
  • Thank you, I didn't mention that the SVG is resized by the user so it has to work correctly for any size. I tried width: 400px but the gaps were back. On Firefox, it's perfect, I think it's a Chrome bug!
    – unloco
    Commented Dec 26, 2019 at 12:02
  • yes, you are right... probably a bug... this is what the spec has to say about feTile: "Implementers must take appropriate measures in constructing the tiled image to avoid artifacts between tiles, particularly in situations where the user to device transform includes shear and/or rotation. Unless care is taken, interpolation can lead to edge pixels in the tile having opacity values lower or higher than expected due to the interaction of painting adjacent tiles which each have partial overlap with particular pixels."
    – Holger Will
    Commented Dec 26, 2019 at 15:55
  • 1
    Thank you for the info but I have no idea how to fix it! Anyway, I reported a chrome bug here bugs.chromium.org/p/chromium/issues/detail?id=1037885
    – unloco
    Commented Dec 27, 2019 at 10:04

Not the answer you're looking for? Browse other questions tagged or ask your own question.