Add ability to get an SVG without encoding to base64 and decoding it again.

[rodrigoaguilera]

Do you want to request a feature or report a bug?
Feature

What is the current behavior?
When saving an SVG as a text file, given the current signature_pad API it is mandatory to encode to base64 first.

**Which versions of SignaturePad?
4.0.10

What is the expected behavior?
I want to be a little more efficient and save the step of encoding to base64 since SVG is already a text format.

I would expose a toSVG() method that returns the SVG string and refactor a bit the private _toSVG to do the base64 operations.

With jpeg and png I can skip the base64 encoding just using toBlob on the canvas.

More info https://css-tricks.com/probably-dont-base64-svg/

What do you think?

[UziTech]

I think that would be fine to expose a toSVG() function. @szimek any thoughts?

[Sparticuz]

for some reason I couldn't get install node_modules to test this, something up with installing rollup, idk... regardless, I think this might be all that is needed to get this working.

diff --git a/src/signature_pad.ts b/src/signature_pad.ts
index 1422a20..0d1c7f5 100644
--- a/src/signature_pad.ts
+++ b/src/signature_pad.ts
@@ -141,7 +141,7 @@ export default class SignaturePad extends SignatureEventTarget {
   public toDataURL(type = 'image/png', encoderOptions?: number): string {
     switch (type) {
       case 'image/svg+xml':
-        return this._toSVG();
+        return 'data:image/svg+xml;base64,' + btoa(this.toSVG());
       default:
         return this.canvas.toDataURL(type, encoderOptions);
     }
@@ -580,7 +580,7 @@ export default class SignaturePad extends SignatureEventTarget {
     }
   }
 
-  private _toSVG(): string {
+  public toSVG(): string {
     const pointGroups = this._data;
     const ratio = Math.max(window.devicePixelRatio || 1, 1);
     const minX = 0;
@@ -638,7 +638,6 @@ export default class SignaturePad extends SignatureEventTarget {
       },
     );
 
-    const prefix = 'data:image/svg+xml;base64,';
     const header =
       '<svg' +
       ' xmlns="http://www.w3.org/2000/svg"' +
@@ -666,6 +665,6 @@ export default class SignaturePad extends SignatureEventTarget {
     const footer = '</svg>';
     const data = header + body + footer;
 
-    return prefix + btoa(data);
+    return data;
   }
 }

I made the _toSVG() function public, renamed it to toSVG() and then moved the btoa function the the toDataURL(). This shoudn't be a breaking change unless you count private functions as breaking.

[UziTech]

Thanks! I'll take a look at this this weekend.

[github-actions]

🎉 This issue has been resolved in version 4.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