css — динамическое создание SVG со встроенными шрифтами

Я хочу динамически создать SVG, который я могу использовать в <img/> тег. Это само по себе легко; создать SVG, установить заголовок и повторить сгенерированные части в их правильном месте.

Проблема в том, что я хочу иметь возможность вставлять шрифты в SVG.
Я пытался использовать @font-face правило в CSS svg, но это не сработало (MDN говорит, что это работает только на Android и Safari).

Есть ли кросс-браузерный способ сделать это?

Возможное решение № 01:

Решение:

В моем главном файле создайте файл SVG, который использует @font-face Правило CSS, а затем использовать exec() использовать Inkscape для преобразования этого SVG в другой SVG, который преобразует все буквы в пути. Я тогда мог бы использовать echo file_get_contents($inkscape_file) с правильными заголовками, чтобы вывести его как SVG, который может быть использован с <img/> тег.

Проблема с этим:

Это создает 2 дополнительных файла, поэтому кажется очень неэффективным. Кроме того, поскольку каждый пользователь в конечном итоге генерирует несколько изображений, занимаемое им пространство будет расти феноменально.

Возможное решение № 02:

Решение:

Создайте шаблон в Illustrator, затем сохраните его как svg и отметьте опцию «Вставить все глифы». Затем замените текст & стили с опциями из скрипта PHP. Используйте правильный заголовок и выведите это.

Проблема с этим:

Это серьезно ограничивает количество шрифтов, которые можно использовать, поскольку оно ограничено только теми, для которых я создаю шаблон. Мое желаемое поведение состояло в том, чтобы добавить возможность пользователям загружать свои собственные шрифты и использовать их. Это решение не позволяет этого.

1. Мой сервер разработки работает под управлением fedora, а рабочий сервер использует redhat.

2. @font-face Правило, которое я сейчас использую, таково:

   @font-face {
font-family: Potato;
src: url("/fonts/potato.otf");
}