Как встроить веб-шрифты Google в SVG?

Вы встраиваете шрифты в CSS, используя кодировку base64. Вы можете применять стили в документах SVG аналогично CSS, используя <style />элемент. Итак, если у вас есть шрифт WOFF, вы должны встроить его следующим образом:

<style>
@font-face {
    font-family: "Sample font";
    src: url("data:application/font-woff;charset=utf-8;base64,...");
}
</style>

Где ...находятся данные шрифта в кодировке base64.

Вы можете найти примеры этого, просмотрев таблицы стилей Typekit. Я не уверен, что тип пантомимы font/woffправильный, так как я также видел, как люди утверждают, что это должно быть application/font-woff. Хотя font/woff, font/truetype, font/opentypeи т. д. кажутся более популярными.

В качестве альтернативы вы можете взять SVG-версию веб-шрифта и встроить разметку описания шрифта SVG внутрь вашего документа (хотя поддержка браузера по-прежнему очень ограничена, как отмечает Люк в комментариях).

Однако вы также должны иметь возможность ссылаться на внешний шрифт в соответствии со спецификацией SVG . Казалось бы, это лучшее решение, если у вас будет несколько документов SVG, ссылающихся на этот шрифт.

Раздел <defs>вроде

<defs>
  <style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
</defs>

работает.

Вы можете встроить веб-шрифты Google в свой SVG напрямую с помощью Nano . Он автоматически сканирует ваш SVG и выборочно встраивает только необходимые шрифты, гарантируя, что ваши шрифты Ubuntu будут выглядеть одинаково во всех современных браузерах. В моем случае мне нужно было, чтобы Roboto был встроен в мой SVG:

Отказ от ответственности: я с командой, стоящей за Nano, и мы тоже сталкивались с той же проблемой ранее, поэтому решили утолить свой собственный зуд, создав Nano. Надеюсь, это полезно!

Редактировать: вот краткое объяснение того, что происходит за сценой:

Чтобы встроить шрифты в SVG, сначала нужно узнать, какие семейства шрифтов используются. Затем вам нужно найти эти файлы шрифтов и загрузить их. После загрузки вам необходимо преобразовать обычный, полужирный, курсивный и полужирный курсив в кодировку base 64. Если вы делаете это вручную, это огромный объем работы по большому количеству файлов, чтобы узнать, какой файл выделен жирным шрифтом, а какой нет. Затем вам нужно скопировать все 4 строки в кодировке base 64 в ваш SVG.

Вот почему мы создаем Nano и следим за тем, чтобы он автоматически сканировал SVG и вставлял только используемые шрифты. Например, если жирный шрифт не используется или текст отсутствует, то шрифты не будут внедрены. Все, что вам нужно сделать, это перетащить свой SVG в Nano, и он работает как шарм! Вы можете узнать больше здесь: https://vecta.io/blog/making-svg-easier-to-use

ОБНОВЛЕНИЕ к моему ответу. Теперь я предпочитаю другой ответ на этой странице, который заключается в использовании Nano: https://graphicdesign.stackexchange.com/a/121950/45239

Предполагая, что вы загрузили и установили веб-шрифт в своей системе и создали SVG (возможно, используя те же самые шаги, которые я описываю ниже, но не выбирая «Шрифт: преобразовать в контуры»), вы можете загрузить SVG в Nano. и посмотрите вариант «Вставить шрифт: Да» и нажмите «Загрузить».

Мой предыдущий ответ:

Если вы готовы пожертвовать выбираемым текстом и SEO:

1. Загрузите веб-шрифт.
2. Установите его локально.
3. Откройте Adobe Illustrator
4. Введите текст.
5. Файл > Экспорт > Экспортировать как…
6. Выберите ".SVG"

7. Выберите эти настройки:

   • Стиль: встроенный стиль
   • Шрифт: преобразовать в контуры
   • Изображения: Сохранить
   • Идентификаторы объектов: имена слоев
   • Десятичный: 2
   • (включено) Минифицировать
   • (включено)

