1

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

Tinus Jackson
  • 2,255
  • 1
  • 18
  • 47
  • See https://stackoverflow.com/questions/26027313/how-to-load-and-parse-svg-documents – Jasper de Vries Jun 20 '18 at 12:40
  • @JasperdeVries I am currently reading the paths. Just need to know how the lines from primefaces gets pointed so i can convert the path to the primefaces json string – Tinus Jackson Jun 20 '18 at 13:11
  • PrimeFaces uses straight, absolute point to absolute point lines. – Jasper de Vries Jun 20 '18 at 14:36
  • 1
    https://takuro.ws/2014/03/18/convert-svg-path-data-to-svg-polygon-data/ – Jasper de Vries Jun 20 '18 at 14:41
  • @JasperdeVries i have tried that, but the result is not accurate enough. – Tinus Jackson Jun 27 '18 at 07:49
  • Tried adding more 'sampling' points? And tried with a more simple 'signature' first that has just one line, no 'dots' or other lines, or no 'width/presure' indication? I if you do these you'll see you will get close. This is (as far as I can see) the only way to go. – Kukeltje Jun 27 '18 at 12:35

1 Answers1

1

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

Kukeltje
  • 11,924
  • 4
  • 19
  • 44