Думаю, проблема в том, что вы добавили объявление @font-face в самого SVG.Если вы помещаете SVG-файл в HTML-файл, вы можете переместить @font-face CSS в HTML-документ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<style>
@font-face {
font-family: 'Example';
src: url('Example-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<!-- Your exported SVG file, with the SVG Font export setting kept as “SVG”: -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0" y="0"
viewBox="0 0 198 119">
<defs>
<style type="text/css">
/* I removed the @font-face declaration
* here, it’s just the exported CSS now. */
.st5 { font-family: 'Example' ;}
/* Etc. */
</style>
</defs>
<!-- Etc. -->
<text transform="matrix(1 0 0 1 65 64)">
<tspan x="0" y="0" class="st4 st5 st6">EST. 06.27.2014</tspan>
</text>
</svg>
</body>
</html>
Этот подход хорошо работает, когда вы:
- Уже используете те же файлы веб-шрифтов на сайте, что и в SVG, и
- Используя встроенный SVG, а не как изображение
Если вам нужно использоватьSVG в теге изображения выглядит так:
<img src="path/to/my-svg.svg" alt="Description of text in the SVG" />
… тогда вам нужно будет набросать тип при экспорте из Illustrator.Вместо того, чтобы делать это в самом файле Illustrator, вы можете оставить тип «живым» и изменить настройки экспорта SVG, нажав эту крошечную шестерню ⚙️ на панели настроек экспорта:
Теперь вы можете выбрать SVG на боковой панели и изменить настройки экспорта SVG:
Попробуйте изменить этот параметр на«Скрывать контуры». Возможно, вы также можете снизить десятичную точность до 2 или 3.
Этот подход хорошо работает, если вам:
- Необходимо использовать SVG в качестве внешнего изображенияв элементе
img или - Используются шрифты, которые не будут использоваться в качестве веб-шрифтов на сайте, или
Я переключаюсь между этими параметрами в зависимостина такие вещи, как то, что шрифты уже будут на сайте, должен ли контент рассматриваться как текст или как изображение, и сложность SVG.
Также важно добавить или улучшить заголовок иописание в гоSVG, если текст выделен, но по-прежнему является частью содержимого сайта, как и любое другое изображение.
В вашем конкретном SVG текст белый, и есть хотя бы одна часть,может быть «вне холста», поэтому, возможно, стоит сделать простой пример SVG для тестирования.
Надеюсь, что один из этих подходов полезен!