Exporting text to SVG

[richmond62]

-
Ouch: that is a bit disappointing.

But that problem is NOT, Bernd, with your code, it has more to do with the fact that LiveCode can only adequately render a subset of all SVG files.

Thank you very much indeed for both your help and your forbearance.

[richmond62]

I mucked around with the code so that an SVG is exported that is not automatically 800 x 800 pixels:

Code: Select all

on mouseUp
   set the width of fld "f1" to the formattedWidth of fld "f1"
   set the height of fld "f1" to the formattedHeight of fld "f1"
   set the left of fld "f1" to 40
   set the top of fld "f1" to 40
   --
   put fld "f1" into tText
   put textEncode(tText, "UTF-8") into tText
   --
   put the width of fld "f1" into WIDD
   put the height of fld "f1" into HITE
   --
   put fld "fHeader1" into tHeader1
   put fld "fHeader2" into tHeader2
   put fld "fHeader3" into tHeader3
   put (tHeader1 & WIDD & tHeader2 & HITE & tHeader3) into fld "fHeader4"
   --
   put fld "fHeader4" 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

However the exported SVG image comes across as a bit odd when it is opened in a browser:
-

Screenshot 2024-05-04 at 16.43.02.png (4 KiB) Viewed 465 times

-
In the text field:
-

Screenshot 2024-05-04 at 16.46.22.png (18.64 KiB) Viewed 464 times

-
In Inkscape:
-

Screenshot 2024-05-04 at 16.47.42.png (14.86 KiB) Viewed 464 times

-
The whole text IS a selectable vector object.

[richmond62]

I have a feeling that the SVG parsers in the browser and Inkscape are reading the WIDTH of the image wrongly.
-

SVG from Text 2.livecode.zip

Stack.

(1.76 KiB) Downloaded 3 times

-
I am now going to "fool around" with image widths . . .

Code: Select all

on mouseUp
   set the width of fld "f1" to ((the formattedWidth of fld "f1") * 1.5)
   set the height of fld "f1" to the formattedHeight of fld "f1"
   set the left of fld "f1" to 40
   set the top of fld "f1" to 40
   --
   ask "What do you want to call your image?"
   put it into IMENA
   --
   put fld "f1" into tText
   put textEncode(tText, "UTF-8") into tText
   --
   put the width of fld "f1" into WIDD
   put the height of fld "f1" into HITE
   --
   put fld "fHeader1" into tHeader1
   put fld "fHeader2" into tHeader2
   put fld "fHeader3" into tHeader3
   put (tHeader1 & WIDD & tHeader2 & HITE & tHeader3) into fld "fHeader4"
   --
   put fld "fHeader4" 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 (IMENA & ".svg") into tFileName
   put specialFolderPath("desktop") & slash & tFileName into tFullPath
   put tCollect into url("binfile:" & tFullPath)
end mouseUp

Lines changed:

1. setting width of text field:

Code: Select all

set the width of fld "f1" to ((the formattedWidth of fld "f1") * 1.5)

2. lines to ask end-user for a name for the exported SVG file:

Code: Select all

ask "What do you want to call your image?"
   put it into IMENA

3. export SVG name:

Code: Select all

put (IMENA & ".svg") into tFileName

The exported SVG now takes into account the full width of the text:
-

Screenshot 2024-05-04 at 16.59.32.png (4.24 KiB) Viewed 462 times

-
That does NOT solve the problem of setting the SVG up in such a way that LiveCode can import it.
-

SVG from Text 3.livecode.zip

Stack.

(1.81 KiB) Downloaded 4 times

[richmond62]

I have downloaded a free SVG image from the internet that CAN be imported into LiveCode:
-

-

Beetle.svg.zip

Sample SVG image

(3.3 KiB) Downloaded 5 times

-
Examining that image in a text editor I notice the signal difference between it and my exported SVG image is that it contains this text at the start:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010 ... /svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="652px" height="483px"

while my exported SVG starts like this:

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

So I wonder if . . .

NO: that appears to make no difference at all.

[richmond62]

I have just used this service:

https://www.vertopal.com/

to produce an SVG image from my text (which is far, far inferior to what LiveCode is pumping out):
-

