Встроить изображения и шрифты в SVG
Добавьте один SVG и изображения (PNG, JPEG, WebP, GIF) или шрифты (TTF, OTF, WOFF, WOFF2), на которые он ссылается, и объедините их в один SVG, чтобы не передавать ресурсы отдельно. Для каждой ссылки укажите используемый ресурс и создайте SVG. Сохранить его можно после успешного отображения предпросмотра. Ресурсы по внешним URL автоматически не загружаются.
Что можно сделать
Объединить изображения и шрифты
Встройте добавленные локальные ресурсы в SVG, чтобы не передавать их отдельно.
Проверить ссылки и ресурсы
Для каждого пути изображения или имени шрифта в SVG укажите соответствующий файл. SVG не создаётся, пока остаются несопоставленные ссылки.
Проверить отображение созданного SVG и сохранить
Проверьте отображение как изображения и сохраните SVG со встроенными ресурсами. Исходные файлы не перезаписываются.
Как пользоваться
Добавить SVG и ресурсы
Выберите один SVG и изображения со шрифтами, на которые он ссылается. Их также можно добавить вместе из папки.
Сопоставить встраиваемые ресурсы
Проверьте локальный файл для каждой ссылки. Для ссылок, которые не сопоставились автоматически, выберите файл из уже добавленных ресурсов.
Создать SVG
Когда несопоставленных ссылок не останется, нажмите «Создать SVG с изображениями и шрифтами».
Проверить отображение и сохранить
Перед сохранением проверьте текст и изображения в созданном предпросмотре. Если отображение не удалось, проверьте исходный SVG и ресурсы.
Когда это полезно
Передать SVG вместе с ресурсами
Объедините изображение, ссылающееся на картинки и шрифты в отдельных папках, в один SVG, которым удобно делиться.
Проверить причину неработающих ссылок
Сверьте нужные ресурсы с добавленными файлами, затем укажите отсутствующие изображения или шрифты.
Как работают ссылки и встраивание
Относительные пути и сопоставление файлов
Ссылки сопоставляются автоматически, если путь ссылки относительно SVG однозначно совпадает с путём добавленного ресурса. Если файлы с одинаковыми именами находятся в разных папках или кандидаты пересекаются, выберите файл вручную.
Указать файл для каждого имени шрифта
Инструмент не извлекает шрифты с устройства только по именам, указанным в SVG. Добавьте нужные файлы шрифтов и укажите соответствующие файлы.
Ресурсы по URL не загружаются автоматически
Даже если указана внешняя ссылка, подготовьте изображения или шрифты локально и укажите их. На этой странице нельзя получать ресурсы по URL.
Встраивание не уменьшает размер файла
Встраивание данных изображения может увеличить размер самого SVG. Шрифты преобразуются в WOFF2 и встраиваются. Оптимизируйте код SVG отдельным инструментом.
Различия в способах отображения
В предпросмотре SVG отображается как изображение. Одинаковый вид во всех приложениях не гарантируется, поэтому проверьте нужное отображение и в целевом приложении.
Часто задаваемые вопросы
Что делать, если ресурс не найден?
Добавьте изображения или шрифты, затем укажите их в поле выбора для соответствующей ссылки. Автоматическое сопоставление может не сработать, если папки различаются, пути дублируются или используются внешние URL.
Какие ресурсы можно использовать?
Изображения могут быть в формате PNG, JPEG, WebP или GIF; шрифты — TTF, OTF, WOFF или WOFF2. SVG указывайте по одному.
Инструмент находит шрифты автоматически?
Инструмент не ищет шрифты на устройстве или в интернете только по имени шрифта. Добавьте и выберите локальный файл.
Что происходит с уже встроенными ресурсами?
Изображения и шрифты, встроенные как data URI, а также ссылки # внутри SVG не считаются внешними ссылками. SVG можно создать, если среди обнаруженных ссылок не осталось несопоставленных.
Что происходит при добавлении или повторном выборе ресурсов?
Если добавить только ресурсы, они появятся в списке, а ранее назначенные ресурсы сохранятся. Например, проверьте автоматическое сопоставление, если появились дополнительные кандидаты с тем же путём. Ввод, содержащий новый SVG, заменяет текущий SVG и все его ресурсы.
Что делать, если есть неподдерживаемые ссылки?
Внешние ссылки use или script нельзя встроить. Также нельзя загрузить SVG с импортом внешнего CSS. Перед выбором SVG приведите ссылки в порядок в исходном или другом подходящем приложении.
SVG станет меньше?
Этот инструмент не предназначен для уменьшения размера файла. Встраивание ресурсов в SVG может увеличить его размер. Чтобы очистить код, воспользуйтесь оптимизатором SVG.
Что делать, если созданный SVG не отображается?
На этой странице сохранение не отображается, пока SVG не будет успешно показан. Проверьте исходный SVG и ресурсы, сверьте сопоставления или файлы и создайте результат снова.
Входные данные и результат
- Входные данные
- Один SVG, а также изображения и шрифты. Добавляйте файлы или папки.
- Изображения
- Встраиваются исходные данные добавленных изображений. Изображения не изменяются в размере и не сжимаются.
- Шрифты
- Сопоставленные шрифты преобразуются в WOFF2 и встраиваются.
- Результат
- original-name-embedded.svg. Сохранить файл можно после успешного отображения созданного SVG.