Почему шрифт SVG меняется после экспорта или импорта

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

Есть две надёжные стратегии передачи. Сохраняйте текст текстом, если в целевой среде нужны выделяемые, доступные поиску или редактируемые слова и вы можете правильно предоставить шрифт. Преобразуйте текст в векторные контуры, если внешний вид должен оставаться неизменным, а редактирование слов больше не требуется. В обоих случаях сохраняйте отдельный редактируемый оригинал.

Для автоматического экспорта PNG явно загрузите файлы шрифтов в resvg и сравните отображённую надпись с исходником перед передачей.

Для иллюстраций в документах сравните рисунки SVG и набранные подписи в LaTeX. Отделение геометрии рисунка от текста подписей позволяет документу набирать слова, сохраняя оригинал SVG.

Сначала определите, содержит ли SVG ещё текст

Одного расширения для ответа недостаточно. SVG может представлять надписи как минимум двумя распространёнными способами:

<text font-family="Example Sans" font-weight="600">Sample</text>

Это обычный текст. SVG хранит символы и инструкции оформления. Для превращения символов в видимые глифы система отображения должна найти подходящий шрифт.

Текст, преобразованный в контуры, выглядит примерно так:

<path d="M ... Z" />

Здесь каждая буква превращена в векторную геометрию. Получателю не нужен шрифт, но слово больше не является обычной редактируемой текстовой строкой.

Проверить это можно, не понимая всю разметку:

1. сделайте копию SVG;
2. откройте копию в обычном текстовом редакторе;
3. найдите <text и <tspan;
4. найдите видимое имя шрифта;
5. если их нет, проверьте, построены ли буквы из элементов <path>.

В векторном редакторе используйте инструмент текста и нажмите на букву. Мигающий текстовый курсор означает обычный текст. Узлы вокруг каждого глифа означают контуры.

Три состояния типографики

Причина 1: нужный шрифт не установлен

Атрибут SVG font-family — упорядоченный по приоритету список семейств. Как объясняет справочник MDN по font-family в SVG, система отображения выбирает из этого списка. Если не находится первое семейство, она переходит к следующему и в конце к общему семейству вроде sans-serif или serif.

Обычно это происходит, когда:

• дизайнер использовал локальный шрифт, которого нет у получателя;
• шрифт активирован через сервис подписки только на одном компьютере;
• SVG перенесли из настольного редактора на телефон, планшет, в программу резки или офисный пакет;
• имя семейства внутри шрифта отличается от имени файла или названия в папке загрузки;
• установлено только одно начертание, а SVG запрашивает другую толщину или курсив.

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

Причина 2: SVG ожидает веб-шрифт, который не загрузился

SVG внутри веб-страницы может получать шрифты из её CSS. Он также может содержать блок стилей с правилом @font-face; SVG 2 требует поддержки загружаемых шрифтов через модель CSS Fonts. Такая схема не работает, если URL шрифта неверен, файл не опубликован, доступ заблокирован, запрошенный формат не поддерживается или SVG открыт отдельно от страницы, предоставлявшей стили.

Откройте инструменты разработчика браузера и перезагрузите страницу. В панели Network отфильтруйте файлы шрифтов и найдите неудавшийся запрос. В вычисленных стилях элемента <text> проверьте реально использованный шрифт, не доверяя только объявленному имени семейства.

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

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

Причина 3: семейство или толщина не совпадает точно

Сопоставление шрифтов CSS учитывает больше, чем видимое имя семейства. SVG может запрашивать:

font-family: "Example Sans";
font-style: normal;
font-weight: 600;

Если доступные файлы содержат только толщины 400 и 700, система может синтезировать толщину или выбрать близкое начертание. Вариативные шрифты добавляют оси и имена экземпляров, которые импортирующее приложение может трактовать иначе. Старые дизайнерские или режущие программы могут игнорировать некоторые возможности OpenType, лигатуры или настройки вариаций.

Сравните исходный документ и SVG рядом:

• точное имя семейства;
• начертание и числовую толщину;
• межбуквенный интервал;
• регистр и реальные символы;
• функции OpenType, например лигатуры;
• значения осей вариативного шрифта;
• поведение текста по контуру или вертикального текста.

Не исправляйте несовпадение семейства ручным масштабированием каждого слова. Это скрывает симптом, сохраняя неверные глифы.

Причина 4: экспорт сохранил текст, но приложение импорта обрабатывает его иначе

Компоновка текста SVG не идентична документу настольной издательской программы. Экспортёр может использовать вложенные элементы <tspan>, отдельные координаты, text-anchor или <textPath>. Импортирующее приложение может свести, перегруппировать или переинтерпретировать эти функции. Если вы восстанавливаете эмблему, инструкция по редактируемому тексту SVG вдоль контура отделяет знак, направляющую кривую и обычную надпись, чтобы проверить каждую часть.

Для размещения в документе следуйте процессу работы с иллюстрациями SVG и графикой внутри строки в Typst. Подписи в нативном тексте документа позволяют отдельно проверить надписи рисунка, нумерацию иллюстраций и типографику абзацев.

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

Если нужный шрифт есть, но расположение всё равно меняется, проверьте структуру вместо смены гарнитуры:

