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

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?

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.

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.

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

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/

Hacking SVG Fonts

I know nothing about SVG. Even less about SVG fonts. However, I need to use them in my web project.
I've created a custom font with fontello and analyzed the format of the SVG file in a text editor. Then I opened an SVG file created with Inkscape (saved as plain SVG) and used its d attribute to create a new glyph in the font.
I couldn't believe that it actually worked ... well, almost ... the glyph appears flipped vertically. I have tried flipping it in Inskcape. However, when I save the file, the original d attribute is left as it was. It just adds a transform with a matrix that flips the coordinate system, but which does now work in the <glyph> tag.
Is there any way I could apply this transformation in the font file, or in Inkscape, to change the d attibute?
Thanks.
I found that, in Inkscape, ungrouping and then grouping the object applies the transformation to the coordinates.

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