PixiJS SVG 가져오기: Graphics와 텍스처 중 선택하기

PixiJS는 SVG를 두 가지 방식으로 사용할 수 있습니다. Graphics.svg()는 지원되는 그리기 기하학적 형태를 파싱하고, SVG를 텍스처로 불러오면 Sprite에 표시할 픽셀이 제공됩니다. 아트워크의 크기를 크게 바꿔야 한다면 기하학적 형태를, 의도한 표시 크기에 맞춘 래스터가 적합하다면 텍스처를 선택하세요. PixiJS의 SVG 가이드는 두 방식을 설명합니다.

선택하기 전에 같은 파일을 두 방식으로 테스트하세요. 작은 엠블럼은 두 방식 모두에서 구멍과 색상이 유지되었지만 기하학적 형태 방식에서는 그룹 이동이 누락되었습니다. 텍스처는 브라우저와 같은 위치에 표시되었고 확대하면 더 흐려졌습니다. 이들은 서로 다른 수정이 필요한 별개의 문제입니다.

장면에 필요한 것 결정하기

Graphics 객체는 Pixi 그리기 콘텐츠이며 원본 요소 ID를 가진 SVG DOM 트리는 아닙니다. Graphics 가이드가 설명하듯 컨텍스트를 여러 인스턴스에서 공유할 수 있습니다. 개별 원본 경로를 편집하거나 나중에 다른 SVG로 내보내야 한다면 원본 SVG를 보관하세요. 두 방식 모두 최종적으로 화면에 픽셀을 그립니다.

곡선, 구멍, 변환 테스트하기

이 예제는 PixiJS 8.21.0, 96 × 96 SVG, 렌더러 해상도 1, 해상도 1로 불러온 SVG 텍스처를 사용합니다. 작은 버전은 기본 크기로 그리고 큰 버전은 배율 3을 사용합니다. 직접 만든 엠블럼에는 두 색상 경로와 각 방향으로 8 SVG 단위 이동한 그룹이 있습니다. 안쪽 윤곽은 바깥 윤곽과 반대 방향으로 감겨 구멍을 만듭니다.

같은 원본 SVG를 세 렌더러로 표시

세 열 모두에서 구멍을 통해 체크무늬가 보입니다. 체크무늬는 아트워크 뒤의 배경이며 구멍에 칠한 흰색 도형이 아닙니다. 가운데 열의 위치 어긋남은 두 크기 모두에서 보입니다. 기본 배율의 8 단위는 배율 3에서 표시 픽셀 24개가 됩니다.

이 관찰은 이 원본과 버전에 적용됩니다. 모든 구멍, 변환, 그레이디언트, 내보낸 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>

두 방식 실행하기

emblem.svg와 함께 HTTP로 제공되는 HTML 페이지에 이 스크립트를 넣으세요. 버전을 고정한 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 }
});

테스트한 빌드에서는 논리적 텍스처 크기 96 × 96, 원본 해상도 3인 288 × 288 픽셀 원본이 생성되었습니다. 스프라이트를 만들 때 largeTexture를 사용하세요. 쿼리 문자열은 이 실험에 별도의 캐시 키를 제공하며 서버는 그 URL에서도 같은 SVG를 제공해야 합니다. Pixi의 Assets 가이드는 URL 기반 캐시를 설명하고 텍스처 가이드는 텍스처와 원본을 구분합니다.

실제로 출시할 렌더러 해상도까지 포함해 필요한 최대 화면 표시 크기에 맞춰 해상도를 선택하세요. 렌더러 해상도만 높여서는 이미 불러온 저해상도 텍스처에 디테일이 추가되지 않습니다. 가장 작은 아이콘 크기도 확인하세요. 최종 표시 크기가 너무 작으면 원본을 키워도 작은 구멍이 알아보기 쉬워지지 않습니다.

디테일이 누락되었습니다

브라우저에서 원본을 확인한 뒤 Pixi에서 단순화한 복사본을 테스트하세요. SVG를 문제가 있는 도형만 남기도록 줄이고 그룹, 페인팅, 효과를 하나씩 다시 추가하세요. Pixi의 Graphics 문서는 SVG의 일부만 지원한다고 설명합니다. 성공적으로 불러오는 것은 완전한 호환성 확인이 아닙니다.

