Импорт SVG в PixiJS: Graphics или текстура

PixiJS может использовать SVG двумя способами: Graphics.svg() разбирает поддерживаемую геометрию рисунка, а загрузка SVG как текстуры дает Sprite пиксели для отображения. Выбирайте геометрию, когда графике нужно значительное масштабирование, и текстуру, когда ресурсу подходит растр под нужный размер отображения. PixiJS описывает оба способа в руководстве по SVG.

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

Определите потребности сцены

Объект Graphics — рисуемое содержимое Pixi, а не дерево SVG DOM с исходными ID элементов. Его контекст можно совместно использовать в нескольких экземплярах, как объясняет руководство по Graphics. Сохраните исходный SVG, если нужно редактировать отдельные исходные контуры или позднее экспортировать другой SVG. Оба способа в итоге рисуют пиксели на экране.

Проверьте кривую, отверстие и преобразование

В этом примере используются PixiJS 8.21.0, SVG 96 × 96, разрешение средства отрисовки 1 и текстура SVG, загруженная с разрешением 1. Маленькая версия рисуется в естественном размере; большая использует масштаб 3. Исходная эмблема содержит два цветных контура и группу с переносом на восемь единиц SVG в каждом направлении. Ее внутренний контур идет противоположно наружному, образуя отверстие.

Один исходный SVG через три средства отрисовки

Шахматный фон просвечивает через отверстие во всех трех столбцах. Это фон за изображением, а не белая фигура, нарисованная в отверстии. Смещение среднего столбца видно в обоих размерах: восемь единиц в естественном масштабе превращаются в 24 отображаемых пикселя при масштабе 3.

Эти наблюдения относятся к этому исходнику и версии. Они не устанавливают, что каждое отверстие, преобразование, градиент или экспортированный SVG работает так же.

Сохраните исходник SVG

Сохраните это как emblem.svg рядом со страницей. Это исходная графика, нарисованная для сравнения, а не результат векторизации.

<svg xmlns="http://www.w3.org/2000/svg"
     width="96" height="96" viewBox="0 0 96 96">
  <g transform="translate(8 8)">
    <path fill="#145c61" d="M40 0
      C62 0 80 18 80 40 C80 62 62 80 40 80
      C18 80 0 62 0 40 C0 18 18 0 40 0 Z
      M40 20 C29 20 20 29 20 40 C20 51 29 60 40 60
      C51 60 60 51 60 40 C60 29 51 20 40 20 Z"/>
    <path fill="#e68546"
      d="M62 5 C74 9 80 21 78 34 L61 32
         C63 23 61 15 55 10 Z"/>
  </g>
</svg>

Запустите оба способа

Поместите этот скрипт в HTML-страницу, отдаваемую по HTTP рядом с emblem.svg. Он импортирует закрепленную сборку Pixi, получает ваш доверенный SVG и рисует естественные и увеличенные версии в двух столбцах. Левый столбец использует геометрию; правый — текстуру.

<script type="module">
import { Application, Assets, Graphics, Sprite }
  from 'https://cdn.jsdelivr.net/npm/pixi.js@8.21.0/dist/pixi.mjs';
 
const app = new Application();
await app.init({
  width: 640, height: 420, resolution: 1,
  antialias: true, background: '#e7eeea', preference: 'webgl'
});
document.body.append(app.canvas);
 
const response = await fetch('emblem.svg');
if (!response.ok) throw new Error('SVG request failed');
const svgText = await response.text();
const texture = await Assets.load({
  src: 'emblem.svg', data: { resolution: 1 }
});
 
for (const [scale, y] of [[1, 12], [3, 120]]) {
  const geometry = new Graphics().svg(svgText);
  geometry.scale.set(scale);
  geometry.position.set(16, y);
  const sprite = new Sprite(texture);
  sprite.scale.set(scale);
  sprite.position.set(336, y);
  app.stage.addChild(geometry, sprite);
}
</script>

Также откройте исходный SVG в браузере. Сравните внешний контур, отверстие, акцентную фигуру и положение, а не только загрузку файла без ошибки.

Исправьте именно наблюдаемое несовпадение

