SVG 분할

SVG 분할

SVG 하나를 최상위 조각들로 쪼갭니다. 모든 그룹과 심볼, 도형을 미리 보고 원하는 것만 체크해 개별 파일로 가져가세요.

SVG 분할

☞ 모든 처리가 브라우저 안에서 이루어집니다 — 아무것도 업로드되지 않습니다

여기에 SVG를 놓으세요

또는 클릭해서 찾기 — SVG만 가능

조각마다 파일 하나

무엇이 하나의 조각으로 세어지는가

파일의 최상위만, 그것도 실제로 무언가를 그리는 부분만 나눕니다. 그룹, 심볼, 패스, 도형, 텍스트, 이미지가 그 대상입니다. 그러데이션, 필터, 마스크, 스타일시트는 그림이 아니라 정의이므로 단독으로 목록에 오르지 않습니다. 그러데이션만 들어 있는 파일은 빈 화면일 테니까요.

내보내는 모든 조각은 원본의 정의와 스타일 전체를 함께 가져갑니다. 그래서 각 파일이 꼭 필요한 것보다 커지지만, 이는 의도한 맞바꿈입니다. 그러데이션이 빠진 작은 조각보다, 원본 안에서와 똑같이 렌더링되는 조각이 낫습니다. 쓰이지 않는 부분은 결과를 SVG 최적화 도구에 통과시켜 덜어내세요.

세 단계

SVG를 분할하는 방법

01

SVG 놓기

.svg 파일을 고르세요 — 파일은 기기에 남습니다.

02

조각 체크하기

각 조각은 내보내질 모습 그대로 미리 보입니다.

03

다운로드

조각이 하나면 바로 내려받고, 여러 개면 ZIP으로 받습니다.

간단한 답변

SVG 분할 자주 묻는 질문

왜 조각마다 원본만큼 큰가요?

defs 블록 전체와 스타일시트를 함께 가져가기 때문입니다. 어떤 도형이 실제로 어떤 그러데이션이나 필터를 쓰는지 추측하는 일은 소리 없이 틀리기 쉬워서, 모든 조각에 전부를 담습니다. 쓰이지 않는 부분은 SVG 최적화 도구가 한 번에 제거해 줍니다.

목록에 아무것도 안 나왔습니다 — 왜죠?

그림 전체가 하나의 그룹 안에 들어 있을 가능성이 큽니다. 그러면 조각 하나로 세어집니다. 분할은 의도적으로 최상위까지만 합니다. 더 깊이 들어가면 평범한 일러스트에서도 수백 개의 파편이 나오니까요.

아이콘 스프라이트에도 되나요?

네, 오히려 가장 잘 처리하는 경우입니다. 스프라이트 안의 각 심볼이 그 심볼 자체의 viewBox를 쓰는 독립 파일이 되므로, 빈 캔버스가 아니라 제대로 잘린 아이콘이 파일마다 하나씩 나옵니다.

조각이 내용에 맞게 잘리나요?

아니요. 각 조각은 원본 viewBox를 유지하므로, 전체 그림 안에서 갖고 있던 위치와 배율을 그대로 지킵니다. 여백을 줄이고 싶다면 이후에 SVG 자르기 도구를 쓰세요.

조각을 몇 개까지 처리하나요?

최상위 조각 100개까지 목록에 나옵니다. 그 이상이면 미리보기를 만드는 데 드는 시간이 분할의 값어치를 넘어섭니다 — 파일을 먼저 병합하거나 그룹으로 묶으세요.

파일이 업로드되나요?

아니요. 파일은 브라우저 안에서 해석되고 나뉘며, ZIP도 거기서 만들어집니다.