Help with results would be appreciated

[SB2020-eye]

Hi. I am working on an OTF SVG color font. I used opentype-svg to add only the glyphs a, b, and c, to test and see if the result worked.

The following is a screenshot of the only program I have found so far that allows me to see my color glyphs in any way on my Windows 11 PC: Character Map UWP (in the Microsoft Store and at https://github.com/character-map-uwp/Character-Map-UWP).

(In case it's hard to tell, a, b, and c are indeed color--a dark brown color.)

I removed height and width parameters from my svgs. I also tried opentype-svg with and without the -k parameter, with the same results.

1. Does anyone know why the color glyphs are bigger than the non-color glyphs and why their baseline is so much lower?

2. Does anyone know of a free program or platform with which I can actually test and use my font to see if it works with the color glyphs? (Or, if there's not one, is there someone with one of the non-free programs who would be willing to let me send them the .otf file and test to see if it the font works as it should?)

Thanks in advance.

[miguelsousa]

Hi. Since you're using an exiting font to generate the SVGs (that are to be added to the same font) I would expect that these instructions would work just fine.
As for a free tool for testing fonts, FontGoggles is a very good one, but it's only available for maOS.

[SB2020-eye]

Thank you so much, @miguelsousa .

The linked instructions are what I used to get the results you see above. But I am not using the existing font to generate the SVGs. I'm following the instructions for doing Step 2 without doing Step 1.

So I don't know why the color glyphs appear larger and have a different baseline. Any ideas? (Is it maybe just the app I'm using to view them?)

[miguelsousa]

I understood that you're using your own font, not the font files that are made available in this repo, which is why I wrote "an exiting font" instead of "the existing font".

The problem could be the viewing app, but it's hard for me to say for sure.

If you can share the font you're using, I may be able to look into it, although I should say that I don't think the font is the problem. The process defined in the instructions should work with any font without addition effort.

[SB2020-eye]

Thanks, @miguelsousa. Here is a link to the font: https://drive.google.com/file/d/1n9wb4IZhqVMTzYPcylXx1A0JWA4Ud5EE/view?usp=sharing

I also had my sister see what she could do with it on her Mac. Screenshots of her results are below.

Here is typing--I'm not sure in what program. (Ignore anything that isn't a lower-case letter.) Look at attempts to type a, b, and c:

Here is how it shows up in font preview on Mac:

[miguelsousa]

I downloaded your font file and ran these commands:

fonts2svg -g a,b,c -c 964B00 kells.1.8.otf

addsvg SVGs kells.1.8.otf

The first command created a folder named SVGs and saved three SVG files inside of it, one for each of the abc letters. This ZIP file contains those SVGs.

The second command renamed the font file to kells.1.8#0.otf and created a new file named kells.1.8.otf which includes the SVG glyphs. This ZIP file contains that font.

When I preview the new font in macOS (using the system's Quick Look) this is what it looks like:

As you can see, the abc letters are colored, and they also have the correct size and alignment.

Looking more closely at your screenshots, I see that the abc letters have texture instead of a flat color like in my example above. This makes me wonder if you used the fonts2svg tool to generate the SVG files. It's OK if you didn't; the addsvg tool (second step) can be used for "injecting" the SVG data into the font. But if you didn't generate the SVGs with fonts2svg, the one thing you need to keep in mind is that the code inside the SVG files themselves needs to be consistent with what the fonts2svg tool produces, otherwise the colored letters won't have the correct size nor alignment.

For example, this is the SVG code inside the c.svg file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -1000 1000 1000">
	<path fill="#964B00" d="M1 -499C17 -301 164 -253 268 -248C274 -248 280 -247 285 -247C327 -247 358 -256 368 -258C393 -264 436 -282 449 -289C485 -308 491 -305 491 -318C491 -318 492 -327 492 -349C491 -349 486 -347 460 -328C437 -309 385 -268 330 -268C232 -268 156 -325 121 -420C106 -457 98 -501 98 -543C98 -631 133 -711 213 -711C219 -711 224 -711 230 -710C274 -704 281 -650 285 -650L384 -684L385 -686C385 -686 386 -687 386 -690C386 -696 378 -710 324 -726C305 -732 283 -736 249 -736C236 -736 222 -735 205 -734C101 -725 0 -636 0 -516C0 -510 1 -505 1 -499Z"/>
</svg>

If I want the c letter to have a green contour and a textured fill, I can change the SVG code to this,

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -1000 1000 1000">
    <!-- Define a pattern for the textured fill -->
    <defs>
        <pattern id="texture" patternUnits="userSpaceOnUse" width="10" height="10">
            <rect width="10" height="10" fill="#964B00"/>
            <path d="M0,0 L10,10 M10,0 L0,10" stroke="#6d3b00" stroke-width="2"/>
        </pattern>
    </defs>

    <!-- Apply the pattern fill and add a green stroke -->
    <path fill="url(#texture)" stroke="green" stroke-width="10"
        d="M1 -499C17 -301 164 -253 268 -248C274 -248 280 -247 285 -247C327 -247 358 -256 368 -258C393 -264 436 -282 449 -289C485 -308 491 -305 491 -318C491 -318 492 -327 492 -349C491 -349 486 -347 460 -328C437 -309 385 -268 330 -268C232 -268 156 -325 121 -420C106 -457 98 -501 98 -543C98 -631 133 -711 213 -711C219 -711 224 -711 230 -710C274 -704 281 -650 285 -650L384 -684L385 -686C385 -686 386 -687 386 -690C386 -696 378 -710 324 -726C305 -732 283 -736 249 -736C236 -736 222 -735 205 -734C101 -725 0 -636 0 -516C0 -510 1 -505 1 -499Z"/>
</svg>

and now the font preview looks like this:

To make the SVG code edits I used a simple text editor, which gave me full control over the changes that were made. I could have used a WYSIWYG app such as Adobe Illustrator, Inkscape, or CorelDRAW. However, those apps usually alter the dimensions/proportions of the artwork which makes it more difficult to get the correct size and alignment needed for the font. It's not impossible to use the SVG output of those apps, but you may end up having to fiddle quite a bit with their export/save settings until you get them right.

Hope this helps.