Add CSS color styling option to OpenType-SVG specification, so font colors may be altered in Illustrator
Currently, OpenType-SVG color fonts come with pre-defined colors.
To provide glyphs in different shades, additional stylistic sets need to be added to the font, bloating it tremendously.
I propose to add the ability to OpenType-SVG to have certain colors of a glyph being overwritten by the application (e.g. Illustrator), so text colors can be applied to a range of glyphs just like it's done with standard monochrome glyphs.
To do so, OpenType-SVG should be able to export a set of color reference names, referenced within the glyph's SVG. An application may then assign alternate colors to those color references, so the glyph will render using these colors.
For example, an OpenType-SVG glyph may look similar to this:
(UserVoice scrambles my below code, so I attached a text file with the suggested SVG content.)
<svg xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
:root
{
--base-color: rgba(200, 10, 10, 1);
--highlight-color: rgba(255, 70, 70, 1);
}
.gradient-fill
{
fill: url(#gradient) #000;
}
</style>
<defs>
<linearGradient id="gradient">
<stop offset="0" stop-color="var(--base-color)" />
<stop offset="1" stop-color="var(--highlight-color)" />
</linearGradient>
</defs>
<polygon class="gradient-fill" points="0,0 100,0 0,66" />
</svg>
Illustrator's swatch for font color may then switch from a single swatch to a list of swatches, representing each of the CSS color variable values (see Properties panel illustration attached).
A.D.
shared this idea
-
Brian Collins
commented
Currently you cannot color an OT SVG font.
To do so, it has to be rasterized (Object>Rasterize) then colored (Edit>Edit Colors>Adjust Color Balance).
This method only works in RGB, you cannot specify HEX or RGB values, and the type is no longer editable.
-
Jon Chui commented
I am making an OT-SVG color font. According to specs, fill/strokes with currentColor applied should respond to user color choices. The Adobe font engine --- Illustrator in particular --- does not respect that, and only displays black. Other font rendering engines (e.g., all non-Adobe macOS applications, linux freetype 2.13+) handles this correctly.
1. macOS 13 Ventura
2. Illustrator 27.6.1
3. use any OT-SVG fonts with fill="currentColor" attribute for a path.
4. paths with currentColor annotation respects user color choices; they do not.
5. I have shown here two screenshots, one from Keynote, one from Illustrator, to show the difference in behaviour. Each chemical structure is a glyph. I can provide the .ttf too, but that is not permitted here as an upload.Relevant section of specs: https://learn.microsoft.com/en-us/typography/opentype/otspec183/svg#colors