Page 1 of 2
Exporting text to SVG
Posted: Fri May 03, 2024 3:09 pm
by 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 . . .
Re: Exporting text to SVG
Posted: Fri May 03, 2024 3:14 pm
by dunbarx
Richmond.
Isn't this another comment about SVG in a thread that you started just a while ago?
Craig
Re: Exporting text to SVG
Posted: Fri May 03, 2024 3:27 pm
by richmond62
Re: Exporting text to SVG
Posted: Fri May 03, 2024 3:47 pm
by 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.
Re: Exporting text to SVG
Posted: Fri May 03, 2024 5:27 pm
by 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 3689 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."
Re: Exporting text to SVG
Posted: Fri May 03, 2024 5:35 pm
by 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
Re: Exporting text to SVG
Posted: Fri May 03, 2024 6:08 pm
by bn
Richmond,
put
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
Re: Exporting text to SVG
Posted: Fri May 03, 2024 7:09 pm
by 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.
Re: Exporting text to SVG
Posted: Sat May 04, 2024 8:47 am
by 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 3603 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>"
Re: Exporting text to SVG
Posted: Sat May 04, 2024 9:02 am
by 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 3600 times
-
Using an extremely 'pedestrian' font.
I got this in a browser:
-
Re: Exporting text to SVG
Posted: Sat May 04, 2024 9:03 am
by richmond62
And this in Inkscape:
-
- Screenshot 2024-05-04 at 11.03.09.png (4.84 KiB) Viewed 3600 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 3599 times
-
So, NO, I am sorry, that does not "do it for me".
Re: Exporting text to SVG
Posted: Sat May 04, 2024 9:42 am
by bn
Richmond,
What happens if you
Code: Select all
put textEncode(tText, "UTF-8") into tText
?
Kind regards
Bernd
Re: Exporting text to SVG
Posted: Sat May 04, 2024 9:54 am
by bn
this is the svg
Kind regards
Bernd
Re: Exporting text to SVG
Posted: Sat May 04, 2024 10:20 am
by richmond62
Well, that certainly works for Bulgarian:
-
- Screenshot 2024-05-04 at 12.19.26.png (7.24 KiB) Viewed 3583 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 3583 times
-
Let's live dangerously and try a bit of Sanskrit in Devanagari script:
-
Re: Exporting text to SVG
Posted: Sat May 04, 2024 10:27 am
by richmond62
-
Browser:
-
- Screenshot 2024-05-04 at 12.24.27.png (4.38 KiB) Viewed 3582 times
-
No 'font retention'.
Inkscape:
-
- Screenshot 2024-05-04 at 12.25.18.png (4 KiB) Viewed 3582 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.