Used chars plugin

[strarsis]

This PR adds the usedChars plugin which adds a list of used characters in the text of a SVG document as
style comment which is helpful for adding/embedding tailored fonts with
reduced character set (e.g. Google Fonts text parameter or by a local font optimization technique).

E.g. a SVG document that contains the texts I love SVG! and Test.
would result in a list of used characters like so:

[...]
    <style>
        /* Characters used:
I loveSVG!Tst.
        */
    </style>

Then e.g. a font can be added using the Google Fonts API and
the API additional text parameter (& escaped to &) for a reduced, tailored character set:

@import url('https://fonts.googleapis.com/css?family=Roboto&test=I loveSVG!Tst.');

Note that for usage in a parameter like this escaping may be necessary in some cases and
be wary of hidden/less obvious unicode characters and that the space character is also important.

Fonts in SVGs are supported by browser when the SVG document is embedded as <object> on page,
see https://github.com/marians/test-webfonts-in-svg/pull/1 .

It doesn't work when just inlining the whole SVG into the HTML page.

Alternatively, font-face is also interpreted when the font file has
been embedded into the CSS (using base64 encoding). - This seems to be also a candidate for a plugin.

TODO:

• Also look for text in styles (notably content: "").
• Group used text by their font (family, weight, variant).

[GreLI]

I don't think it has something with optimizing SVGs (wrt to file size) at all.

[strarsis]

@GreLI: Right, it doesn't reduce file size - but it should fix issues with fonts in embedded SVGs.
Would this be a good enough reason for adding this plugin to svgo?

[GreLI]

AFAIK, fonts in SVG is outdated and deprecated technology in prefer to CSS fonts, which have better feature set and support.

[strarsis]

@GreLI: This is for using CSS fonts in SVGs that are embedded - browsers have issues displaying the custom font when the SVG is embedded. Also this plugin would allow tailoring a reduced font file for exactly this specific SVG - or when using an API like Google Fonts API for a reduced character set.

[strarsis]

@GreLI: Because this plugin is intended to be used for intelligently/properly embedding CSS fonts (and optimizing the font files) (see comment above) - could a PR reopen be considered?

[GreLI]

Ok, I understand the case, but still it's very specific and hacky one. I don't think it worth bloating the plugin list with this one. Perhaps, the plugin interface would be improved in future for easier use of custom plugins.

[strarsis]

@GreLI: Yes, ideally I could just install this plugin from a separate (npm) package and svgo is able to find it.
Because I sometimes use SVGs with CSS font inside, optimizing the SVG for true text can be more efficient and semantic. (Related: #722).

[strarsis]

As a precursor to embedding font, it would actually be a good idea.
Demand for embedding fonts into SVGs is definitely there.

[strarsis]

So real text in SVG looks usually better than vectorized text and can even be smaller.
But for non-inlined SVGs the used font files must be embedded.
Determining the used characters in the SVG and then embedding a font stripped by non-used characters would be the best approach, resulting in a SVG with better visual text output and usually smaller file size.

[strarsis]

@TrySound; I think the plugin is relevant. svgo is primarily used for minification, but also for scoping (inlining styles, prefixing classes/IDs). The o in svgo means optimization. Being able to use custom fonts inside in an external SVG, which often results in a smaller overall file size and improved font rendering and the ability to change the text (as it is real text) are all worthwile optimizations.

[SethFalco]

I'm actually not in favor of this plugin.
For a start, this isn't an optimization at all, more like a utility. ^-^'

the text of a SVG document as style comment which is helpful for adding/embedding tailored fonts with

For this to be an optimization, it'd be better to specifically check for a supported CDN. For example, fonts.googleapis.com, and only modify the SVG if it's supported. This would increase the file size, but it is an optimization if we consider fetched resources, which is important in my opinion.

see https://github.com/marians/test-webfonts-in-svg/pull/1 .

It's been years since this was posted, so understandable, but dead link. ^-^'

---

This does not follow any standards, it's proprietary logic that Google implemented for the Google Fonts service. A plugin like this is too specific to a single proprietary service's non-standard features to be worth maintaining, especially as they can change this logic silently whenever they want.

The user experience you've proposed doesn't really align with other SVGO plugins, either. Again, it behaves more like a utility than an optimization, so it can probably be its own-specialized tool outside this repo.

[strarsis]

The used characters determined by this plugin should not be used for loading an external font by CDN (as Google Fonts).
On the contrary, the set of characters used by each font are intended to be used to subset the referenced font files, in order to inline those font files directly into the SVG file. Externally referenced SVG images (as in <img>s) do not support external fonts, but inlined fonts. Inlining the fonts allows SVGs with real, custom fonts to be normally used, avoiding text vectorization that reduces or removes accessibility and interactivity/editability (as the original text is lost) and can even result in smaller overall SVG files.

[SethFalco]

in order to inline those font files directly into the SVG file

Ahh, I see. Yeah, that does make more sense.
Personally, I still wouldn't merge the PR as-is for the reasons expressed before. However, I do think it'd make for a pretty interesting plugin to optimize an existing inline font if found as you've described. 🤔

[SethFalco]

I'll close this in favor of the discussion at #992.

We might not include such a plugin in this repository due to the large dependency, but I think it makes for a good externally maintained plugin.