1908302 - Color SVG in Opentype fonts seem to not be displaying correctly

Status: UNCONFIRMED

(Core :: Graphics: Text, defect, P3)

Description

[Chet Lin [:hedera]]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:127.0) Gecko/20100101 Firefox/127.0

Steps to reproduce:

I built an Opentype-SVG font, and each glyph contains a max of three colors. I then set up a gh-page self-hosting the font, with a section where the color font is showcased inline. The page is at https://konomu.github.io/mahjong-font.

Actual results:

The black components of the glyphs are not displaying after implementing the font on my website. The resulting glyphs are the same whether accessing the page from Firefox on Windows or Ubuntu.

Expected results:

The font in the page I linked above display correctly on iOS safari. The black component is visible.

Comment 1

[Jonathan Kew [:jfkthame]]

It looks like the "black" parts of the glyphs are not actually specified as black, but as "current color", and so on your example page they're actually painting in white, as that's the current CSS text color. Setting a different color property, e.g. by adding color: black to the .tile class, makes them appear as expected.

Comment 2

[Jonathan Kew [:jfkthame]]

Hmm, looking into the font a bit, it appears that the intended black components do not specify the fill attribute at all. According to the SVG spec, it should then default to black as the initial value, so this does seem unexpected behavior on Firefox's part.

On the other hand, I suspect this might have been a deliberate choice (it's been awhile since the SVG-in-OpenType discussions, I don't recall details offhand) to apply CSS color to SVG glyphs similarly to how it applies to monochrome glyphs, where what the font designer sees as "black" will be painted with the current CSS color.

We should check into this and confirm the intended behavior; in the meantime, the way to work around it would be to explicitly set fill="black" on the paths that are intended to be painted black.