Геометрия сместилась

В этом тесте Graphics.svg() не применил окружающий translate(8 8). Реализация SVG-парсера закрепленной версии полезна для проверки поведения версии вашего проекта.

Для этого конкретного файла замена строки положения геометрии следующей компенсирует этот единственный известный перенос:

geometry.position.set(16 + 8 * scale, y + 8 * scale);

Коррекция включает scale, поскольку потерянный перенос относится к системе координат исходника. При масштабе 3 коррекция равна 24 пикселям в каждом направлении. Это не универсальное сведение преобразований. Файл с вложенными поворотами, скосами или разными преобразованиями отдельных контуров требует правильно подготовленного SVG для передачи или другого способа отрисовки. Сравните экспортированный передаваемый файл с редактируемым оригиналом.

Увеличенная текстура размыта

Текстура SVG на рисунке содержит 96 × 96 пикселей. Масштабирование ее спрайта до 288 × 288 не перечитывает исходные кривые. Чтобы подготовить больше пикселей, загрузите отдельную текстуру с более высоким разрешением:

const largeTexture = await Assets.load({
  src: 'emblem.svg?resolution=3',
  data: { resolution: 3 }
});

В проверенной сборке это создало источник 288 × 288 пикселей с логическим размером текстуры 96 × 96 и разрешением источника 3. При создании спрайта используйте largeTexture. Строка запроса дает этому эксперименту отдельный ключ кеша; сервер должен отдавать тот же SVG по этому URL. Руководство по Assets Pixi объясняет кеширование по URL, а руководство по текстурам различает текстуру и ее источник.

Выбирайте разрешение под максимальное нужное экранное использование, включая реально выпускаемое разрешение средства отрисовки. Одно повышение разрешения средства отрисовки не добавляет деталей уже загруженной текстуре низкого разрешения. Также проверьте минимальный размер значка: больший исходник не сделает крошечное отверстие читаемым, если конечное отображение слишком мало.

Деталь отсутствует

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

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

Подготовьте исходник перед импортом

Если SVG содержит размещенный PNG, изменение имени файла или импорт как геометрии не восстанавливают отсутствующие векторные контуры. Сначала используйте список проверок встроенного растра. Более общее руководство по векторизации изображений объясняет, когда полезна трассировка.

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

Другие движки делают свой выбор при импорте. Руководство по импорту SVG в Godot объясняет поведение текстур и повышенной дискретизации там; руководство по SVG в Unity рассматривает отдельный процесс. Не переносите настройки одного движка в другой только по расширению SVG.

Проверьте передаваемый значок

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

Есть только растровая графика? Подготовьте редактируемый SVG с PerfectVector, проверьте контур и пустые пространства, затем проверьте реальный способ импорта Pixi в размерах вашего интерфейса.

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

Сохраняет ли импорт SVG в PixiJS векторную геометрию? Это зависит от способа. Graphics.svg разбирает поддерживаемую геометрию рисунка. Загрузка SVG как текстуры дает Sprite растровый источник. Сохраните исходный SVG отдельно для редактирования исходника и будущих экспортов.

Почему SVG-спрайт PixiJS может выглядеть размытым? Спрайт может показывать текстуру крупнее ее пиксельных размеров. Проверьте разрешение источника и максимальный нужный размер отображения. Загрузите текстуру подходящего размера или проверьте геометрический способ для поддерживаемой графики.

Сохранит ли Graphics.svg все функции SVG? Нет. Он поддерживает подмножество SVG. В этом примере PixiJS 8.21.0 отверстие и два цвета сохранились, а перенос группы — нет. Проверьте свой экспортированный файл по эталону браузера.

Источники

1. PixiJS SVG guide — Описывает импорт текстуры и геометрии и разрешение текстуры.
2. PixiJS Graphics guide — Объясняет совместное использование GraphicsContext и границы поддержки SVG.
3. PixiJS Assets guide — Описывает загрузку ресурсов и кеширование по URL.
4. PixiJS texture guide — Описывает связь текстур с их источниками.
5. PixiJS 8.21.0 SVG parser — Предоставляет реализацию закрепленной версии для исследования различий импорта.