8. При желании загрузите полученный svg на https://vecta.io/nano (это позволило уменьшить размер моего файла на 8,2%)

Рядом с Nano вы также можете проверить svg-buddy . Это инструмент командной строки, который автоматически определяет используемые шрифты в вашем SVG, загружает их из Google Fonts и встраивает шрифты в кодировке base64 в defsтег SVG. Это гарантирует одинаковое отображение SVG на всех устройствах, независимо от установленных шрифтов в системе пользователя. Кроме того, svg-buddyтакже можно применить некоторую базовую оптимизацию для уменьшения размера файла. Это абсолютно бесплатно и работает в автономном режиме.

Отказ от ответственности: я являюсь автором этого инструмента с открытым исходным кодом. Я надеюсь, что это полезно для других.

Это может быть чрезмерным упрощением, но задумывались ли вы о том, чтобы загрузить шрифт в виде zip-файла из Google, а затем позволить Illustrator преобразовать его по мере необходимости в выходной файл SVG?

Это только теоретически, так как я еще не пробовал, но теоретически, похоже, сработает.

Добавьте следующее после <desc>тега

<defs>
<style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento');</style>
</defs>

Я смог решить проблему, вместо того чтобы использовать SVG в качестве источника изображения в файле HTML, я вставил SVG в сам HTML.

Пример: (не работает)

<img src="/img/my_svg.svg">

Мне нужно было поместить фактический SVG в сам файл HMTL. Затем Safari смог прочитать шрифты, которые я ранее импортировал.

Пример: (Работает)

