Exporting text to SVG

[richmond62]

If one could export text from a field in LiveCode to an SVG image this would result in a scaleable image of text that could be fully portable without end-users having to have access to the originating font . . .

https://github.com/danmarshall/google-font-to-svg-path
-

-
I wonder . . .

[dunbarx]

Richmond.

Isn't this another comment about SVG in a thread that you started just a while ago?

Craig

[richmond62]

Not really . . .
-

[richmond62]

This is obviously "off" as I would expect an SVG file containing text to look something like this:

<svg width="201.402" height="76.101" viewBox="0 0 201.402 76.101" xmlns="http://www.w3.org/2000/svg"><g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="#000" style="stroke:#000;stroke-width:0.25mm;fill:#000"><path d="M 20.7 6.3 L 20.7 3.3 Q 20.1 2.1 20.1 1.2 A 1.474 1.474 0 0 1 20.136 0.861 Q 20.269 0.3 20.9 0.3 A 4.851 4.851 0 0 1 21.884 0.406 A 6.314 6.314 0 0 1 22.6 0.6 A 11.901 11.901 0 0 1 30.541 8.696 Q 31.266 11.009 31.379 13.907 A 27.987 27.987 0 0 1 31.4 15 A 28.038 28.038 0 0 1 29.979 23.661 A 36.018 36.018 0 0 1 28.1 28.3 A 10.101 10.101 0 0 1 27.77 28.912 Q 27.069 30.1 26.5

I have excised a lot more 'magic numbers' from this to save space" Richmond.

184.107 45.448 A 4.735 4.735 0 0 0 184.1 45.7 A 4.84 4.84 0 0 0 184.135 46.312 Q 184.218 46.954 184.493 47.25 A 0.792 0.792 0 0 0 185.1 47.5 Z" vector-effect="non-scaling-stroke"/></g></svg>

-

-

What the GPT robot does NOT do is provide a conversion routine to turn TEXT into "those magic numbers".

All that it 'tries' to do is bung an SVG header and an SVG footer at the 2 ends of the text.

[richmond62]

OK, OK, OK:

After 25 "cycles" with ChatGPT 4 I am still getting a line of question marks instead of:
-

Screenshot 2024-05-03 at 19.25.32.png (32.54 KiB) Viewed 820 times

-
I have typed 'Over use of quotation marks" 15 times; each time it has corrected that (but does NOT 'remember').

Tries the same code modifications round and round and round.
-

-
Going away to watch "Pat Garrett and Billy the Kid."

[richmond62]

Cripes: the robot just suggested code containing this:

Code: Select all

   export snapshot from rect (0,0,400,100) of fld "tempField" to file tFilePath & ".svg" as SVG

[bn]

Richmond,

put

<svg width="800" height="800" xmlns="http://www.w3.org/2000/svg">

into field "fHeader"


Put

<text x="50" y="50" font-family="Arial" font-size="16">

into field "fTextStart"

Try this code

Code: Select all

on mouseUp
   put the script of button "b2" into tText   ## or wherever you want your text to come from
   put field "fHeader" into tHeader
   put field "fTextStart" into tStartText
   
   put tHeader & cr into tCollect
   put tStartText & cr after tCollect
   
   repeat for each line aLine in tText
      put "<tspan x=" & quote & "50" & quote && "dy=" & quote & "1.2em" & quote & ">" & aLine &"</tspan>" & cr after tCollect
   end repeat
   put "</text>" & cr & "</svg>" after tCollect
   
   put "svgTestExport.svg" into tFileName
   put specialFolderPath("desktop") & slash & tFileName into tFullPath
   put tCollect into url("binfile:" & tFullPath)
   
end mouseUp

It will save a file "svgTestExport.svg" on the desktop

Kind regards
Bernd

[richmond62]

Oh, Bernd: I almost love you: and the thing that prevents that is the frustration I feel from wrestling with a robot for about 4 hours.

[richmond62]

And so:
-

-

Code: Select all

on mouseUp
   put fld "f1" into tText
   put fld "fHeader" into tHeader
   put fld "fTextStart1" into tTextStart1
   put the textFont of fld "f1" into fld "fTextStart2"
   put fld "fTextStart2" into tTextStart2
   put fld "fTextStart3" into tTextStart3
   put the textSize of fld "f1" into fld "fTextStart4"
   put fld "fTextStart4" into tTextStart4
   put fld "fTextStart5" into tTextStart5
   ----
   put tHeader & cr into tCollect
   put tTextStart1 & tTextStart2 & tTextStart3 & tTextStart4 & tTextStart5 & cr after tCollect
   ---
   repeat for each line aLine in tText
      put "<tspan x=" & quote & "50" & quote && "dy=" & quote & "1.2em" & quote & ">" & aLine &"</tspan>" & cr after tCollect
   end repeat
   put "</text>" & cr & "</svg>" after tCollect
   
   put "svgTestExportJRM.svg" into tFileName
   put specialFolderPath("desktop") & slash & tFileName into tFullPath
   put tCollect into url("binfile:" & tFullPath)
end mouseUp

-
Opening the document in a web browser I get this:
-

-
Opening the document in Inkscape I get this:
-

Screenshot 2024-05-04 at 10.54.00.png (5.79 KiB) Viewed 734 times

-
Opening the document in a text editor I get this:

"svg width="800" height="800" xmlns="http://www.w3.org/2000/svg">
<text x="50" y="50" font-family="Devawriter Regular" font-size="12">
<tspan x="50" dy="1.2em">????</tspan>
</text>
</svg>"

[richmond62]

Wondering if the thing took umbrage at my complex font I thought I would try this:
-

-

Screenshot 2024-05-04 at 10.59.40.png (42.88 KiB) Viewed 731 times

-
Using an extremely 'pedestrian' font.

I got this in a browser:
-

[richmond62]

And this in Inkscape:
-

Screenshot 2024-05-04 at 11.03.09.png (4.84 KiB) Viewed 731 times

-
So, just to see how far things would stretch I tried this:
-

-
And got this in Inkscape:
-

Screenshot 2024-05-04 at 11.07.09.png (6.91 KiB) Viewed 730 times

-
So, NO, I am sorry, that does not "do it for me".

[bn]

Richmond,

What happens if you

Code: Select all

put textEncode(tText, "UTF-8") into tText

?

Kind regards
Bernd

[bn]

this is the svg

Kind regards
Bernd

[richmond62]

Well, that certainly works for Bulgarian:
-

Screenshot 2024-05-04 at 12.19.26.png (7.24 KiB) Viewed 714 times

-
Although 'font retention' does not seem to be there when I open the result in Inkscape:
-

Screenshot 2024-05-04 at 12.20.30.png (6.77 KiB) Viewed 714 times

-
Let's live dangerously and try a bit of Sanskrit in Devanagari script:
-

[richmond62]

-
Browser:
-

Screenshot 2024-05-04 at 12.24.27.png (4.38 KiB) Viewed 713 times

-
No 'font retention'.

Inkscape:
-

Screenshot 2024-05-04 at 12.25.18.png (4 KiB) Viewed 713 times

-
That is wonderful insofar as re both size and font everything looks the way it did in the text field.

Now. let's try and import that SVG back into LiveCode.