Exporting Text to SVG

[richmond62]

With the fantastic help of Bernd, "over there", I have a stack that can produce SVG images from text.

https://forums.livecode.com/viewtopic.php?f=7&t=39087

For some odd reason the LiveCode IDE cannot import the resultant SVG images in any meaningful way (and I would suppose the OXT IDE would do no better).

[OpenXTalkPaul]

Doing the cross-site-posting thing again...

richmond62 wrote: ↑Sat May 04, 2024 1:58 pm
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 IDE's Drawing Library's SVG compile' to put SVG data into an 'Image' control (personally I think they should've repurposed the ancient MetaCard equivalent to 'SVG', the 'EPS' control type, instead of making 'image' a sort of dual purpose 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.

[OpenXTalkPaul]

Here's the sort of thing I meant by 'single-line' fonts, used for things like engraving:
https://singlelinefonts.com

Here's some tool (written in C++) that converts TrueType to SVG Paths but it seems to do that via tracing:
https://github.com/donbright/font_to_sv ... me-ov-file

Here's a web page (Javascript app) that can create no-font-SVG 'text' (paths) from Google Fonts, but with Google's Fonts you could probably also get the original files that made the font from its GitHub repo.
https://danmarshall.github.io/google-fo ... e_vignette
The output from that, the SVG has no fonts (or plain text) in it at all:

Hello Richmond.svg.zip

(12.92 KiB) Downloaded 4 times

Here's a tool that embeds SVG Fonts into SVG Files, when font is included inside the SVG file so it should look the same on all platforms.
https://github.com/BTBurke/svg-embed-font