1. сравните отображение в браузере с исходным редактором;
2. проверьте, нет ли у каждого символа отдельной позиции x;
3. проверьте вложенные преобразования группы текста;
4. выясните, не удалил ли импортёр text-anchor, кернинг или настройки базовой линии;
5. проверьте копию с обычным горизонтальным текстом, чтобы изолировать поведение текста по контуру.

Для логотипа, эмблемы или однострочного заголовка, где вид важнее редактируемости, контуры обычно безопаснее при передаче.

Причина 5: текст преобразован в контуры, но вы ожидали сохранить редактируемость

У текста в контурах невозможна подмена шрифта, потому что ссылки на шрифт больше нет. Но импорт всё равно может удивить:

• буквы могут появиться составными контурами, а не одним редактируемым словом;
• внутренние просветы букв могут заполниться после разъединения составного контура;
• множество глифов может быть сгруппировано;
• ограниченное целевое приложение может объединить или упростить контуры;
• файл может стать больше версии с обычным текстом.

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

Всегда сохраняйте два файла:

• Редактируемый оригинал: обычный текст, исходная информация о шрифтах, именованные слои и формат исходного приложения.
• Копия для передачи: SVG, EPS или PDF с текстом в контурах, если внешний вид должен точно сохраниться.

Никогда не преобразуйте текст в контуры в единственном оригинале. Исправление написания, перевод или новый слоган превратятся в медленную ручную перерисовку, когда текст уже стал контурами.

Какое решение выбрать?

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

Безопасное преобразование в контуры

Для передачи с точным сохранением вида:

1. сохраните исходный документ с обычным текстом;
2. дублируйте его, добавив к имени -outlined или -delivery;
3. выделите текст и используйте Create Outlines, Convert to Curves, Object to Path или аналогичную команду;
4. проверьте отверстия в буквах и перекрывающиеся фигуры;
5. экспортируйте SVG;
6. откройте SVG в браузере и втором редакторе;
7. сравните с исходником в нормальном размере и при сильном увеличении;
8. отправьте файл с контурами, сохранив архив обычного оригинала и информацию о лицензии шрифта.

Не растеризуйте текст лишь ради обхода отсутствующего шрифта. PNG внутри SVG предотвращает подмену, но лишает масштабируемой геометрии контуров. Преобразование букв в контуры сохраняет настоящие векторы.

Если от логотипа осталось только растровое изображение

Иногда не сохранилось ни обычного текста, ни оригинала с контурами. У вас может быть лишь маленький PNG, JPG или снимок экрана логотипа. Руководство по выбору способа векторизации логотипа объясняет, когда трассировать этот растр, а когда перерисовывать. Установка шрифтов не исправит растр, а похожая гарнитура может не воспроизвести индивидуальные изменения букв.

Здесь PerfectVector может помочь при определённых условиях: векторизация логотипа может восстановить видимые растровые буквы в виде векторных фигур. Результат — рисунок в контурах, а не восстановленный обычный текст. Он не определяет исходный шрифт, не восстанавливает кернинг и не делает слова снова доступными для набора. Используйте его для восстановления видимой геометрии логотипа, а реконструкцию храните отдельно от любого заново набранного оригинала.

Более широкая стратегия передачи разобрана в руководстве по форматам файлов логотипа: какие исходные и конечные форматы сохранить.

Частые вопросы

Почему на другом компьютере SVG использует другой шрифт? Вероятно, SVG содержит обычный текст с именем шрифта, недоступного на другом компьютере. Система отображения подставляет другое семейство из резервного списка, меняя формы глифов, ширину, интервалы и иногда выравнивание.

SVG автоматически встраивает шрифт? Нет. SVG может указывать имя шрифта, получать его из CSS страницы или включать ресурс шрифта, но обычный текст не упаковывает автоматически файл настольного шрифта. Доступность, поддержку браузера и лицензию всё равно нужно обеспечить.

Стоит преобразовывать текст SVG в контуры? Преобразуйте копию для передачи, если вид должен оставаться неизменным, особенно для логотипов, декоративных надписей, печати и ПО для изготовления изделий. Сохраняйте обычный текст в редактируемом оригинале, если важны формулировки, доступность, поиск или локализация.

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

Может PerfectVector восстановить исходный шрифт растрового логотипа? Нет. PerfectVector может восстановить видимые растровые буквы в виде векторных контуров, но не определяет исходный шрифт и не восстанавливает редактируемые символы, кернинг и настройки шрифта. Используйте его, если цель — восстановить видимую геометрию логотипа.

Источники

1. W3C — текст SVG — Обычное содержимое <text> и <tspan>, свойства шрифтов, компоновка и поддержка загружаемых шрифтов.
2. W3C — модуль CSS Fonts уровня 3 — Сопоставление семейств, выбор начертания, отсутствующие семейства и системная замена.
3. MDN — SVG font-family — Приоритетные списки семейств и общие резервные варианты в SVG.
4. Adobe Illustrator — создание текста в контурах — Преобразование текста в контуры и потеря редактируемости как текста.
5. Adobe Illustrator — сохранение рисунка — Экспорт текста SVG, контуры и ограничения совместимости текста вдоль контура.

Если оригинал потерян и остался лишь растровый логотип, восстановите видимые буквы в векторных контурах с PerfectVector, затем проверьте фигуры во втором редакторе. Если обычный текст ещё есть, исправьте зависимость от шрифта или преобразуйте копию для передачи в контуры вместо повторной трассировки.