Trim SVG in JavaScript or PHP

316 views Asked by At

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:

  1. export it as SVG
  2. 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. SVG

begins with <svg viewBox="0 0 664 373" width="664" height="373"

I want it to look like this:

SVG trimmed

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?

0

There are 0 answers