datalog/barcode-svg

More optimized svg node

Opened this issue · 0 comments

asl97 commented

Let me start by saying, great work on the library.

No disrespect, but to call it highly optimized SVG nodes is kind of funny, I thought it would be made by drawing lines with L or l but nope, it goes point to point and then end the path with 'z'.

After looking into it further, I realize it could be done using stroke-dasharray and since it alternate between black and white, one can much easier understand what's happening compare to the "M h V h v z" 'black magic' of a path.

It also goes from forward to back instead of back to forward.

Example using 123

<svg viewBox="0 0 320 140" width="320" height="80" fill="#000000" shape-rendering="crispEdges" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path transform="matrix(4.1176,0,0,48.0000,20,16)" d="M66,1h2V0h-2v1zM64,1h1V0h-1v1zM60,1h3V0h-3v1zM55,1h2V0h-2v1zM52,1h1V0h-1v1zM48,1h2V0h-2v1zM44,1h1V0h-1v1zM39,1h3V0h-3v1zM37,1h1V0h-1v1zM33,1h2V0h-2v1zM31,1h1V0h-1v1zM26,1h3V0h-3v1zM22,1h2V0h-2v1zM19,1h2V0h-2v1zM14,1h3V0h-3v1zM11,1h1V0h-1v1zM6,1h1V0h-1v1zM3,1h1V0h-1v1zM0,1h2V0h-2v1z"></path>

    <line transform="matrix(4.1176,0,0,48.0000,20,16)" stroke-dasharray="2 1 1 2 1 4 1 2 3 2 2 1 2 2 3 2 1 1 2 2 1 1 3 2 1 3 2 2 1 2 2 3 3 1 1 1 2" stroke="black" stroke-width="1"  x1="0" y1="2" x2="68" y2="2"></line>
</svg>

image