Hi,
Thanks for the new test project. We were able to find out the root cause to be SVG fill using a pattern. For example the following SVG would trigger this problem:
Code: HTML/ASPX
<svg
xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:NS1="dsrs"
NS1:xmlns:xlink="http://www.w3.org/1999/xlink"
width="20" height="20" viewBox="0 0 20 20">
<defs>
<pattern x="0" width="10" height="10"
patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse"
id="test-pattern" y="5" patternTransform="scale(1.5)">
<rect x="1" y="4" width="4" height="4"
transform="rotate(45 1 2.5)" fill="#aed3f0"
style="stroke:#231f20; stroke-width: 1"></rect>
</pattern>
</defs>
<g>
<rect width="20" height="20"
style="fill: url("#test-pattern");">
</rect>
</g>
</svg>
Note inside this SVG file the rect is filled with pattern "test-pattern". Whenever a pattern is used in SVG, the SVG render would generate a bitmap for that pattern and then apply that bitmap wherever the pattern is to be applied. This process loses the benefits of the vector nature of the SVG image. The same process occurs when rendering to the screen as well --- however if you zoom in on the screen, the rendering process is executed again thus a bigger (and nicer looking) bitmap is rendered. However the same does not occur with PDF file. The original small image is rendered when the PDF file is generated and if you zoom in on the PDF file, it simply enlarges the original small image on screen.
In order to avoid this, you must avoid using patterns in your SVG file. One way to do this is to put each icon in a separate SVG file (for example, one for checkerboard, one for diamond) and then use multiple images element to repeat the icon instead of relying on SVG pattern to repeat it inside a single SVG.
Sorry that there isn't a simpler workaround. Please feel free to let us know if you still have any questions.
Thanks!