<svg class="coupon" height="220.254" viewBox="0 0 434.842 220.254" width="434.842" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <linearGradient id="a" gradientUnits="objectBoundingBox" x1=".079" x2=".933" y1=".088" y2=".879">
        <stop offset="0" stop-color="#00b2dc"/>
        <stop offset="1" stop-color="#00dac4"/>
    </linearGradient>
    <path d="m281.406 302.474a6.213 6.213 0 0 1 -6.167-6.914l.726-6.415a15.2 15.2 0 0 0 .1-1.7 14.846 14.846 0 0 0 -14.817-14.845c-.461 0-.915.026-1.364.066l-6.275.565a6.21 6.21 0 0 1 -6.763-6.189v-149.4a6.209 6.209 0 0 1 6.762-6.189l6.275.563c.451.04.906.068 1.366.068a14.846 14.846 0 0 0 14.819-14.839 15.225 15.225 0 0 0 -.1-1.7l-.726-6.415a6.212 6.212 0 0 1 6.167-6.912h365.712a6.211 6.211 0 0 1 6.167 6.912l-.724 6.415a15.316 15.316 0 0 0 -.1 1.7 14.844 14.844 0 0 0 14.818 14.839c.461 0 .917-.028 1.366-.068l6.277-.563a6.209 6.209 0 0 1 6.761 6.189v149.4a6.211 6.211 0 0 1 -6.763 6.189l-6.277-.565c-.449-.04-.9-.066-1.364-.066a14.844 14.844 0 0 0 -14.818 14.837 15.316 15.316 0 0 0 .1 1.7l.724 6.415a6.212 6.212 0 0 1 -6.167 6.914z" fill="#fff" transform="translate(-246.845 -82.22)"/>
    <path d="m661.315 118.088a26.8 26.8 0 0 1 -26.785-26.82 27.426 27.426 0 0 1 .176-3.048h-352.816a27.448 27.448 0 0 1 .176 3.048 26.8 26.8 0 0 1 -26.785 26.821c-.822 0-1.634-.042-2.435-.114v136.777c.8-.074 1.614-.116 2.435-.116a26.8 26.8 0 0 1 26.785 26.823 27.477 27.477 0 0 1 -.176 3.048h352.816a27.455 27.455 0 0 1 -.176-3.048 26.8 26.8 0 0 1 26.785-26.823c.822 0 1.634.042 2.435.116v-136.777c-.802.072-1.614.113-2.435.113z" fill="url(#a)" transform="translate(-240.878 -76.237)"/>
    <g fill="#fff">
        <path d="m621.645 274.026h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.975v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.968zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-17.291-.859a33.59 33.59 0 0 0 -2.734-9.267l1.811-.835a35.522 35.522 0 0 1 2.888 9.824zm341.224-7.679-1.851-.741a35.833 35.833 0 0 1 5.1-8.866l1.568 1.232a33.823 33.823 0 0 0 -4.823 8.375zm-349.198-9.708a34.131 34.131 0 0 0 -7.31-6.315l1.075-1.682a36.025 36.025 0 0 1 7.739 6.687zm360.994-5.343-1.159-1.628a35.748 35.748 0 0 1 9.083-4.7l.652 1.891a33.621 33.621 0 0 0 -8.577 4.437zm-377.09-4.959a33.483 33.483 0 0 0 -3.979-.891l-.84-.138v-6.629h1.994v4.939c1.137.21 2.27.479 3.377.8zm392.125-5.88h-1.995v-9.986h1.995zm-394.949-11.763h-1.994v-9.986h1.994zm394.949-8.209h-1.995v-9.986h1.995zm-394.949-11.764h-1.994v-9.986h1.994zm394.949-8.209h-1.995v-9.986h1.995zm-394.949-11.763h-1.994v-9.99h1.994zm394.949-8.209h-1.995v-9.981h1.995zm-394.949-11.763h-1.994v-9.986h1.994zm394.949-8.209h-1.995v-9.986h1.995zm-394.949-11.763h-1.994v-9.986h1.994zm394.949-8.209h-1.995v-9.986h1.995zm-394.949-11.763h-1.994v-6.679l.84-.134a33.762 33.762 0 0 0 3.935-.881l.551 1.919c-1.1.316-2.214.577-3.331.787zm391.395-5.313a35.649 35.649 0 0 1 -9.522-3.731l.985-1.736a33.641 33.641 0 0 0 8.987 3.519zm-378.745-4.673-1.073-1.686a33.95 33.95 0 0 0 7.317-6.302l1.5 1.314a36.072 36.072 0 0 1 -7.745 6.673zm361.147-5.331a35.941 35.941 0 0 1 -5.99-8.292l1.765-.929a33.98 33.98 0 0 0 5.659 7.833zm-347.837-9.934-1.811-.837a33.663 33.663 0 0 0 2.737-9.265l1.975.286a35.635 35.635 0 0 1 -2.901 9.816zm338.45-8.013c-.064-.33-.126-.659-.182-.993h-7.3v-2h9.017l.122.857c.082.587.181 1.166.3 1.742zm-17.45-.993h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.963zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.975v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.98v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.968zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973zm-19.945 0h-9.973v-2h9.973z" transform="translate(-237.397 -72.746)"/>
        <text font-family="Poppins-Medium, Poppins" font-size="28" font-weight="500" letter-spacing=".05em" transform="translate(78 70.476)">
            <tspan x="0" y="0">This is</tspan>
        </text>
        <text font-family="Poppins-Bold, Poppins" font-size="112" font-weight="700" transform="translate(79 172.476)">
            <tspan x="0" y="0">a test</tspan>
        </text>
    </g>
</svg>

Обратите внимание, что в этом случае вы ДОЛЖНЫ импортировать свои шрифты!

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

Надеюсь, это поможет кому-то там!

Удачи 😊

Столкнулся с той же проблемой и сделал инструмент, похожий на nano и svg-buddy. По сравнению с nano это бесплатный инструмент. По сравнению с svg-buddy он написан на NodeJS, а не на Java, поэтому его легко установить (или внести свой вклад!) для всех, у кого уже есть Node на компьютере.

Инструмент оптимизирован для Google Fonts. Он делает вывод, какие буквы используются, сканируя SVG для определений шрифтов. Затем буквы передаются в Google Fonts, чтобы можно было вернуть наиболее оптимизированные файлы шрифтов. Эта оптимизация приводит к значительному уменьшению размера файла.

https://github.com/coolov/svgum