Excalidraw SVG 가져오기: 어떤 부분을 편집할 수 있나요?
Excalidraw의 SVG가 단일 이미지인 때와 부분별 편집 가능한 도형인 때를 알아보세요. 테스트한 변환, 사라진 구멍과 다음 확인 사항을 살펴봅니다.
목차
SVG를 Excalidraw에 놓으면 선명하고 크기 조절 가능한 이미지가 되지만 개별 경로를 편집할 수 있는 것은 아닙니다. 일부 색상이나 위치를 바꾸려면 네이티브 요소로 구성된 Excalidraw 장면이 필요합니다. SVG-to-Excalidraw 변환기가 그런 요소를 만들 수 있지만 결과를 시각적으로 확인해야 합니다. Excalidraw의 SVG 가져오기 토론은 이 단일 객체와 편집 가능 부분의 문제를 설명합니다.
투명한 구멍이 있는 작은 2색 아이콘을 테스트했습니다. 고정 버전 변환기가 선택 가능한 Excalidraw 요소 세 개를 만들었지만 SVG에서 뚜렷했던 구멍은 채워졌습니다. 편집 가능성과 충실도는 별도로 확인해야 한다는 유용한 사례입니다.
‘Excalidraw의 SVG’가 뜻할 수 있는 세 가지
| 가진 것 | 편집 가능한 것 | 의존하기 전에 확인할 사항 |
|---|---|---|
| 이미지로 배치한 SVG | 위치, 크기와 이미지 단위 속성 | 청록색 고리와 금색 점을 따로 선택할 수 있는가? |
| 변환한 Excalidraw 장면 | 지원 SVG 도형에서 생성된 네이티브 요소 | 부분, 색상과 빈 공간이 여전히 올바른가? |
| Excalidraw 그림에서 내보낸 SVG | 저장 방식에 따라 삽입된 Excalidraw 장면이 있을 수 있음 | 같은 작업 흐름에서 다시 열고 요소 확인 |
세 번째 사례는 반대 방향입니다. 도구가 SVG 내보내기에 Excalidraw 소스 데이터를 넣어 자신의 그림을 다시 열어 편집하도록 할 수 있습니다. 예를 들어 Excalidraw VS Code 확장은 장면 데이터가 삽입된 .excalidraw.svg 파일을 설명합니다. 임의의 SVG 일러스트에 이미 Excalidraw 도형이 있다는 뜻은 아닙니다.
가져온 그래픽의 그룹이 해제되지 않으면 먼저 선택 객체의 구조를 파악하세요. SVG 그룹 해제 가이드는 이미지 객체, 복합 경로와 실제 그룹을 구분합니다. Excalidraw에는 그 원본 파일 문제 외에 자체 장면 형식도 있습니다.
SVG 경로만 편집하면 된다면 Boxy SVG 추적·가져오기 검사를 따르고 SVG 원본을 유지하세요. 네이티브 장면 요소가 필요할 때 Excalidraw 장면으로 변환하세요.
작은 변환 테스트: 도형은 남고 구멍은 사라졌습니다
원본은 직접 작성한 SVG입니다. even-odd 복합 경로의 청록색 고리 하나와 금색 원이 있습니다. 원본 고리 중앙은 흰색으로 칠한 것이 아니라 실제 투명 영역이었습니다. npm 패키지 버전 0.0.2로 공식 svg-to-excalidraw 저장소를 실행하고 반환 장면을 .excalidraw 파일로 저장했습니다. Excalidraw에서 열고 비교용 투명 PNG를 내보냈습니다.
변환은 오류를 보고하지 않았고 네이티브 요소 세 개, 즉 청록색 그리기 요소 두 개와 금색 타원 하나를 만들었습니다. 금색 강조 부분은 따로 선택할 수 있었습니다. 하지만 투명한 중앙은 모양 검사를 통과하지 못했습니다. 원본 렌더링의 중앙 픽셀은 투명했지만 Excalidraw 투명 PNG 내보내기의 대응 픽셀은 불투명 청록색이었습니다. 오류 없는 변환 응답도 그림의 일치를 보장하지 않았습니다.
이는 의도적으로 좁은 테스트 하나이며 모든 SVG나 변환 방식에 관한 주장은 아닙니다. 별도의 SVG Chop 실험도 복잡한 SVG 구조를 변환의 어려움으로 다룹니다. 객체 개수를 잠깐 보는 것만으로는 부족합니다. 디자인에서 쓰는 구멍, 마스크, 클리핑, 그라디언트, 텍스트와 중첩 그룹은 각각 테스트해야 합니다.
자신의 SVG 확인하기
- 원본 SVG를 보관하세요. 가져오기나 변환 전에 사본을 저장하세요. 바꾸려는 영역이 이미 별도 경로나 도형인지 확인하세요. 복합 경로 하나에 구멍이 있어도 따로 선택 가능한 조각이 있는 것은 아닙니다.
- 이 그림에서 ‘편집 가능’의 의미를 정하세요. 일러스트의 크기와 위치만 바꾸면 이미지만으로 충분할 수 있습니다. 조각을 옮기거나 색을 바꾸려면 해당 조각이 네이티브 장면 요소로 존재해야 합니다.
- 사본에서 변환 방식을 시도하세요. 오픈 소스 SVG-to-Excalidraw 프로젝트는 SVG 도형을 Excalidraw 장면 콘텐츠로 변환합니다. 현재 설정을 확인하고 사용하는 패키지 버전을 기록하세요. 일반 이미지 배치가 경로를 노출한다고 가정하지 말고 결과 장면을 가져오거나 여세요.
- 조각을 세고 선택하세요. 본체 없이 강조 부분을 선택할 수 있나요? 다른 색은 그대로 두면서 색을 바꿀 수 있나요? 저장된 장면을 다시 열고 편집을 반복하세요.
- 객체뿐 아니라 그림을 비교하세요. 원본과 Excalidraw 내보내기를 대비되는 배경 위에 놓으세요. 구멍, 겹침, 가장자리, 텍스트와 필요한 효과를 확인하세요. 이 테스트는 ‘요소 세 개’ 검사에는 통과했겠지만 여기서는 실패했습니다.
변환이 하나의 의도한 부분을 여러 그리기 요소로 나누면 그룹으로 이동을 쉽게 할 수 있지만 원래 경로 구조가 복원되지는 않습니다. 구멍이 사라지면 원본을 수정하거나 다른 편집기를 사용하세요. Excalidraw가 필요한 기능을 유지하지 못하면 편집 가능한 원본은 벡터 편집기에 보관하세요.
PerfectVector의 역할
PerfectVector는 SVG 경로가 아직 없는 평면 PNG 아이콘처럼 원본이 래스터 그림일 때만 앞 단계에서 도움이 됩니다. 클립아트를 SVG로 변환하고 색상 영역과 빈 공간이 유지됐는지 확인한 뒤 Excalidraw 변환 전에 도형을 정리하세요. 작은 아이콘 준비 가이드는 원본 선명도와 일관성을 다룹니다. 벡터화만으로 Excalidraw에 배치한 이미지가 네이티브 장면 요소가 되지는 않으며 새로 추적한 SVG에도 위의 대상 앱 검사가 필요합니다.
이미 적합한 벡터 도형을 포함한 SVG는 다시 추적하지 마세요. 원본과 변환 장면을 비교하세요. 관련 draw.io 사용자 지정 SVG 도형 가이드도 다른 다이어그램 편집기에서 이미지와 네이티브 도형을 비슷하게 구분합니다.
FAQ
배치한 SVG 이미지를 그룹 해제해 Excalidraw 도형으로 만들 수 있나요? 이미지 단위 선택은 원래 SVG 부분을 네이티브 Excalidraw 요소로 노출하지 않습니다. 별도 장면 도형이 필요하면 변환 작업 흐름을 쓰고 결과를 확인하세요.
SVG-to-Excalidraw 변환이 모든 구멍을 유지하나요? 그렇게 가정하지 마세요. 버전 0.0.2 테스트에서는 even-odd 고리가 편집 가능한 그리기 요소가 됐지만 투명한 중앙은 채워졌습니다. 특히 빈 공간이 중요한 곳에서 원본과 저장 장면을 비교하세요.
가져오기 전에 SVG를 벡터화해야 하나요? 아닙니다. SVG에 이미 필요한 도형이 있다면 구조와 Excalidraw 변환을 확인하세요. PNG나 JPG 같은 래스터 그림으로 시작할 때 벡터화가 관련됩니다.
Sources
- Excalidraw 토론 #6082 — 가져온 SVG가 편집 가능 부분 대신 한 블록으로 동작하는 사용자 질문입니다.
- Excalidraw — svg-to-excalidraw — 고정 버전 원본 아이콘 테스트에 쓴 공식 오픈 소스 변환 방식입니다.
- VS Code용 Excalidraw Editor 확장 — Excalidraw 장면 파일과 장면 데이터를 삽입한 SVG·PNG 내보내기를 설명합니다.
- Minixcali — SVG Chop — 도형 관련 주의점을 포함한 SVG 부분의 Excalidraw 요소 변환 독립 실험입니다.
PNG 아이콘으로 시작한다면 PerfectVector로 SVG 후보를 만들고 별도 영역과 구멍을 확인하세요. 그림에 사용하기 전에 저장된 Excalidraw 장면을 테스트하세요.