Screenshot 2024-05-04 at 17.23.28.png (2.41 KiB) Viewed 456 times

-
Opening that file in a text editor I can see why it is "what it is":

"Created by potrace 1.16, written by Peter Selinger 2001-2019", and it is no very great help at all.

I suspect the online thing takes a snapshot of the text and then performs potrace.

Inkscape does a lot, lot better than vertopal:
-

Screenshot 2024-05-04 at 17.29.29.png (19.4 KiB) Viewed 455 times

-
Imported screensnap at top, 'trace bitmap' below.

[bn]

Richmond,

When you want to display your svg in LC you can use the browser:

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title>dings</title>
	<meta name="generator" content="BBEdit 14.6" />
</head>
<body>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="652px" height="483px" viewBox="0 0 6520 4830" preserveAspectRatio="xMidYMid meet">
<g id="layer1" fill="#000000" stroke="none">
 <path d="M2370 4515 c-36 -18 -65 -37 -64 -42 1 -20 24 -63 34 -63 5 0 10 -6 10 -13 0 -7 19 -43 43 -78 23 -36 48 -74 55 -85 6 -10 16 -29 22 -41 5 -13 14 -23 20 -23 5 0 10 -6 10 -14 0 -7 9 -25 21 -40 16 -21 29 -26 64 -26 24 0 46 4 49 9 3 5 72 12 153 16 82 4 153 11 158 15 6 4 55 9 110 11 l100 4 3 -28 c2 -16 -1 -34 -6 -40 -6 -7 -13 -103 -17 -215 -4 -111 -11 -205 -16 -208 -5 -3 -9 -23 -9 -45 0 -38 -1 -39 -34 -39 -19 0 -37 4 -41 9 -3 5 -31 13 -63 17 -31 3 -61 10 -67 14 -5 5 -32 11 -60 15 -27 4 -54 11 -60 15 -5 4 -38 11 -73 15 -34 4 -64 10 -67 15 -3 4 -31 11 -62 15 -32 4 -62 10 -68 15 -5 4 -28 11 -51 14 -43 8 -58 23 -149 159 -21 31 -42 57 -45 57 -4 0 -11 8 -14 18 -9 24 -33 64 -43 71 -4 3 -26 32 -47 64 -22 31 -43 57 -46 57 -4 0 -11 8 -14 18 -9 24 -32 63 -43 71 -4 3 -12 13 -18 22 -42 66 -86 127 -99 138 -9 7 -16 19 -16 26 0 13 -131 85 -155 85 -7 0 -59 -24 -115 -52 -56 -29 -138 -72 -182 -95 -44 -22 -83 -45 -87 -50 -13 -17 -162 -85 -176 -79 -8 3 -29 26 -47 51 -17 25 -35 45 -39 45 -4 0 -9 8 -12 19 -4 18 -95 71 -122 71 -20 0 -43 -42 -50 -93 -7 -44 -6 -47 18 -56 14 -5 28 -15 32 -20 3 -6 32 -28 62 -49 85 -56 84 -55 111 -80 45 -40 66 -39 166 10 187 92 243 118 253 118 6 0 46 18 89 40 81 41 104 44 104 13 0 -10 7 -31 15 -47 8 -15 15 -36 15 -45 0 -9 7 -29 15 -45 8 -15 15 -36 15 -45 0 -9 6 -28 14 -42 7 -14 16 -47 20 -72 4 -26 11 -49 15 -52 5 -2 12 -22 16 -42 4 -21 11 -43 16 -49 4 -6 10 -26 11 -45 l3 -34 -85 -3 c-46 -2 -89 -7 -95 -11 -5 -5 -147 -12 -315 -15 -168 -4 -309 -12 -314 -17 -6 -5 -46 -9 -89 -9 -47 0 -89 -5 -105 -14 -53 -27 -119 -56 -129 -56 -34 0 -133 -71 -133 -96 0 -6 -7 -15 -16 -18 -13 -5 -14 -24 -8 -143 3 -76 10 -142 15 -148 5 -5 9 -28 9 -50 0 -37 16 -66 136 -246 83 -123 160 -227 195 -262 33 -31 59 -61 59 -65 0 -9 153 -162 162 -162 4 0 29 -21 56 -47 27 -27 64 -60 83 -74 l34 -26 -33 -39 c-18 -21 -53 -60 -77 -85 -25 -26 -45 -51 -45 -56 0 -16 -35 -43 -45 -35 -6 4 -20 27 -33 52 -64 122 -81 153 -89 159 -4 3 -21 31 -36 61 -15 30 -42 82 -60 115 -32 60 -33 60 -82 63 -27 2 -54 7 -60 11 -5 5 -74 12 -153 15 -128 7 -143 6 -149 -10 -3 -9 -1 -25 5 -35 7 -10 12 -26 12 -35 0 -9 17 -34 39 -55 37 -37 41 -39 104 -39 36 0 69 -4 72 -10 3 -5 24 -10 45 -10 52 0 70 -8 70 -34 1 -11 9 -39 20 -61 11 -22 19 -48 20 -57 0 -9 4 -19 9 -22 5 -4 12 -24 16 -46 4 -22 10 -42 15 -45 4 -3 11 -21 15 -41 3 -20 10 -44 14 -53 27 -56 41 -90 46 -119 10 -47 55 -88 108 -96 40 -6 54 -1 172 58 70 35 131 68 134 73 3 4 59 35 125 67 106 52 121 57 145 46 14 -6 111 -53 214 -103 l188 -92 -6 -54 c-3 -30 -9 -59 -14 -65 -5 -6 -12 -30 -16 -53 -4 -24 -10 -45 -15 -48 -4 -3 -11 -26 -15 -52 -4 -27 -10 -52 -15 -58 -4 -5 -11 -27 -14 -49 -4 -21 -11 -46 -16 -55 -5 -9 -11 -28 -14 -42 -6 -28 -28 -39 -83 -39 -17 0 -34 -4 -37 -9 -3 -5 -44 -12 -91 -16 -47 -4 -87 -10 -90 -15 -3 -4 -43 -11 -90 -15 -47 -4 -87 -10 -90 -15 -2 -4 -42 -11 -87 -15 -46 -4 -87 -10 -93 -15 -5 -5 -23 -10 -40 -12 -32 -3 -28 2 -141 -215 l-37 -71 22 -36 c47 -75 117 -24 157 114 11 40 35 70 55 70 10 0 20 4 23 9 3 5 51 12 106 16 55 4 102 11 105 15 3 4 50 11 105 15 55 4 102 11 105 15 3 4 50 11 105 15 55 4 103 11 106 16 3 5 17 9 32 9 20 0 42 16 87 66 33 37 117 126 188 198 70 73 127 135 127 139 0 4 25 31 55 61 l56 54 77 -5 c42 -3 81 -9 87 -14 5 -5 27 -9 50 -10 69 -2 88 -12 112 -59 13 -25 23 -50 23 -56 0 -19 38 -89 59 -108 12 -11 21 -25 21 -33 0 -7 6 -16 14 -19 8 -3 17 -13 20 -22 9 -24 33 -64 43 -71 26 -19 103 -153 103 -180 0 -9 7 -26 15 -38 8 -11 16 -36 17 -54 2 -27 -1 -34 -17 -37 -11 -1 -29 -7 -40 -12 -11 -5 -46 -12 -77 -15 -32 -4 -60 -10 -63 -15 -3 -4 -36 -11 -75 -15 -39 -4 -72 -11 -75 -15 -3 -4 -31 -11 -62 -15 -32 -4 -62 -10 -68 -13 -5 -4 -32 -11 -59 -17 -32 -6 -53 -17 -60 -30 -6 -11 -17 -24 -23 -28 -7 -4 -13 -14 -13 -21 0 -8 -7 -19 -15 -26 -25 -21 -105 -146 -105 -165 0 -32 20 -55 48 -55 46 0 73 22 126 99 28 41 58 77 66 81 47 23 73 29 145 35 44 4 85 10 90 15 6 4 50 11 100 14 49 4 94 11 100 15 5 5 33 12 60 16 28 4 55 10 60 15 6 4 32 11 59 15 27 4 60 14 73 22 23 15 31 47 14 57 -5 3 -12 30 -16 61 -3 30 -10 57 -15 60 -4 2 -11 29 -15 60 -3 30 -10 57 -15 60 -4 2 -11 29 -15 60 -3 30 -10 57 -14 60 -5 2 -11 28 -15 56 -4 28 -11 58 -16 67 -5 10 -13 43 -18 75 l-9 57 73 0 c40 0 76 5 79 10 3 6 44 10 89 10 l83 0 170 85 171 85 53 -11 c30 -6 59 -15 64 -19 6 -4 30 -11 55 -15 25 -4 51 -12 59 -18 18 -15 164 -15 182 0 30 24 76 19 109 -12 16 -16 30 -34 30 -41 0 -7 6 -17 13 -21 8 -4 17 -15 21 -23 11 -24 30 -54 46 -75 34 -42 465 -475 474 -475 5 0 24 -11 42 -25 18 -14 43 -29 56 -35 26 -11 50 -25 95 -57 17 -13 42 -27 55 -33 25 -11 47 -24 93 -56 42 -29 113 -64 129 -64 8 0 27 -7 42 -15 59 -31 138 -8 174 50 31 50 26 62 -37 91 -32 14 -70 33 -85 40 -14 8 -33 14 -41 14 -12 0 -56 17 -97 39 -9 5 -31 12 -50 16 -19 4 -44 14 -55 21 -11 8 -27 14 -36 14 -20 0 -78 29 -94 47 -9 10 -139 101 -184 128 -9 6 -20 16 -24 23 -4 6 -13 12 -20 12 -7 0 -63 51 -124 113 -112 112 -113 112 -197 281 -52 105 -82 175 -78 185 22 51 128 257 137 263 14 10 858 -3 870 -13 5 -5 76 -9 158 -9 147 0 151 -1 212 -31 52 -25 71 -30 121 -27 l59 3 3 44 c3 34 -1 48 -19 65 -37 35 -73 56 -95 56 -12 0 -35 7 -50 15 -16 8 -40 15 -54 15 -15 0 -30 4 -35 9 -6 5 -196 13 -430 17 -231 3 -424 10 -430 14 -5 4 -84 10 -174 13 -90 4 -169 11 -175 17 -7 5 -32 48 -56 96 -40 81 -46 87 -96 110 -29 13 -59 24 -68 24 -24 0 -75 32 -133 85 -125 113 -161 153 -168 186 -4 18 -11 40 -16 49 -4 8 -16 32 -25 53 -19 44 -11 57 38 57 15 0 29 4 32 9 3 5 42 12 86 16 44 4 82 11 85 15 3 4 35 11 72 15 36 4 74 11 82 15 9 5 39 12 66 17 l50 8 10 50 c6 28 13 55 16 60 4 6 10 35 14 65 4 30 11 60 15 65 4 6 11 38 15 73 4 34 11 64 15 67 4 3 11 29 15 58 3 28 10 61 14 72 5 11 12 34 17 50 l10 30 74 -3 c41 -2 79 -8 84 -13 6 -5 27 -9 48 -9 31 0 41 5 49 24 7 14 9 36 5 49 -9 39 -62 85 -104 93 -20 4 -41 10 -47 14 -5 4 -28 11 -50 15 -22 4 -44 10 -50 15 -5 5 -27 11 -47 15 -35 7 -38 5 -49 -21 -6 -16 -15 -36 -19 -45 -5 -9 -12 -33 -15 -53 -4 -20 -11 -38 -15 -41 -5 -3 -11 -23 -15 -45 -4 -22 -11 -42 -16 -46 -5 -3 -9 -13 -9 -22 -1 -9 -9 -35 -20 -57 -11 -22 -19 -47 -20 -56 0 -9 -7 -30 -15 -45 -8 -16 -15 -36 -15 -45 0 -9 -7 -30 -15 -45 -8 -16 -15 -38 -16 -49 0 -11 -8 -33 -18 -50 l-18 -30 -133 -3 c-82 -2 -137 1 -144 8 -6 6 -71 10 -160 10 l-151 0 -168 85 c-93 46 -175 89 -182 95 -8 7 -17 28 -21 49 -4 20 -10 41 -14 46 -5 6 -11 31 -15 58 -4 26 -11 49 -15 52 -5 3 -11 24 -15 48 -4 23 -11 47 -15 52 -4 6 -11 31 -14 57 -4 26 -11 50 -17 53 -5 4 -9 18 -9 33 0 15 -6 39 -14 53 -7 14 -16 47 -20 72 -4 26 -11 49 -15 52 -5 2 -12 29 -16 60 -3 30 -10 57 -15 60 -5 3 -12 26 -16 51 -8 58 -48 99 -104 108 -55 9 -449 -5 -456 -16 -8 -12 -112 -10 -120 3 -4 7 -9 43 -12 81 -3 38 -9 71 -13 74 -5 3 -9 19 -9 35 0 21 -6 32 -22 39 -13 6 -36 19 -53 29 -38 25 -38 25 -115 -14z"/>
 </g>

