Render a custom "symbol font" in the browser - browser

I am working on an application in which I need to support a text box where certain strings are converted to symbols, i.e. custom emoji. The symbols require color and which are not part of any existing emoji set as far as I know. How can this be accomplished?
I looked into making my own font via FontForge and drawing the symbols as svg files. However, so far I have not figured out how to support color.

Related

converting glyphs to SVGs

i'm building a website and wanted to display a bunch of international (pretty obscure) characters on the splashscreen. out of concern for platform-specific system fonts, instead of typing in those characters as text, i want to embed them as SVGs. does anyone know of an easy way to take the glyphs i'm seeing in my keynote / pdf and convert them to SVGs?
tried a bunch of things - converted keynote to pdf and used several online pdf->svg converters, but that misses some obscure characters and returns a misformatted svg. tried copying and pasting the text into figma and exporting as svg, but figma doesn't render more rare international fonts. i just want to take what i'm seeing on my screen and make those SVGs.
The only thing that occurs to me is to open the fonts or drawings in an editor like Adobe Illustrator or Inskcape and edit them there and download them as svg

What technology has been used to generate this dynamic text on SVG and convert them to paths while auto adjusting the width?

he following banner is an example of what i want:
https://top.gg/api/widget/535064930727100427.svg
https://top.gg/api/widget/698275428976164945.svg
It's automatically generated and contains dynamic text which causes the "background color" to automatically adjust its size to it as well as have a border radius.
The text and shapes are all paths when I look at the source.
I would like to know how this has been accomplished as SVG itself does not support a dynamic border radius and background color by default.
Somewhere in the SVG source of the links above it showsid="surface19" and I did some research to see what piece of software or library provides such ID's. The text also seems to automatically be converted to paths, so it's not a hand-written SVG that gets modified programmatically from what it seems.
I did a lot of research before asking this question.

Non-ascii characters get ignored in Godot lable text

I was working on a Hello World scene of Godot.
Instead of using "Hello World" as demonstrated in the tutorial, I tried something like "你好世界", but I found that it didn't work. Anything non-ASCII that I typed in the label text input got ignored.
How can I use non-ASCII characters in Godot labels? Or is it supported at all?
The default Label font in Godot doesn't support non-ASCII characters.
You can try to change the font in your Label node to one that supports non-ASCII symbols by picking a font from your computer, or if it doesn't exist on your device, uploading it from some site like Google Fonts.
After choosing the font for your Label node, open the Custom Fonts property in the editor of the node, and create a DynamicFont, and in Font => Font Data press Load and choose your font in the opened window in the file system (.ttf or any another font extension).

Width of characters in standard svg font

I'm generating some simple svg for data visualization and as part of that I need
to render several lines of text. I'm using the simple text/textspan. However when
determining when to break the line, I need to know the width of the string. Note that I am not using javascript, these are static svg diagrams. My manual mockups work fine on all three platforms(Mac/Windows 10/Linux) in several different browser. I've been searching, but all attempts to find anything about string widths involves dynamic SVG and javascript. Is there any data anywhere on the character widths of the default fonts? I'm using rather simple svg. I'm using the default transform and coordinate space as well. Or do I have to write a javascript test page to return the widths?
Thanks.
The standard font is determined by settings of the renderer. Browsers will use the same font they use for HTML content, set by the user and depending on fonts installed on their system. That means text size will differ for each end user.
There is no way around measuring the text after rendering.

How to force conversion of glyphs to embedded vector paths in Inkscape

I have created an SVG document with Inkscape. It contains text in a non-standard font. The svg xml references the font. So, the vector has a dependency on the font being available on the users machine (or by using web fonts in a web scenario). I want to remove this dependency. I know how to do it manually, but it would be time consuming.
Does Inkscape provide a way to include the required glyphs as pure vectors instead of referencing the font?
You can transform all glyphs to vectors by selecting them and using the object to path function (Path->Object to Path).
Select the text(s) you want to convert to paths, then select "Path > Object to Path".
If the font license allows it you could also use it as a webfont, by adding some css to the svg file, see this example. Inkscape doesn't support webfonts AFAIK, but for editing I guess it might still work if you have the same font installed on your system.

Resources