Импорт SVG в Unity: графика для UI Toolkit или спрайтов
Выберите способ импорта SVG в Unity по версии редактора и назначению. Подготовьте контуры, обработайте неподдерживаемые эффекты и проверьте изображения UI Toolkit или спрайты в контексте.
На этой странице
- Выберите способ импорта перед правкой графики
- Подготовьте SVG, который импортер сможет воспроизвести
- Подтвердите наличие контуров
- Заменяйте неподдерживаемые функции намеренно
- Удалите случайную сложность
- Импортируйте в UI Toolkit в Unity 6.3 или новее
- Импортируйте для Sprite Renderer или uGUI
- Диагностируйте первое видимое отличие
- Как это выглядит с PerfectVector
- Частые вопросы
- Источники
Импорт SVG в Unity начинается с двух решений: какую версию редактора вы используете и где появится графика. Unity 6.3 включает импорт SVG для UI Toolkit и Texture2D. Прямой импорт SVG как ресурсов Sprite или uGUI использует пакет Vector Graphics; более ранние редакторы — старую линейку пакета. Unity описывает это разделение в руководстве по версиям Vector Graphics.
Если редактируемый SVG уже есть, подготовьте этот файл для импортера. Если единственный исходник — PNG или JPG, трассируйте только тогда, когда нужны векторные фигуры. Текстура или спрайт пиксельной графики могут остаться растровыми.
Проверьте один характерный значок, чтобы отделить проблемы исходной графики от проблем импорта и отображения Unity перед обработкой всего набора.
Для геометрии сцены в другом движке используйте проверки импорта SVG в Unreal Engine, чтобы проверить исходные фигуры Motion Design, отверстия и отдельные части.
Выберите способ импорта перед правкой графики
Выбирайте способ по целевому компоненту. Ресурс, работающий в компоновке UI Toolkit, не обязательно подходит полю Sprite Renderer.
| Редактор Unity | Назначение | Начальный способ |
|---|---|---|
| 6.3 или новее | UI Toolkit | Встроенный импорт SVG как векторного изображения UI Toolkit |
| 6.3 или новее | Потребитель Texture2D | Встроенный импорт SVG как текстуры |
| 6.3 или новее | Sprite Renderer или uGUI SVGImage | Предварительный пакет Vector Graphics 3.0 |
| До 6.3 | Процесс SVG через пакет | Совместимый предварительный пакет Vector Graphics 2.0 |
Таблица следует требованиям пакета Unity. Закрепите версии редактора и пакета проекта. Инструкции для Unity 2018 или предварительного импортера 2.0 могут описывать другие параметры, чем современный проект 6.3.

