Please add shape-rendering to the SVG QR-Code
AndreasKarz opened this issue · 11 comments
Since the QR code has only horizontal and vertical edges, it is important to set the 'shape-rendering' of the SVG to 'crispEdges'. This way the QR code is always sharply displayed, even if the SVG is reduced or enlarged. (no anti-aliasing).
This makes QR codes easier and faster to scan and screenshot tests more reliable.
Can someone please implement this in the SVG generator?
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering
Thanks for the suggestion. It sounds like a reasonable addition and shouldn't be too difficult to implement.
In all the applications I've used it so far, the QR code was rendered with sharp edges. Can you describe a specific example / context / environment / setup where the shape-rendering attribute makes a difference and that I could use for testing?
I have put it a sample in the Attachements -- you will see the deference. With shape rendering also the phone have less problems to scan the QR code. In the ZIP I have insert the two SVGs, with and without shape rendering.
And can you please move the "fill" property from the path at the first position in the properties? Otherwise, the path will be first rendered with the default color from the browser and then set to black. This will make problems with screenshot tests.
<svg viewBox='0 0 130.394 130.394' xmlns='http://www.w3.org/2000/svg'>
<g font-family='Helvetica,Arial,"Liberation Sans"' transform='translate(0 130.394)'>
<title>Swiss QR Bill</title>
<g transform='translate(0 -0) scale(2.661)'>
<path fill='#000000' shape-rendering='crispEdges' d='M0,-49h7v1h-7zm11,-0h3v2h-3zm3,0h1v1h-1zm2,....' />
</g>
<path fill='#000000' shape-rendering='crispEdges' d='M56.693,-73.701h17.008v17.008h-17.008z' />
<path fill='#FFFFFF' shape-rendering='crispEdges' d='M63.543,-70.709h3.307v11.024h-3.307zm-3.858,3.858h11.024v3.307h-11.024z' />
</g>
</svg>
Thanks for the HTML page with the two QR codes. I was able to spot the difference once I lowered the resolution of my screen. On a high DPI screen it's almost indistinguishable.
Can you explain the problem with the fill attribute in more detail?
-
If the path is first rendered in the default color and then in the specified color, it would indicate that the browser progressively renders the image – even within a path element. I have a hard time believing this as it would often lead to flickering. Are you sure this is what happens?
-
And why does it cause problems with screenshot testing? Does your testing tool take screenshots while rendering hasn't finished? What tool are you using?
Moving the fill attribute is doable but not straight-forward.
Adding the shape-rendering attribute selectively to the QR code will require a change to the Canvas interface, which is usually restricted to major releases. So it's a bigger thing than expected.
Hi Manuel, we make a lot of screenshot tests (Selenium) and at the moment we need a short timeout of 500ms to be ensure we have the black color.
Without the timeout we have some flickering results (you can't see it with your eye, but Selenium keeps tripping over it) and we have analyze this. So when there are differences between the screenshots, we saw, that the difference is only the drawing color, wich is sometime the default font color set with CSS. With the timeout it works perfect, but it's ugly to use timeouts in automated tests.
Yes, I think with the high DPI screens you wont see the difference. But on windows office machines you see it, when you resize the QR code.
I would like to work on the project, but Java is unfortunately so not my world.
I might have figured a way to implement it without changing the Canvas interface. Have a look at the crisp-edges branch. Can you test it?
If it's too difficult to test the unreleased library, at least have a look at the SVG files in https://github.com/manuelbl/SwissQRBill/tree/crisp-edges/generator/src/test/resources
Wow, perfect, thank you so much -- it is fixed also in the DotNet version? Looks great
Once I release it, it will also b available for .NET as I keep the two variants as close as possible.
Cool, so can you send me you address to andreas.karz@swisslife.ch => I will send you a bottle of wine :-)
Published in version 2.5.3.