Tinus Jackson
Tinus Jackson

Reputation: 3663

Is it possible to convert a SVG to a string p:signature uses?

I'm and getting an SVG signature from a different application and want to save it as a string value so we can use PrimeFaces signature on a current application.

Is this possible?

Current SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" viewBox="0, 0, 1320, 800" height="800" width="1320">
  <g stroke-linejoin="round" stroke-linecap="round" fill="none" stroke="black">
    <path stroke-width="24" d="M1068,420c0,0 0,0 0,0 "/>
    <path stroke-width="27" d="M1068,420c-1,-1 -1,-1 -1,-1 "/>
    <path stroke-width="25" d="M1067,419c1,-1 1,0 3,-1 1,0 1,0 1,0 "/>
  </g>
</svg>

And Primefaces Signature uses a string
Example

{"lines":[[211.91,90.72],[209.91,90.72]]}

Paths extracted from svg .

 M154,223c0,0 0,0 0,0
 M154,223c0,1 0,1 0,3
 M154,226c1,1 1,2 3,3
 M157,229c14,4 14,5 28,8
 M185,237c52,11 52,12 104,20
 M289,257c62,9 62,9 124,13 62,3 62,-1 123,0 65,1 65,2 130,3 43,0 43,0 87,-2 25,-1 26,-2 51,-6
 M804,265c10,-2 10,-3 19,-6

UPDATE
I have tried Suggested Conversion in comment

But the results are not accurate enough to use.

Original vs Converted

Upvotes: 1

Views: 370

Answers (1)

Kukeltje
Kukeltje

Reputation: 12337

You won't (easily) succeed. I tried and many (almost two dozen) svg based 'signatures' I found searching the internet and came to the following conclusion:

  • Most signatures are not lines with a (variable) thinkness/width but outlines
  • Many of them consist of multiple lines constructed in a varying way in SVG
  • Forward written, sometimes going back

Converting these paths to polygons with the referenced code will in some cases get (very) close but in most cases not. You might try improving the code but most likely you will not even get to a 25% accuracy with which I mean that 75% of the conversion will not get close enough.

That brings me to the real issue. This might be an http://xyproblem.info and I'd personally just show the SVG and if it is because of some legacy, I'd selectively show either the new signatures via PrimeFaces signature component and the old ones via SVG or show all via SVG by easily transforming the PrimeFaces signatures to SVG

Upvotes: 1

Related Questions