Konva SVG 가져오기: 이미지와 편집 가능한 경로 중 선택하기

전체 SVG를 캔버스에 배치하려면 Konva.Image를 사용하세요. 애플리케이션에서 개별 경로 도형의 색상을 바꾸거나 조작해야 한다면 별도의 Konva.Path 노드를 사용하세요. SVG 이미지를 불러온다고 내부 요소마다 Konva 객체가 자동으로 생성되지는 않습니다. Konva SVG 가이드는 이를 서로 다른 접근 방식으로 설명합니다.

로고 선택기나 구성 도구에는 이미지 하나면 충분할 수 있습니다. 영역별 제어가 필요한 두 색상 배지에는 객체 구조가 중요합니다. 불러오기 방식을 선택하기 전에 사용자가 무엇을 편집해야 하는지 결정하고 캔버스 장면과 함께 SVG 원본을 보관하세요.

가져오기 전에 표현 방식 선택하기

Konva의 Path 튜토리얼은 data를 통해 SVG 경로 데이터를 받습니다. 이는 전체 SVG 문서가 아니라 경로의 d 속성 값입니다. d 값만 복사하면 부모 그룹의 변환, 상속 색상, SVG의 viewBox 동작은 함께 옮겨지지 않습니다.

원본 파일에 관한 별개의 질문도 있습니다. SVG에 경로가 들어 있기는 한가요? 아트워크가 SVG로 감싼 비트맵이라면 삽입 래스터 검사 가이드를 사용하세요. 유효한 경로 기반 SVG도 Konva에서는 이미지 노드 하나가 될 수 있습니다. 그렇다고 원본 파일이 가짜 벡터인 것은 아닙니다.

눈에 보이는 채우기 테스트가 있는 두 색상 예제

아래의 직접 만든 마크에는 채우기를 명시한 경로 두 개가 있습니다. 왼쪽 캔버스는 둘을 하나의 이미지로 불러옵니다. 오른쪽 캔버스는 같은 기하학적 형태로 Path 노드 두 개를 만듭니다. 둘 다 분홍색 채우기 요청과 배율 1.3을 받습니다.

왼쪽 분홍색 직사각형은 유용한 증거입니다. imageNode.fill()은 이미지 도형의 배경을 바꾸지만 불투명한 녹색·노란색 영역은 원본 색상을 유지합니다. 오른쪽의 paths[0].fill()은 첫 번째 영역만 바꿉니다. 이 테스트는 직접 작성한 기하학적 형태를 사용하며 PerfectVector 변환 결과가 아닙니다.

다음을 HTML 파일로 저장하고 로컬 개발 서버에서 제공하세요. Konva 10.6.0 버전을 고정하고 320 × 240 스테이지 두 개를 만들며 SVG 이미지 디코딩이 끝난 뒤 그립니다. 캡처를 위해 실행한 것과 같은 비교 코드입니다.

<div id="image-scene"></div>
<div id="path-scene"></div>
<script src="https://unpkg.com/konva@10.6.0/konva.min.js"></script>
<script type="module">
const parts = [
  { data: 'M20 80 C20 30 70 20 100 40 L100 140 C60 140 20 120 20 80 Z', fill: '#176b55' },
  { data: 'M100 40 C150 20 180 50 180 85 C180 120 145 140 100 140 Z', fill: '#e9b949' }
];
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">${parts.map(p => `<path d="${p.data}" fill="${p.fill}"/>`).join('')}</svg>`;
const source = new Image();
source.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
await source.decode();
 
function makeStage(container) {
  const stage = new Konva.Stage({ container, width: 320, height: 240 });
  const layer = new Konva.Layer();
  stage.add(layer);
  return { stage, layer };
}
const imageScene = makeStage('image-scene');
const pathScene = makeStage('path-scene');
const imageNode = new Konva.Image({
  image: source, x: 30, y: 16, width: 200, height: 160
});
imageScene.layer.add(imageNode);
const group = new Konva.Group({ x: 30, y: 16 });
const paths = parts.map(p => new Konva.Path(p));
group.add(...paths);
pathScene.layer.add(group);
 
// Compare the same fill request on the two representations.
imageNode.fill('#db567d');
paths[0].fill('#db567d');
 