</svg>
</body>
</html>

Put above into a field an pull a browser widget onto the card

A button with this script:

Code: Select all

on mouseUp
   set the htmlText of widget 1 to field 1
end mouseUp

shows you the beetle in the browser.

for Deva...

Code: Select all

<html>
<head>
	<title>Devana</title>
	<meta name="generator" content="BBEdit 14.6" />
</head>
<body>
<svg width="800" height="800" xmlns="http://www.w3.org/2000/svg">
<text x="50" y="50" font-family="Arial" font-size="16">
<tspan x="50" dy="1.2em">विद्यार्थी</tspan>
<tspan x="50" dy="1.2em">Attention</tspan>
</text>
</svg>
</body>
</html>

Kind regards
Bernd

[bn]

I just found out that you do not need the HTML stuff, just the SVG stuff.

Code: Select all

<svg width="800" height="800" xmlns="http://www.w3.org/2000/svg">
<text x="50" y="50" font-family="Arial" font-size="16">
<tspan x="50" dy="1.2em">विद्यार्थी</tspan>
<tspan x="50" dy="1.2em">Attention</tspan>
</text>
</svg>

set the htmlText of widget "myBrowser" to above does the trick

Kind regards
Bernd

[richmond62]

However, I have no wish to display SVG images in a browser, I might want to import SVGs as vector objects to use as, say, scaleable icons/buttons.

