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>