// Resize both without changing their source geometry.
imageNode.scale({ x: 1.3, y: 1.3 });
group.scale({ x: 1.3, y: 1.3 });
imageScene.layer.draw();
pathScene.layer.draw();
 
const png = pathScene.stage.toDataURL({ pixelRatio: 2 });
const exported = new Image();
exported.src = png;
await exported.decode();
</script>

의도적으로 작게 만든 이 예제에서는 모든 경로가 자체 페인팅을 가지며 같은 좌표를 사용합니다. 그룹은 편집 가능한 두 경로에 하나의 위치와 배율을 부여합니다. 그룹 배율을 바꿔도 각 경로의 data는 유지되며 그룹이 그려지는 위치와 크기가 바뀝니다.

전체 이미지 배치만 필요한 기존의 신뢰할 수 있는 SVG 파일에는 Image 튜토리얼이 일반적인 이미지 불러오기 작업 흐름을 보여줍니다. SVG URL을 이미지로 불러오고 로딩 완료를 기다린 뒤 Konva.Image에 전달하세요. SVG 마크업을 렌더링하는 React 컴포넌트는 캔버스가 기대하는 이미지 객체와 다른 값입니다.

복잡한 아트워크에서는 경로 데이터 외에도 옮기기

예제의 parts 배열은 알려진 두 도형을 위한 명시적인 모델입니다. SVG 가져오기 도구가 아닙니다. 내보낸 아트워크에 비슷한 방식을 사용하기 전에 무엇이 외관을 만드는지 검사하세요.

• 그룹 변환은 모든 자식을 이동, 회전, 확대·축소할 수 있습니다. 그 관계를 유지하거나 의도적으로 변환을 기하학적 형태에 반영하세요.
• 페인팅은 상위 요소나 CSS 규칙에서 올 수 있습니다. 모든 경로가 선언한다고 가정하지 말고 의도한 채우기와 스트로크를 확인하세요.
• 그레이디언트, 클리핑, 마스크, 필터에는 자체 정의와 참조가 있습니다. 복사한 d 문자열은 그 효과를 복원하지 않습니다.
• 텍스트와 기본 도형은 별도 처리가 필요할 수 있습니다. 보이는 모든 객체가 이미 경로라고 가정하지 마세요.

테스트 중에는 복원한 결과 옆에 원본 렌더링을 두세요. 알아볼 수 있는 영역 하나부터 시작해 위치와 색상을 비교하고 그다음 나머지 도형을 추가하세요. SVG 편집 가이드는 객체 구조를 다루기 어려울 때 원본을 정리하는 방법을 다룹니다.

개별 경로 제어가 불필요하다면 전체 SVG를 이미지로 불러와 복원 작업을 피할 수 있습니다. Konva는 canvg 같은 외부 라이브러리로 SVG를 렌더링한 뒤 결과 캔버스를 Konva.Image에 넣는 방법도 설명합니다. 이 역시 이미지 표현이며 원본 경로마다 별도 Konva 노드를 제공하지 않습니다. 문서의 옵션을 확인하세요.

원본 색상만 달라지면 되는 아트워크에는 SVG 자체를 수정하고 이미지를 다시 불러오는 방법도 있습니다. Konva 유지관리자는 react-konva 이슈 530에서 그 작업 흐름을 설명합니다. 모든 채우기를 무차별적으로 바꿔 의도한 색상 차이를 잃지 말고 알려진 SVG에 적합한 구조적인 편집을 사용하세요.

캔버스 내보내기는 래스터 전달로 취급하기

예제는 pathScene.stage.toDataURL({ pixelRatio: 2 })를 호출합니다. 320 × 240 스테이지는 디코딩된 640 × 480 PNG를 생성합니다. pixelRatio를 높이면 내보낸 픽셀 치수가 바뀌며 PNG가 편집 가능한 SVG로 바뀌지는 않습니다. Konva의 내보내기 문서는 이 설정을 설명합니다.

다음 세 전달물을 구분하세요.

1. 벡터 편집과 비교를 위한 원본 SVG.
2. 경로 또는 이미지 참조와 앱이 지원하는 편집을 포함한 애플리케이션 장면 데이터.
3. 렌더링한 그림이 필요한 용도를 위한 PNG나 다른 래스터 출력.