[PaulDaMacMan]

However, I have no wish to display SVG images in a browser, I might want to import SVGs as vector objects to use as, say, scaleable icons/buttons.

Code: Select all

<svg width="800" height="800" xmlns="http://www.w3.org/2000/svg">
<text x="50" y="50" font-family="Arial" font-size="16">
<tspan x="50" dy="1.2em">विद्यार्थी</tspan>
</text>
</svg>

That svgTestExport.svg file doesn't contain any 'image', I think you're slightly off in your wording.
What that is, is a string of unicode text styled/wrapped in XML tags to be in 'SVG format'.
'Image' to me means pixel bitmap, which CAN be embedded into an SVG, but such embedded bitmap data is no more resolution independent than any PNG file would be.

What you seem to want is the vector path outlines of glyphs in a font, so that the original font is no longer needed at all (which could potentially have licensing implications).

So what you really want to do is either embed your special font into your SVG. OR...
Convert/extract the desired glyphs from that font and convert them into path drawing strings (those magical numbers, which are actually strings of drawing commands) and possibly paint properties, which would then get embedded into your SVG XML. About 6 years ago Hermann Hoch (R.I.P.) made a widget called 'SVG Text' that used 'single-line fonts' (which are the sort of fonts seen in CAD, made of stroke only, no filled shapes), that is a nice proof of this concept.

I don't know how to extract a glyphs path data from glyphs in an OpenType.OTF or TrueType.TTF programmatically, but alternatively there are SVG 'webfonts' available on the net which have the character's SVG Path data in SVG XML tags which can fairly easily be extracted via script (guess who has already done this ). You can export an OpenType.OTF or TrueType.TTF to such an SVG 'webfont' using the open-source FontForge (which probably uses some other libraries to do this trick).

As you mentioned using the Drawing Library's SVG compile' to put SVG data into an 'Image' control does not support all SVG features such as Text in SVG files (unless LC has added support for that sometime since Sept. 2021). Of course the browser widget should display them the way a web browser would, but even that method would need the font to be loaded if you want to ensure identical appearance of the text/font.