Using a script to import SVGs into the SVG layer, there is some visual oddness with the Edit view where the bounding box changes depending on whether the Master was selected:
This may relate to how the exported fonts have glyphs partially offset to the right:
This offset is more accentuated with narrower characters, and in this example, causes two characters to moosh up against one another.
Can you send me a sample file (a .glyphs file with one glyph and the .svg file?)
FiraSans-Jyutping1000-solo.glyphs (2.8 MB)
雞.svg.zip (2.7 KB)
Thanks for looking into this. Here is what you asked for.
You mean that the svg is shifted to the left a bit? That is how the svg is build. It looks the same when opened in Illustrator. And it has an unusual viewbox with a negative origin value.
As the default outline and the svg has the same structure. I would recommend to use a Color layer and let Glyphs write the svg from it.
You can even make the default layer a Color layer, add color and this custom parameters in the instances:
Then you get the default, black outlines and the colored SVGs from the same data.
And you need to clean up the glyphs you use for those annotations:
This is how they look:
And this is how they should look.
You probably used a TTF based file to build them. You should start with a OTF. because cleaning them up now us very tedious.
And the path direction is wrong.
I set the file up as described above. The SVG written from Glyphs is 2kB vs 5kB of the file you used.
FiraSans-Jyutping1000-solo GS.glyphs.zip (43.7 KB)
I’m not sure I understood you correctly — I haven’t looked into Color layers. Your modified file certainly look far better than the 2-layered structure!
Script-wise, with Color layers,
setBackgroundImage_(), but into a layer whose layer.attributes["color"] is true, I get the image (no paths);GSSVGtoPath business, I get the paths but not the color.Re: paths of the SVG… can’t do much about them, I’m afraid. They were really tedious and fragile to prepare.
Edit: about the negative origin. The SVGs have two components, and they are different in width/height. I’ve been pulling out all kinds of attempt to make them line up as much as possible.
I’m suggesting to not use the svg file, extra layer and GSBackgroundImage at all.
Importing the svg will cause that same misalignment and fixing that would take longer than redoing the colors.
How did you assign the colors to the small letters. I would do it again directly in Glyphs. You can search for path shapes and go throw the whole font and assign the colors, quickly.
That “use selection for find” is an interesting feature. I’m sure it’ll come in handy for some future project. But in this one, the “glyphs” are data-generated, so I can only get them in with SVG. As a CJK+ “font” this has 15+k glyphs and there is no resource to redraw manually.
Could you please explain a little about how scaling of imported SVGs work? I dug through the forums, and my understanding is that any SVG that is not 1000 px in height will get scaled (proportionally) to 1000 px. (That is, shorter images get proportionally larger, and >1000 px images proportionally smaller.)
If that is the case, then a 4000 width x 1000 height SVG should be “unscaled”. And it does look like that in Glyphs:
But when this is exported, the entire SVG is rendered into single-character width:
Is this expected behaviour, and can this be overridden? (And then, is there a way to script SVG scaling after import?)
I’ve investigated a little more, and present some more observations:
SVG layers inexplicably reports a width of 600.0, when both documentation and Edit view suggests that it takes on the layer width of the Master.
Digging more, I’m positive this is a Glyphs bug. The width of the SVG layers are set to 600.0 until they are viewed in the Edit view, then they are set to the Master width. I’ve recorded a video to show this behaviour:
You can import the .svg as outlines directly like this:
filePath = "path/to.svg"
URL = NSURL.fileURLWithPath_(filePath)
if not Layer.isFullColorLayer():
Layer.setFullColorLayer_(True)
Layer.importOutlinesFromURL_scale_error_(URL, 1, None)
The data in the SVG should be placed that the origin (0, 0) is at the top left of the glyph. Glyphs will shift it up by the height of the view box as the coordinate systems in font/Glyphs and .svg are different.