Is it possible to convert SVG files to OTF/TTF? - svg

I'm thinking about using DejaVu font to create a Ruby-like font for CJK scripts.
However I'm not sure about:
does DejaVu support CJK glyphs?
can I use a script to generate new glyphs in SVG then convert/package them in a font file?
By creating new glyphs I mean to append prononciation to non-alphabetical glyphs (e.g. 中+zhōng + 國 guó) already existing. So reuse as much as possible what is already here.
Given data such :
{ '中': 'zhōng', '國': 'guó' }
get final OTF/TTF font result such:

http://icomoon.io/#docs/importing seems* allows to "Import Icons" (aka upload your SVGs), IconMoon then generate a font with these shapes.
*: I never tried myself. May be more troublesome than it seems.
Answer from: https://stackoverflow.com/questions/18479034/

Related

How to convert existing woff / ttf / otf files to a font file supported by report lab?

Understanding The Problem
I've run into a problem. I have a need to convert an svg file with multiple custom fonts into a png. This is supported by svglib. I actually was able to convert one of the fonts into a proper format for svglib to properly transform an svg to a png with the font. The problem is, I don't necessarily know what fonts are going to be "good" fonts and what fonts are going to be "bad" fonts (otf fonts that load for some reason and otf fonts that don't load for some reason), so ideally, I'd have a function in Python 3.x.x to convert all fonts to the same workable format. According to this google group on the subject, its a complicated beast (as of 2013). However, I could load any font (ttf / otf / woff) into this site and use it to get python to pump out a png file, just by having the font in the same directory as the svg file with the same name as the font file as the font family, with the proper results, but I couldn't get the converted font using Python's fonttools to work with the below provided code:
Code
from reportlab.graphics import renderPM
from svglib.svglib import svg2rlg
from fontTools import ttLib
from io import BytesIO
from PIL import Image
# Here I tried to take the font (which I had initially as a woff) and convert it to a ttf.
#woff2.decompress("./my_font.woff", "./my_font.ttf")
# Here I tried to take the original otf and convert it to a ttf
# font = ttLib.TTFont("my_font.otf")
# font.flavor = None
# font.save("my_font.ttf")
buff = BytesIO()
drawing = svg2rlg("./test.svg")
renderPM.drawToFile(drawing, buff, fmt="PNG")
img = Image.open(buff)
# l, w = image.size
# img = img.resize()
new_buff = BytesIO()
img.save("new_test.png", dpi=(600, 600))
Font For Minimal Reproduceable Example
I can upload a demo working font and the same font that is not working with the given format, but before I did that, I wanted to make sure that was part of the SO community guidelines to distribute potentially copyrighted (and other items of this nature with different licenses and EULAs) works - maybe a comment can confirm or deny this (I don't have the EULA, so I will probably find a link to a font that will be reproduceable). I think easiest is for me to find a link to a font online that I can reproduce the problem with, so I will get to looking and update the post with a link, but I mean... come on! I can't be the only person trying to solve this problem?!
Working font example
A non working font example - I could be wrong, but I think if you convert from a ttf to a woff back to a ttf using fonttools that you will be able to reproduce this issue. I'm still looking for an online example.
Problem Statement
So to make sure the problem statement is well articulated, the goal is to: Take any otf / ttf / or woff (even for simplicity sake - just a woff) file and convert it to a ttf file via Python that is supported by reportlab (which would mean it would be supported by svglib).
As unfortunate as it is, I couldn't supply a font to help with the "minimal, reproducible example clause", because finding a font online to replicate this with is very challenging (maybe I wasn't searching in the right place). However, I could convert the font in fontforge and opted for that. I could use the scripting portion of fontforge to accomplish this, so I can use this to convert fonts in bulk, and despite being GPL, after reaching out to the community from fontforge, they said:
We do not consider fonts created with FontForge or scripts run in FontForge to be derivative works of FontForge, which is standard practice for content creation tools and script interpreters. The FontForge license thus has no implication upon the ownership of those fonts and scripts or the owner's right to use and to distribute them. FontForge depends heavily upon a number of GPL libraries at the moment, and that is unlikely to change.
So for my purposes, I am content with this solution.

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.

What is the new syntax for SVG fonts?

I was browsing SVG fonts in MDN, where it is mentioned that <font-face>, <missing-glyph>, <hkern> and <vkern> are depreciated. Only <glyph> is not depreciated. It does not mention anything about a recommended way of specifying the font face properties.
The W3C SVG recommendation also does not say anything about an alternative way of specifying SVG fonts, apart from noting that everything in the <font-face> can be done equivalently in CSS. It does not provide any alternative for <hkern> or <vkern>. I intend to create a standalone SVG file, not to be modified by the site CSS, so I would like to keep the whole font definition in the SVG.
So, what is this obscure new way of specifying SVG fonts?
"SVG fonts" as a data file that uses SVG markup to define a font resource has been deprecated; it turned out to be a bad idea, and ended up not addressing the issues that typography on the web needed addressing. It was added in SVG 1.1 but removed again in SVG 2.0, and almost all browsers that did end up adding support for it removed that support again since.
Instead, all browsers now support "webfonts": regular OpenType fonts packed for the web using the "Web Open Font Format", aka WOFF/WOFF2, based on the OpenType format, which supports several different outline types:
TrueType (quadratic curves and compound glyphs, often with ttf extension, but the extension is literally irrelevant)
Type2 in CFF/CFF2 (cubic curves and arbitrary subroutines, often with otf extension, but again: the extension is wholly irrelevant)
Embedded bitmaps (yes, OpenType fonts can indeed be true bitmap fonts, with as many different bitmaps as necessary to cover as many pixel sizes as necessary)
SVG (that might be surprising, but SVG is the exact same kind of vector graphics language as TT and CFF/CFF2 are, so it made sense to allow glyph outline data to be specified using SVG as well, particularly for fonts that need explicit colour palettes, like emoji fonts)
So if you absolutely need to keep your SVG data around, then make yourself an OpenType-with-SVG-outlines font, and then pack that for the web as a modern WOFF2 (or older WOFF) and you're good to go. There are plenty of online tools to do that for you, but you can also just use something like the open source FontForge application if you want a font that only includes what you need, instead of what online tools foist into them.

How to convert/package SVG files into an OTF/TTF font?

I'm thinking about using Droid font to create a Ruby-like font for CJK scripts.
However I'm not sure if I can create a script to convert/package multiple SVG files/glyphs into one font file?
"New" glyphs creation
For information, I want to create new glyphs –for CJK glyhs– as follow:
put a Chinese glyph (e.g. 中) into a SVG file ;
add the prononciation (e.g. zhōng) to this SVG.
Once all new CJK glyphs have been created in SVG, I need to package my font
Data would come from Unihan datadase.
Goal
I want something similar to the image below but placing the pronunciation to another place and having different orientation.
FontForge has a Python interface. http://fontforge.org/python.html
A glyph object has methods like export and importOutlines.
My code is untested but reading the FontForge docs the export should go like this:
import fontforge
f = fontforge.open("SomeChineeseFont.ext")
# Not sure if this is the right way to select all glyphs. But you'll get there.
for i in f.selection.select.all():
f[i].export("%s.svg" %i)
Now after weeks of editing SVG's (automate this too). It's time to import:
import fontforge
f = fontforge.open("SomeChineeseFont.ext") # Use the orginal font as base
for i in f.selection.select.all():
# Delete the original glyph or make sure your SVG
# only contains the contours you want to add.
f.clear()
f[i].importOutlines("%s.svg" %i)
f.save("SomeRubyLikeChineeseFont.ext")
Is this what you where looking for?

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