내보낸 PNG를 다시 열고 치수와 작은 디테일을 검사하세요. Konva SVG 가이드가 렌더링 호환성 차이를 언급하므로 애플리케이션이 지원하는 브라우저에서 SVG 이미지도 테스트하세요. 이 예제는 단순하고 자체 완결적인 SVG 하나를 테스트하며 모든 출력 파일이나 효과의 지원을 입증하지 않습니다.

캔버스 미리보기만으로 벡터 품질을 판단하지 마세요. 픽셀화된 SVG 가이드는 원본 기하학적 형태와 래스터 미리보기 및 표시 크기를 구분합니다.

PerfectVector가 원본에 도움이 되는 경우

시작 에셋이 PNG나 JPG 모티프뿐이라면 Konva 장면을 만들기 전에 PerfectVector로 편집 가능한 SVG 기하학적 형태를 복원할 수 있습니다. 이미지를 벡터로 변환하고 편집기에서 결과를 연 뒤 경로를 앱에 매핑하기 전에 실루엣, 구멍, 색상 영역을 검사하세요.

벡터화는 Konva 장면 모델이나 임의의 SVG 파서를 만들지 않습니다. 여전히 표현 방식을 선택하고 필요한 속성을 옮겨야 합니다. 이미 사용 가능한 SVG 마스터가 있다면 그 파일로 작업하세요. 픽셀로 유지해야 할 사진이나 채색 질감에는 추적 없이 이미지 노드를 사용하는 것이 적합한 경우가 많습니다.

자신의 아트워크로 가져오기 확인하기

재사용 가능한 편집기에 SVG를 추가하기 전에 다음을 확인하세요.

1. 사용자에게 필요한 제어 기능에 따라 전체 이미지 노드 하나 또는 별도 도형 노드를 선택하세요.
2. 한 영역의 색상을 바꾸고 의도한 객체만 바뀌는지 확인하세요.
3. 전체 디자인 크기를 변경하고 간격, 스트로크 외관, 클리핑을 확인하세요.
4. 필요한 픽셀 치수로 내보내고 래스터 파일을 다시 여세요.
5. 캔버스 출력이 유일한 복사본이 되지 않도록 저장한 SVG 마스터를 독립적으로 다시 여세요.

FAQ

Konva.Image가 SVG 안의 경로를 편집 가능하게 만드나요? 아닙니다. SVG를 하나의 이미지 노드로 표시합니다. 개별 경로 영역을 제어하려면 적절한 경로 데이터로 별도 Path 노드를 만들거나 문서 구조를 유지하는 SVG 편집 작업 흐름을 사용하세요.

fill이 SVG 색상을 바꾸는 대신 직사각형을 추가하는 이유는 무엇인가요? Image 노드에서 fill은 이미지 콘텐츠 뒤의 이미지 도형을 칠합니다. SVG 내부의 채우기를 다시 쓰지 않습니다. 원본 SVG를 편집해 다시 불러오거나 앱에 개별 색상 제어가 필요하면 별도 Path 노드를 사용하세요.

pixelRatio를 높이면 벡터 파일로 내보내지나요? 아닙니다. 이 예제에서 pixelRatio 2는 스테이지 너비와 높이의 두 배인 PNG를 생성합니다. 벡터 편집을 위해 SVG 원본을 별도로 보관하세요.

Sources

1. Konva — 캔버스의 SVG — Image, Path, 외부 렌더러 옵션과 브라우저 호환성 제한을 설명합니다.
2. Konva — Path 튜토리얼 — SVG 경로 데이터와 명시적인 페인팅 속성으로 Path를 만드는 방법을 설명합니다.
3. Konva — Image 튜토리얼 — 이미지를 불러와 Konva 장면에 배치하는 방법을 보여줍니다.
4. Konva — 고품질 이미지 내보내기 — 래스터 내보내기와 pixelRatio가 출력 치수에 미치는 영향을 설명합니다.
5. Konva — react-konva 이슈 530 — SVG 이미지 색상 변경에 관한 유지관리자의 원본 편집 및 재로딩 방식을 기록합니다.

래스터 아이콘만으로 시작하나요? 이미지를 SVG 경로로 바꾸고 복원한 색상 영역을 검사한 뒤 나머지 편집기 기능을 연결하기 전에 Konva에서 영역 하나를 테스트하세요.