Храните небольшую проверку импорта рядом с графикой
Выберите значок с кривой, внутренним отверстием и эффектом окрашивания, нужным набору. Сохраните исходный SVG рядом с простой версией из сплошных фигур. Если простая версия импортируется правильно, исследуйте сложную графику перед изменением всего проекта.
Подготовьте SVG, который импортер сможет воспроизвести
Откройте исходник в векторном редакторе и проверьте реальные объекты. Сохраните исходный оригинал, затем сделайте отдельный экспорт для Unity.
Подтвердите наличие контуров
SVG может хранить растр через элемент <image>; само расширение не устанавливает наличие векторной геометрии. Спецификация встроенного содержимого W3C описывает это различие. Выделите часть графики в редакторе и проверьте объекты или разметку. Используйте диагностику встроенного растра, если это один прямоугольник изображения.
Если исходный векторный файл существует, экспортируйте его заново. Трассировка PNG, экспортированного из этого оригинала, добавляет работу восстановления и может изменить силуэт. Для семейства значков сначала согласуйте холст, поля и визуальную толщину; руководство по подготовке SVG для UI kit рассматривает эти решения для набора.
Заменяйте неподдерживаемые функции намеренно
Встроенный импортер Unity поддерживает часть SVG 1.1. Документированные исключения включают текст, не преобразованный в контуры, пиксельные маски, фильтры, взаимодействие и анимацию. Поэтому браузерный предпросмотр может быть правильным, а результат Unity — отличаться. См. ограничения SVG Unity.
Подготовьте копию для передачи по потребностям графики:
- Преобразуйте декоративные надписи в контуры. Подписи интерфейса оставьте текстом интерфейса, если нужны редактирование или локализация.
- Воссоздайте нужную тень или свечение эффектом, поддерживаемым назначением, либо оставьте графику растровой.
- Проверяйте маски отдельно от контуров отсечения. Мягкая пиксельная маска и геометрическое отсечение — разные конструкции.
- Планируйте анимацию в Unity вместо зависимости от анимации внутри SVG.
Не сводите каждый градиент только потому, что фильтр не поддерживается. Проверьте реально используемый эффект дизайна. Если сложный значок не работает, экспортируйте версию со сплошной заливкой и возвращайте эффекты по одному. Так можно изолировать функцию, меняющую вид.
Удалите случайную сложность
Удалите случайные точки, скрытые дубликаты и фоновые прямоугольники, не относящиеся к значку. Упрощайте явно шумную кривую только со сравнением с исходником. Небольшое отверстие, закрывшееся при очистке, — неудачная правка, даже если файл стал короче.
Нет полезного универсального целевого количества узлов для всей игровой графики. Геометрической стрелке и персонажу, нарисованному от руки, нужна разная детализация. Руководство по очистке узлов SVG помогает решить, какие точки несут информацию о форме.
Импортируйте в UI Toolkit в Unity 6.3 или новее
Начните с SVG для передачи, чей силуэт и эффекты уже проверены.
- Добавьте SVG в папку Assets проекта и выделите его.
- Задайте Generated Asset Type как UI Toolkit Vector Image в Inspector.
- Примените настройки импорта и используйте полученное векторное изображение в нужном элементе UI Toolkit.
- Просмотрите реальную компоновку в минимальном и максимальном нужных размерах отображения.
Unity описывает выбор ресурса при встроенном импорте в Work with vector graphics. Если целевому компоненту нужен Texture2D, выберите этот тип результата и проверьте полученную текстуру в нужном размере.
Для UI Toolkit начните с рекомендованных базовых настроек тесселяции. Target Resolution и Zoom Factor позволяют импортеру настроить разбиение кривых под нужные условия отображения. Unity рекомендует наименьшее целевое разрешение, дающее удовлетворительный результат. Настройки импорта изображений объясняют управление.
Разделяйте две проверки: описывает ли SVG правильную форму и хорошо ли импортированный ресурс ее отображает. Повышение тесселяции не восстановит отверстие, исчезнувшее в исходном экспорте.
Импортируйте для Sprite Renderer или uGUI
Установите совместимый пакет com.unity.vectorgraphics через Package Manager, если назначению нужна его поддержка Sprite или uGUI. Выберите соответствующий создаваемый ресурс для компонента и подтвердите, что компонент принимает его. Текущая документация пакета различает эти типы импорта и встроенный способ UI Toolkit.
Для Sprite Renderer проверьте размер объекта в сцене и опорную точку перед копированием в префабы. Для uGUI проверьте используемый проектом процесс SVGImage. Обычный процесс растровых спрайтов остается альтернативой, если графика уже правильно выглядит в нужных размерах.
Старый пакет 2.0 описывает единицы SVG на единицу сцены, опорные точки спрайтов и настройки тесселяции. Он также обозначает пакет как экспериментальный и не рекомендует производственное использование. Команды, поддерживающие этот способ, должны рассмотреть руководство пакета 2.0 вместе с ограничениями проекта перед добавлением.
Если обновляете существующий проект, проверяйте импорт в копии или ветке под контролем версий. Сравните типы созданных ресурсов и ссылки в реальных префабах и сценах. Не используйте успешный предпросмотр миниатюры как единственную проверку миграции и не применяйте массовую правку .meta из старого сообщения на форуме без воспроизведения конкретной проблемы.
Диагностируйте первое видимое отличие
Ведите короткую запись проверки для каждого характерного ресурса: исходный файл, версии редактора и пакета, целевой компонент, ожидаемый размер отображения и первое видимое несовпадение.
| Что видно | Что проверить сначала | Полезная следующая проверка |
|---|---|---|
| Ресурс не подходит полю компонента | Создаваемый тип ресурса и назначение | Импортируйте для реально используемого компонента |
| Отсутствуют надпись, тень или движение | Неподдерживаемая функция исходника | Попробуйте экспорт с текстом в контурах или сплошными фигурами |
| У значка лишние поля или обрезанный край | Исходный холст и размер элемента | Сравните границы исходника с целевым прямоугольником |
| Кривая выглядит граненой в большом размере | Тесселяция и масштаб отображения | Постепенно повышайте нужное разрешение или масштаб |
| Текстура размыта при увеличении | Размеры растра и отображения | Сравните в размере, для которого создана |
| Результат выглядит правильно, но существующие сцены ломаются | Ссылки, материалы и изменения импорта | Проверьте один затронутый префаб перед массовым повторным импортом |
Например, значок звезды импортируется, но центральное отверстие пропадает. Сначала откройте SVG для передачи и подтвердите наличие отверстия там. Если есть, сравните упрощенный экспорт значка в Unity. Если в той версии отверстие сохраняется, проверьте перекрывающиеся фигуры исходного значка, построение заливки или маску. Повторная трассировка полезна только если неверна сама геометрия контуров.
Проверяйте принятый ресурс и в целевой сборке, и в редакторе. Запишите, остается ли он читаемым в минимальном размере, совпадают ли цвета и прозрачность и сохраняются ли ссылки сцен или префабов после нового импорта. Решения производительности требуют профилирования своей сцены; расширение SVG не является измерением производительности.
Как это выглядит с PerfectVector
PerfectVector подходит перед импортом Unity, когда единственный пригодный исходник — растровая графика и нужны редактируемые фигуры. Загрузите один PNG или JPG с плоскими цветами в конвертер изображений в векторы PerfectVector, сравните трассированный силуэт и отверстия с оригиналом, затем проверьте скачанный SVG в векторном редакторе перед импортом Unity.
Используйте один характерный значок для всей передачи. Принимайте трассировку только когда нужные области можно редактировать, пустые пространства остаются открытыми, а очистка не исказила форму. Затем выполните описанную выше проверку назначения Unity.
Оставляйте фотографию, текстуру, мягкое свечение или намеренный спрайт пиксельной графики в растре, если это сохраняет задуманный вид. Для простого геометрического символа ручное рисование может давать больше контроля, чем трассировка. PerfectVector подготавливает исходную геометрию SVG; он не меняет набор поддерживаемых функций Unity и не проверяет отрисовку во время работы. Если различие форматов незнакомо, начните с содержимого файла SVG.
Частые вопросы
Нужен ли Unity 6 пакет Vector Graphics? Ответ зависит от минорной версии и назначения. Unity 6.3 имеет встроенный импорт SVG для UI Toolkit и Texture2D. Импорт Sprite и uGUI использует предварительный пакет 3.0. Более ранние версии Unity используют совместимый предварительный пакет 2.0.
Сделает ли смена расширения PNG на SVG векторный спрайт? Нет. Переименование не трассирует пиксели. Используйте исходный вектор, нарисуйте фигуры или трассируйте подходящую растровую графику и проверьте полученные контуры перед импортом Unity.
Может ли трассировка исправить SVG, неверно импортируемый Unity? Только когда исходной геометрии нужно восстановление. Если SVG содержит правильные контуры, но проблема вызвана неверным типом создаваемого ресурса или неподдерживаемым эффектом, сначала исправьте решение импорта или экспорта.
Источники
- Unity — Vector Graphics 3.0 package guide — Определяет разделение по версиям редактора и встроенные способы против пакета Sprite/uGUI.
- Unity — Work with vector graphics — Описывает нативные варианты ресурсов и неподдерживаемые функции SVG.
- Unity — Image import settings — Объясняет настройки векторных изображений UI Toolkit и управление тесселяцией.
- Unity — Vector Graphics 2.0 package manual — Рассматривает старый импортер, единицы сцены, управление опорной точкой и экспериментальный статус.
- W3C — SVG embedded content — Устанавливает возможность растрового содержимого в SVG.
Если ресурс Unity начинается с плоского PNG или JPG и нужны редактируемые контуры, преобразуйте изображение с PerfectVector. Проверьте силуэт, отверстия и ненужные фоновые фигуры, затем испытайте SVG в компоненте Unity и размерах отображения, которые планируете выпускать.
Ещё из блога

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

SVG в PNG с Sharp: размер, плотность и четкость
Рендерите SVG в прозрачный PNG конечного пиксельного размера с Sharp. Посмотрите воспроизводимый тест 1x и 2x, когда важна входная плотность и почему увеличение PNG не помогает.