정해진 크기에서 아트워크를 안정적으로 유지할 수 있다면 래스터 전달용 복사본을 보관하세요. 단순한 기하학적 기호는 Pixi에서 직접 그리는 편이 유지하기 쉬울 수 있습니다. 항상 더 빠르거나 메모리를 덜 쓴다는 측정하지 않은 주장으로 방식을 선택하지 마세요. 자신의 장면과 대상 기기에서 테스트하세요.

가져오기 전에 원본 준비하기

SVG에 배치된 PNG가 있다면 파일명을 바꾸거나 기하학적 형태로 가져와도 없는 벡터 윤곽이 복원되지는 않습니다. 먼저 삽입 래스터 점검 목록으로 원본을 검사하세요. 더 넓은 이미지 벡터화 가이드는 추적이 유용한 경우를 설명합니다.

평면적인 PNG나 JPG만 남아 있고 아이콘의 편집 가능한 원본 도형이 필요할 때 PerfectVector가 적합합니다. 이미지를 SVG로 변환하고 SVG 편집기에서 윤곽, 분리된 색상, 작은 구멍을 확인한 뒤 Pixi 테스트를 반복하세요. 기존의 깔끔한 벡터 마스터가 있다면 바로 사용하세요. 추적이 Pixi의 변환 처리를 수정하거나 텍스처 해상도를 설정하지는 않습니다.

다른 엔진은 자체적인 가져오기 방식을 사용합니다. Godot SVG 가져오기 가이드는 그 엔진의 텍스처와 오버샘플링 동작을 설명하고 Unity SVG 가이드는 별도의 작업 흐름을 다룹니다. SVG 확장자만 보고 한 엔진의 설정을 다른 엔진에 적용하지 마세요.

전달할 아이콘 확인하기

에셋을 확정하기 전에 의도한 최소·최대 크기에서 브라우저로 렌더링한 원본과 비교하세요. 대비되는 배경 위의 구멍, 그룹 위치, 필요한 효과를 확인하세요. Pixi 버전, 렌더러 해상도, 텍스처 원본 픽셀 치수, 장면 배율을 기록하세요. 프로젝트에 SVG 마스터를 보관해 나중에 레이아웃이나 가져오기 도구가 바뀌어도 같은 원본을 기준으로 테스트할 수 있게 하세요.

래스터 아트워크만 있나요? PerfectVector로 편집 가능한 SVG를 준비하고 윤곽과 도형 사이의 빈 공간을 확인한 뒤 인터페이스에서 사용하는 크기로 실제 Pixi 가져오기 방식을 테스트하세요.

FAQ

SVG를 PixiJS에 가져오면 벡터 기하학적 형태로 유지되나요? 방식에 따라 다릅니다. Graphics.svg는 지원되는 그리기 기하학적 형태를 파싱합니다. SVG를 텍스처로 불러오면 Sprite에 래스터 원본이 제공됩니다. 원본 편집과 향후 내보내기를 위해 SVG 원본을 별도로 보관하세요.

PixiJS SVG 스프라이트가 흐려 보일 수 있는 이유는 무엇인가요? 스프라이트는 텍스처의 픽셀 치수보다 크게 표시될 수 있습니다. 원본 해상도와 의도한 최대 표시 크기를 확인하세요. 적절한 크기의 텍스처를 불러오거나 지원되는 아트워크에 기하학적 형태 방식을 테스트하세요.

Graphics.svg는 모든 SVG 기능을 유지하나요? 아닙니다. SVG의 일부만 지원합니다. 이 PixiJS 8.21.0 예제에서는 구멍과 두 색상이 유지되었지만 그룹 이동은 유지되지 않았습니다. 자신이 내보낸 파일을 브라우저 기준 이미지와 비교해 테스트하세요.

Sources

1. PixiJS SVG 가이드 — 텍스처와 기하학적 형태 가져오기 방식 및 텍스처 해상도를 설명합니다.
2. PixiJS Graphics 가이드 — GraphicsContext 공유와 SVG 지원 범위를 설명합니다.
3. PixiJS Assets 가이드 — 에셋 불러오기와 URL 기반 캐시를 설명합니다.
4. PixiJS 텍스처 가이드 — 텍스처와 원본의 관계를 설명합니다.
5. PixiJS 8.21.0 SVG 파서 — 가져오기 차이를 조사하기 위한 버전 고정 구현을 제공합니다.