search

endroid / qr-code

QR Code Generator
https://endroid.nl
MIT License
4.33k stars 721 forks source link

Additional SvgWriterCompact class for rendering optimized SVG Markup #424

Closed 4dimage closed 4 months ago

4dimage commented 8 months ago

I found some display issue when using the SVG graphics in a HTML img-element or simply editing the file in a graphics tool like Inkscape or Affinity. Although the pixel positions are rounded most devices render thin white flashing lines between the blocks. The lower the resolution the stronger the visual artifacts.

This is not only visually disturbing, but also leads to unwanted fine transparent areas when converting the SVG to bitmap raster graphics (e.g. in GIMP) or when the qr-code is used in a design and transparency reduction ist applied on PDF export.

I described the issue and my solution in detail in this live demo: https://demo8.4d-image.de/endroid-qr-code-svgwritercompact/

To solve the display issue i render only one SVG path-element with a combined drawing statement for all blocks at once. This fixes the display error in all tested programms. And significantly reduces the overall filesize as well.

The focus is on simple, solid qr-codes for maximum scan readability. I tested the SVG output OK in Inkscape, Affinity, LibreOffice, GIMP and Illustrator.

Maybe you think the new SvgWriterCompact class is a usefull extension.

endroid commented 4 months ago

@4dimage Thank you, the 5.0.7 version now uses the path definition to create smaller images and avoid the flashing lines.