Вбудувати зображення та шрифти в SVG
Додайте 1 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-адресу, додайте зображення або шрифти локально та вкажіть їх. Цей екран не завантажує ресурси за URL-адресами.
Вбудовування — це окремо від зменшення розміру файлу
Вбудовування даних зображень може збільшити розмір самого файлу SVG. Шрифти перетворюються у WOFF2 і вбудовуються. Оптимізуйте код SVG окремим інструментом.
Вигляд залежить від способу відображення
Попередній перегляд показує SVG як зображення. Однаковий вигляд у всіх застосунках не гарантується, тому перевірте потрібне відображення також у місці призначення.
Поширені запитання
Що робити, якщо ресурс не знайдено?
Додайте зображення або шрифти, а потім у полі вибору для відповідного посилання вкажіть їх. Автоматичне зіставлення може не спрацювати з різними папками, дубльованими шляхами чи зовнішніми URL-адресами.
Які ресурси можна використовувати?
Зображення можуть бути у форматі PNG, JPEG, WebP або GIF; шрифти — TTF, OTF, WOFF або WOFF2. SVG вказуйте по одному.
Чи знаходить інструмент шрифти автоматично?
Інструмент не шукає шрифти на пристрої чи в інтернеті лише за назвою шрифту. Додайте файл, який зберігається локально, і виберіть його.
Що відбувається з уже вбудованими ресурсами?
Зображення та шрифти, вбудовані як URI даних, а також посилання з # всередині SVG не вважаються зовнішніми посиланнями. SVG можна створити, якщо не залишилося невирішених виявлених посилань.
Що відбувається, коли я додаю або повторно вибираю ресурси?
Якщо додати лише ресурси, їх буде додано до списку, а раніше призначені ресурси залишаться. Наприклад, перевірте автоматичне зіставлення, якщо з’явилося більше кандидатів з однаковим шляхом. Вхідний SVG замінює поточний SVG і всі його ресурси.
Що робити з непідтримуваними посиланнями?
Зовнішні посилання на ресурси або скрипти не можна вбудувати. Також не можна завантажити SVG із зовнішніми CSS-імпортами. Спочатку впорядкуйте посилання у вихідній програмі або іншому відповідному застосунку, а потім виберіть SVG.
Чи стане SVG меншим?
Цей інструмент не призначений для зменшення розміру файлу. Вбудовування ресурсів у SVG може збільшити його розмір. Щоб очистити код, скористайтеся оптимізацією SVG.
Що робити, якщо створений SVG не відображається?
На цьому екрані не відображається кнопка збереження, доки SVG не буде успішно показано. Перевірте початковий SVG і ресурси, перегляньте зіставлення чи файли та створіть його ще раз.
Вхідні дані та результати
- Вхідні дані
- 1 SVG, а також зображення та шрифти. Додавайте файли або папки.
- Зображення
- Вбудовуються початкові дані доданих зображень. Зображення не змінюють розмір і не стискаються.
- Шрифти
- Зіставлені шрифти перетворюються у WOFF2 і вбудовуються.
- Вивід
- original-name-embedded.svg. Зберегти можна після успішного відображення створеного SVG.