i recently tried out the JS-Library signature_pad you can try it HERE and was relly supprised about how good it works.
Now as I wanted to implement it into a little project I discovered a missbehaviour which I did not like:
It exports always the whole Canvas, not just the content. For me I want to export a signature, so I sign the pad and want to just have the sigature.
Now if I export it as PNG/JPG (raster grafics) I indeed can trim it with JavaScript or PHP (Imagemagick) but I want the signature as SVG.
Apparently signature_pad allows to export the drawings as SVG, but again there is all that unused space including.
So my plan is:
- export it as SVG
- trim it after the export on Clientside (Javscript), or Serverside (PHP)
But for this I relly would need a way to trim SVGs.
I will append a example SVG on this thread to make sure everyone can understand what exactly I would like to get trimmed away.
And one more thing: SVG will be exported base64-encoded but I hope I will find a way to just export it as text.
Apparently I can just append PNGs here, but I will provide the sourcecode of the SVG aswell.
begins with <svg viewBox="0 0 664 373" width="664" height="373"
I want it to look like this:
begins with <svg viewBox="70 87.5 367 197" height="197" width="367"
So just changing the viewbox, width and height should be enough to do the trick. But I dont know ow to determinate the most left, right, bottom, top points ever touched by the SVG content.
Does someone know how to do this?