draw.io 사용자 지정 SVG 도형: 이미지인가요, 스텐실인가요?
draw.io에서 포함 SVG 이미지와 네이티브 XML 스텐실 중 선택하세요. 편집 가능한 색상과 연결점을 확인한 뒤 재사용 라이브러리에 적절한 객체를 저장하세요.
목차
draw.io의 사용자 지정 SVG 도형은 삽입 후 무엇을 바꿀지부터 결정하세요. 포함 SVG 이미지는 아트워크의 모양이 필요할 때 유용합니다. 다이어그램 도형, 스타일, 특정 연결점을 정의하려면 네이티브 XML 스텐실을 사용하세요. 사용자 지정 라이브러리는 어느 항목이든 재사용을 위해 저장할 수 있습니다.
각 선택은 서로 다른 문제를 해결합니다. SVG를 라이브러리에 저장한다고 경로가 네이티브 다이어그램 도형으로 바뀌지는 않습니다. draw.io 사용자 지정 도형 참조는 포함 이미지와 자체 XML 형식으로 정의한 도형을 구분합니다.
Mermaid로 다이어그램을 작성한다면 사용자 지정 SVG 아이콘 팩 작업 흐름으로 아트워크를 등록하면서 라벨과 연결선은 다이어그램 소스에 유지하세요.
아트워크를 변환하기 전에 동작 선택하기
원형 표시등 하나가 있는 직사각형 몸체의 작은 장치 기호를 생각해 보세요. 몇 개의 프로세스 다이어그램에서 재사용하려고 합니다.
발표용 다이어그램에서는 장치가 일관된 모습으로 보이기만 하면 될 수 있습니다. 연결 다이어그램에서는 선이 왼쪽과 오른쪽 가장자리의 중간에 붙어야 할 수 있습니다. 다른 파일을 준비하기 전에 요구 사항을 기록하세요.
| 필요한 것 | 시작 방식 | 이후 확인 |
|---|---|---|
| 장치 일러스트레이션 모양 보존 | 포함 SVG 이미지 | 아트워크, 비율, 라벨 가독성 |
| draw.io 안에서 선택한 SVG 색상 변경 | 적절한 CSS 규칙이 있는 포함 SVG | 실제 사용할 수 있는 채우기와 선 제어 |
| 네이티브 도형과 고정 부착점 정의 | 사용자 지정 XML 스텐실 | 스타일 변경과 연결선 배치 |
| 여러 다이어그램에서 항목 재사용 | 사용자 지정 라이브러리 | 삽입한 사본이 준비한 동작을 유지하는지 |
모양만으로 충분하면 SVG 삽입하기
공식 SVG 삽입 안내는 컴퓨터의 SVG 파일을 캔버스로 드래그하는 방법을 설명합니다. Arrange → Insert → Image도 사용할 수 있습니다. 메시지가 나오면 Actual Size를 선택한 뒤 필요에 맞게 아트워크 크기를 조절하세요.
장치 예제에는 작업 사본을 사용하고 크기 조절 후 작은 원형 표시등을 확인하세요. 전체 크기에서 명확한 도형도 작은 다이어그램에서는 유용한 세부 요소를 잃을 수 있습니다.
편집 가능한 아트워크 소스를 별도로 보관하세요. 장치 안의 원을 이동해야 한다면 소스 편집기에서 바꾸고 전달용 이미지를 교체하세요. SVG에 보이는 부분이 여러 개라는 이유만으로 Ungroup 명령을 찾느라 시간을 쓰지 마세요. SVG 객체와 그룹 해제 안내는 파일 구조가 그 기대에 어떻게 영향을 주는지 설명합니다.
전체 다이어그램의 일반 SVG 그림도 주의가 필요합니다. Draw.io의 삽입 안내는 일반 SVG에 편집 가능한 다이어그램 재구성에 필요한 연결선 정보가 없다고 설명합니다. 원본 다이어그램 파일이 있다면 보관하세요.
포함 SVG 색상 변경의 별도 요구 사항
Draw.io는 포함된 SVG 아트워크와 색상 컨트롤 사이에 제한적인 연결 기능을 제공합니다. 포함 SVG 색상 안내는 SVG 내부 CSS 규칙과 삽입 객체 스타일의 editableCssRules 설정을 사용합니다. 이 기능은 포함 이미지에 적용되며 링크로 넣은 이미지에는 적용되지 않습니다.
CSS 규칙으로 이미 구성된 SVG에서는 삽입한 이미지를 선택하고 Edit Style을 선택한 뒤 다음을 추가하세요.
editableCssRules=.*;문서화된 패턴은 적용 가능한 모든 규칙을 선택합니다. 이는 draw.io 객체 스타일에 들어가야 하며 SVG 그리기 마크업에 붙여 넣는 줄이 아닙니다.
이 기능을 기반으로 라이브러리를 만들기 전에 결과 컨트롤을 살펴보세요. 유용한 색상 컨트롤이 나타나지 않으면 소스를 공식 안내의 CSS 클래스 예제와 비교하세요. 설정이 임의의 SVG 칠 속성을 재구성하거나 장치 표시등을 분리하거나 연결점을 만든다고 가정하지 마세요.
영구적인 색상 변경 한 번만 필요한 아트워크는 SVG 소스 편집이 더 간단할 수 있습니다. 사본을 저장하고 가져온 모양을 다시 검증하세요.
의도적으로 정의한 도형에 네이티브 스텐실 사용하기
네이티브 스텐실은 draw.io 자체 XML 문법으로 도형을 정의합니다. SVG 파일 이름을 .xml로 바꾼 것이 아닙니다. 사용자 지정 도형 튜토리얼은 Arrange → Insert → Shape로 도형 편집기를 열고 Preview로 정의를 살펴보는 방식을 사용합니다.
다음은 장치 기호용으로 직접 만든 작은 시작 예제입니다.
<shape name="two-port-device" w="100" h="60" aspect="fixed" strokewidth="inherit">
<connections>
<constraint x="0" y="0.5" perimeter="0" name="left"/>
<constraint x="1" y="0.5" perimeter="0" name="right"/>
</connections>
<background>
<rect x="0" y="0" w="100" h="60"/>
</background>
<foreground>
<fillstroke/>
<ellipse x="40" y="20" w="20" h="20"/>
<stroke/>
</foreground>
</shape>바깥 사각형과 중앙 원은 의도적으로 단순합니다. 좌표 값은 일러스트레이션의 그리기 공간을 정의하며 실제 장치 치수가 아닙니다.
XML 참조는 상대 연결 좌표를 정의합니다. perimeter="0"에서 이 두 제약은 왼쪽과 오른쪽 중간에 점을 배치합니다. 배경 도형의 칠 연산을 전경 시작에 둘 것도 요구하므로 그곳에 fillstroke가 있습니다.
도형을 미리 보고 테스트 다이어그램에 추가한 뒤 실제 필요한 동작을 시도하세요.
- 채우기와 선 색상을 바꾸세요.
- 각 원하는 중간점에 연결선을 붙이세요.
- 장치를 이동하고 두 부착 상태를 살펴보세요.
- 크기를 바꾸고 원, 외곽선, 연결선 위치를 확인하세요.
이는 수정해 사용할 작은 정의이며 일반 SVG에서 스텐실로의 변환기가 아닙니다. 장치 일러스트레이션에 장식 세부 요소가 많다면 어느 부분을 다이어그램 기호에 넣을지 결정하세요. 몇 개의 핵심 기본 도형을 다시 그리는 편이 모든 윤곽을 스텐실로 옮기는 것보다 관리하기 쉬울 수 있습니다.
항목이 확인을 통과한 뒤 라이브러리 저장하기
라이브러리는 재사용 단계입니다. 사용자 지정 라이브러리 안내는 File → New Library, 저장 위치 선택, 이미지 추가 또는 캔버스에서 도형 드래그를 설명합니다. 사용자 지정 라이브러리는 .xml 확장자를 사용합니다.
‘장치 아트워크’나 ‘포트 두 개가 있는 장치’처럼 내용을 알려 주는 이름으로 저장하세요. 둘 다 유용하다면 별도 항목으로 유지하세요.
그런 다음 새 다이어그램을 열고 저장한 항목을 삽입하세요. 설정했다면 아트워크 색상 변경을, 네이티브 스텐실이라면 연결선 부착을 한 번 반복하세요. 이를 통해 이전 버전의 기호가 들어 있는 라이브러리를 찾아낼 수 있습니다.
.xml 파일 이름만으로 항목이 네이티브 도형인지 알 수 없습니다. 라이브러리와 스텐실 정의 모두 XML을 사용하지만 라이브러리에는 이미지, 그룹, 사용자 지정 도형, 전체 다이어그램이 들어갈 수 있습니다. 삽입한 항목의 동작을 확인하세요.
벡터 마스터가 필요할 때만 래스터 아트워크 복원하기
원본 장치 일러스트레이션이 PNG나 스캔으로만 남았다면 PerfectVector의 클립아트 SVG 변환 작업 흐름으로 아트워크 후보를 준비할 수 있습니다. 사본을 모티프 부분으로 자르고 벡터 결과를 미리 본 뒤 바깥 윤곽, 원형 세부 요소, 빈 공간, 원치 않는 배경을 살펴보세요. SVG를 다운로드하고 이미지 삽입 방식으로 시도하세요.
이는 모양에 초점을 맞춰 검토할 소스를 제공합니다. 장치의 왼쪽 및 오른쪽 포트, 연결선 의미, 네이티브 스텐실 XML을 정의하지 않습니다. 다이어그램에 필요하다면 의도적으로 만드세요.
매우 단순한 사각형과 원 기호는 직접 그리는 것이 더 빠를 수 있습니다. 남은 일러스트레이션에 유지할 독특한 곡선이 있을 때 추적이 더 유용합니다. 손그림 모티프에는 지도 일러스트레이션 준비 안내가 추적 전에 그린 아트워크를 정리하는 방법을 설명합니다.
SVG를 확대했을 때 여전히 픽셀이 도드라져 보인다면 SVG 래스터 이미지 진단으로 비트맵 포함 여부를 확인하세요. 이미지 벡터화 개요는 픽셀 보존과 도형 복원의 더 넓은 차이를 설명합니다.
FAQ
SVG를 가져오면 네이티브 draw.io 스텐실이 되나요? 아닙니다. 이미지 삽입 작업 흐름은 아트워크를 포함합니다. 네이티브 사용자 지정 스텐실은 도형, 스타일, 연결점용 draw.io XML 도형 정의를 사용합니다.
포함 SVG의 색상을 바꿀 수 있나요? Draw.io는 적절한 SVG CSS 규칙과 삽입 객체 스타일의 editableCssRules 설정을 통한 색상 편집을 설명합니다. 삽입 후 소스 구조와 제공되는 컨트롤을 확인하세요.
사용자 지정 라이브러리는 SVG 경로를 네이티브 도형으로 변환하나요? 라이브러리는 이미지와 네이티브 사용자 지정 도형을 비롯한 재사용 항목을 저장합니다. 라이브러리에 이미지를 저장하는 것 자체가 네이티브 도형이나 연결선 의미를 추가하지는 않습니다.
PNG를 벡터화하면 다이어그램의 연결점이 만들어지나요? 아닙니다. 벡터화는 아트워크 윤곽을 복원할 수 있습니다. 연결점과 네이티브 다이어그램 동작이 필요하면 따로 정의하세요.
Sources
- draw.io — 다이어그램에 SVG 이미지 삽입하기 — 이미지 삽입, 크기 설정, SVG에서 다이어그램 연결선 재구성의 한계.
- draw.io — 복잡한 사용자 지정 도형 만들기와 편집하기 — 네이티브 XML 도형, 연결 제약, 그리기 연산.
- draw.io — 포함 SVG 이미지 색상 편집하기 — CSS 규칙 편집과 포함 및 연결 이미지 요구 사항.
- draw.io — 사용자 지정 도형 만들기 — 스텐실 편집기, 미리보기 작업 흐름, 기본 스타일.
- draw.io — 사용자 지정 도형 라이브러리 작업하기 — 혼합 라이브러리 항목 생성, 저장, 재사용.
필요한 동작을 선택하고 장치 기호 하나를 준비한 뒤 새 다이어그램에서 테스트하세요. 래스터 아트워크만 남았다면 SVG 후보 파일을 준비하고 윤곽을 살펴본 뒤 라이브러리에 저장하기 전에 삽입된 이미지를 확인하세요.
