SVG 최적화·변환

편집기가 남긴 불필요한 정보를 지우고 숫자를 줄이는 SVG 최적화, 최대 8192px까지 원하는 크기로 SVG를 PNG·JPG·WebP로 바꾸는 변환기, PNG나 JPG를 벡터 SVG로 바꾸는 트레이스, 데이터 URI 변환, 실시간 미리 보기가 있는 코드 편집기를 모은 무료 SVG 도구입니다. 파일은 브라우저에서 처리하며 업로드하지 않습니다.

사용법

1. SVG를 열거나 미리보기에 끌어다 놓거나 코드를 붙여 넣으세요. 처음에는 예시 파일이 들어 있습니다.
2. 최적화: 남길 소수 자릿수와 적용할 정리 항목을 고르세요. 전후 크기가 표시되고, 코드나 data URI, CSS 한 줄을 복사하거나 파일을 내려받을 수 있습니다.
3. PNG로: 너비나 높이를 정하거나 2×, 4×, 1024 등을 탭하고, PNG·JPG·WebP와 배경을 고른 뒤 내려받으세요.
4. 벡터화: PNG나 JPG를 끌어다 놓고 색 개수와 세밀도를 고른 뒤 SVG를 내려받으세요.
5. 코드: 마크업을 고치면 입력하는 대로 미리보기가 바뀝니다.

• 최적화는 루트의 width, height, viewBox를 바꾸지 않고, 참조되는 ID는 남기며, 경로 데이터를 오차가 쌓이지 않게 반올림합니다. 복잡한 파일은 원본을 바꾸기 전에 미리보기로 확인하세요.
• 대부분의 아이콘은 소수 2자리면 충분합니다. 큰 기술 도면에는 3~4자리를 쓰세요.
• 벡터화는 로고, 아이콘, 단순한 그림에 가장 잘 맞습니다. 사진은 큰 도형이 많이 생기므로 포스터 느낌을 원하면 색 개수를 줄이세요.
• 파일은 브라우저에서 처리됩니다. SVG 안의 스크립트는 실행되지 않으며 미리보기는 이미지로 표시됩니다.

SVG 파일이 커지는 이유

디자인 도구는 그림 말고도 많은 것을 함께 내보냅니다. 편집기 메타데이터, 주석, 쓰지 않는 ID와 정의, 빈 그룹, 기본값 그대로인 속성, 소수점 여섯 자리가 넘는 좌표 같은 것들입니다. 흔한 아이콘에서는 이런 군더더기가 파일의 대부분을 차지하기도 합니다. 최적화는 이를 지우고, 경로 숫자를 정한 정밀도로 반올림하며, 쓸모없는 그룹을 합칩니다. 루트 요소의 너비, 높이, viewBox는 건드리지 않고 참조되는 ID도 남깁니다.

화면용 아이콘과 로고는 소수점 두 자리면 충분하고, 큰 기술 도면은 세네 자리가 필요할 수 있습니다. 마스크, 필터, 내장 글꼴이 있는 파일은 특히 원본을 바꾸기 전에 미리 보기로 꼭 비교하세요.

벡터와 비트맵

SVG는 도형을 기술하는 형식이라 어떤 크기에서도 선명하고, 아이콘·로고·다이어그램이라면 용량도 아주 작습니다. 사진은 JPG, PNG, WebP가 더 알맞습니다. 앱 스토어 아이콘, PNG 파비콘, SNS 이미지처럼 비트맵이 필요할 때는 필요한 픽셀 크기 그대로 내보내세요. 24 × 24 viewBox를 1024px로 내보내도 늘리는 것이 아니라 다시 그리기 때문에 선명합니다. JPG는 투명도를 지원하지 않으니 배경색을 고르세요.

트레이스와 데이터 URI

트레이스는 로고, 아이콘, 서명, 선화처럼 색이 적고 경계가 뚜렷한 그림에서 가장 잘 됩니다. 사진은 큰 도형 여러 개로 바뀝니다. CSS에 넣는 작은 아이콘이라면 SVG는 텍스트이므로, 약 33% 커지는 Base64보다 URL 인코딩한 데이터 URI가 보통 더 짧습니다.

자주 묻는 질문