[svg] Gaps between QR code elements

[ghost]

Hi all. When generating SVG and its zoom I get gaps between elements of QR code. Why is this happening?

[ciriousjoker]

Same issue here, but when you zoom in the lines don't become bigger, so it's probably just a visual bug and not something that you can fix. There are no rounding errors in the resulting svg.

[pelle-minddig]

I have the same issue. When looking at the downloaded svg in inkScape the lines are there. Any suggestions on how to solve this?

[gtktsc]

Hey! I'm facing the same issue - it's caused by the browser rendering strategy. It can be "fixed" by adding the attribute shape-rendering="crispEdges" to the generated SVG element however, it generates rough edges.

Example SVG:

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="300"
  height="300"
  viewBox="0 0 300 300"
  shape-rendering="crispEdges"
>
  <defs>
    <clipPath id="clip-path-dot-color">
      <path
        d="M 5 105v 10h 5a 5 5, 0, 0, 0, 0 -10"
        transform="rotate(-90,10,110)"
      ></path>
      { ... }
    </clipPath>
  </defs>
  <rect
    x="0"
    y="0"
    height="300"
    width="300"
    clip-path="url('#clip-path-background-color')"
    fill="#e9ebee"
  ></rect>
  <rect
    x="0"
    y="0"
    height="300"
    width="300"
    clip-path="url('#clip-path-dot-color')"
    fill="#37C171"
  ></rect>
</svg>

[kozakdenys]

Hi, @ciriousjoker @gtktsc @pelle-minddig I am sorry for the late response. It is caused because each dot is rendered separately and browsers apply corners smoothing. But in version v1.8.0 added new property dotOptions.roundSize. If false it adds shape-rendering="crispEdges". It removes gaps but it will look a bit "crispy".