SVG 선(stroke)을 채움(fill)으로

선(stroke)으로 그린 SVG 경로와 도형을 채움(fill) 외곽선 경로로 변환 — 선·원·아이콘을 stroke 없이 같은 모양으로 유지합니다. 100% 브라우저에서 실행되며 업로드되지 않습니다.

채움만 이해하는 대상에 넘길 때

SVG 마크업을 붙여넣으면 선(stroke)으로 그려진 모든 도형을 채움(fill) 외곽선 경로로 다시 씁니다. 폰트 편집기, 글리프 변환, 비닐·레이저 커터, CNC 툴패스처럼 채움만 이해하는 대상에 아이콘·로고를 넘길 때 필요한 작업입니다. 각 선은 그 선이 덮던 영역이 되어 stroke 색을 채움으로 갖는 하나의 <path>가 됩니다. 변환 전후 미리보기로 결과를 확인한 뒤 SVG를 복사하거나 내려받을 수 있습니다.

지원 도형과 한계

<line>·<polyline>·<polygon>·<rect>(둥근 모서리 포함)·<circle>·<ellipse>와 이동·직선·베지어·호(arc)·닫기 명령을 쓰는 <path>를 지원합니다. 선 두께·색·불투명도는 요소 자체나 상위 그룹에서 상속받아 읽고, stroke-linecap(butt·round·square)을 반영합니다. 곡선은 짧은 직선으로 근사되고 모서리는 제한이 있는 마이터 조인을 씁니다. <text>는 원본 폰트 없이는 외곽선으로 만들 수 없어 변환하지 않고 그대로 두며 안내를 표시합니다.

자주 묻는 질문

어떤 SVG 요소를 변환하나요?

선, 폴리라인, 폴리곤, 사각형(둥근 모서리 포함), 원, 타원, 그리고 이동·직선·베지어·호·닫기 명령으로 만든 경로를 변환합니다. 텍스트와 이미지, 재사용(use) 요소는 원본 폰트 등 SVG에 없는 정보가 필요하므로 그대로 둡니다.

외곽선이 원래 선과 살짝 다르게 보이는 이유는?

외곽선은 근사값입니다. 곡선은 여러 짧은 직선으로 펼치고, 모서리는 한계를 둔 마이터 조인, 둥근 끝은 짧은 호로 그립니다. 보통 크기에서는 차이가 거의 보이지 않습니다.

내 SVG가 업로드되나요?

아니요. 파싱과 외곽선 변환, 미리보기 모두 브라우저 안 자바스크립트로 처리됩니다. 전송·저장·업로드되는 것이 없고, 페이지가 한 번 열린 뒤에는 오프라인에서도 쓸 수 있습니다.