이미지 · SVG · 아이콘

SVG 최적화확인한 변경만 적용

정적 SVG를 정렬하거나 압축하고, 후보 이미지와 원본을 비교한 뒤 적용하세요.

SVG 소스

결과

SVG 처리와 미리보기는 브라우저에서 실행되며 외부 리소스는 차단됩니다.

옵션

주석 제거메타데이터 제거숫자 반올림경로 데이터 최적화소수 정밀도PNG 너비 (px)

소스 또는 옵션이 바뀌었습니다. 결과를 다시 만드세요.

디자인 도구에서 받은 아이콘에는 실제 도형보다 긴 주석과 편집 정보가 들어 있기도 합니다. SVG 최적화는 어떤 정보를 지울지 선택하고 남은 코드를 살펴보는 데 도움이 됩니다.

용량이 줄었다고 작업이 끝나는 것은 아닙니다. SVG 뷰어에서 윤곽을 비교하고 경로의 d 데이터를 확인하세요. 픽셀 이미지가 필요한 곳에는 원하는 너비의 PNG를 내보낼 수 있습니다.

SVG 최적화 결과를 확인하는 방법

소스 변경과 그림의 변화를 함께 살펴보세요.

원본을 바꾸기 전에 비교

SVG 최적화는 우선 후보를 만듭니다. 바이트 수와 변경 개수를 읽고 두 그림을 비교한 뒤 적용하세요. 적용 후 한 번 실행 취소하면 이전 입력과 출력이 함께 복원됩니다.

지원 범위 확인

두 벡터 그림과 코드 블록을 나란히 놓고 한쪽의 불필요한 노드를 줄인 그림.

작은 아이콘도 원하는 크기로

작은 viewBox가 작은 PNG만 만들 수 있다는 뜻은 아닙니다. 픽셀 너비를 지정하면 비율을 유지한 투명 이미지로 내보내어 여러 배경 위에 배치할 수 있습니다.

벡터 도형이 투명 배경을 나타내는 체크 무늬 위의 큰 픽셀 이미지로 변환되는 그림.

덮어쓰기 전에 확인할 세 가지

전체 SVG 문서를 준비하세요

네임스페이스와 viewBox를 포함한 svg 요소를 입력하세요. path 조각만으로는 화면의 좌표 범위를 알 수 없으므로 먼저 완전한 SVG 문서 안에 넣어야 합니다.

예제를 열면 지원하는 정적 문서 구조를 볼 수 있습니다.

좌표 변경은 필요할 때만 켜세요

주석과 메타데이터 제거는 기본으로 켜져 있습니다. 숫자 반올림과 경로 최적화는 꺼져 있으며, 소수 정밀도는 활성화한 변환에만 적용됩니다.

수동 모드에서 Ctrl/Cmd + Enter로 기본 작업을 실행할 수 있습니다.

수정했다면 후보를 다시 만드세요

입력이나 옵션을 바꾸면 이전 결과는 만료됩니다. 다시 처리한 다음 적용하거나 내보내면 예전 편집 상태의 아이콘을 잘못 복사하는 일을 줄일 수 있습니다.

적용 후 실행 취소는 입력과 출력을 모두 복원합니다.

코드를 정리하고 자산을 확인하세요

읽기 쉬운 코드와 압축 출력

두 칸 들여쓰기는 그룹 구조나 fill 속성이 어디서 오는지 찾을 때 유용합니다. SVG 압축은 마크업을 짧게 만들지만 픽셀 이미지로 바꾸지는 않습니다. 텍스트가 있는 요소에서는 공백도 의미가 있을 수 있으므로 모든 공백을 불필요하다고 판단하지 말고 그림과 함께 확인하세요.

정리와 좌표 수정을 분리

주석과 metadata를 각각 제거할지 선택할 수 있습니다. 숫자 및 경로 변환에는 SVGO와 지정한 정밀도를 사용하며 기본적으로 두 변환을 끕니다. ID, viewBox, title, desc는 유지하므로 일반적인 정리 과정에서 크기 정보나 접근성 설명을 의도적으로 없애지 않습니다.

경로 데이터를 직접 검사

경로 보기에서 d 속성, 순서와 식별자를 확인해 여러 윤곽으로 구성된 아이콘의 코드를 찾을 수 있습니다. 원이나 사각형을 자동으로 경로로 바꾸지는 않습니다. 제어점 드래그, 도형 합치기, 캔버스 그리기는 제공하지 않으며 이런 작업에는 벡터 편집기를 사용해야 합니다.

비율을 유지한 투명 PNG

viewBox 또는 지원하는 픽셀 크기에서 비율을 구해 지정한 너비의 PNG를 생성합니다. 너비와 높이는 각각 4096픽셀 이내이며 전체 면적은 16777216픽셀까지입니다. 세로로 긴 그림은 너비가 유효해도 높이 제한으로 거부될 수 있습니다. SVG 코드 편집 후 확대에 유연한 자산은 SVG로, 정해진 픽셀 크기가 필요한 결과는 PNG로 가져갈 수 있습니다.

입력 범위와 출력 제한

정적 문서만 지원: script, 이벤트 속성, 애니메이션, foreignObject, image, style 요소는 거부합니다. 외부 참조, 내장 이미지, 처리 명령, DOCTYPE도 지원하지 않습니다. 일반적인 도형, 텍스트, 그라디언트와 문서 내부 참조를 처리하며 임의의 SVG 파일을 안전하게 바꾸는 범용 정화 도구는 아닙니다.
스타일과 네임스페이스 제한: style 속성에서는 허용된 표시 선언만 사용할 수 있고 URL은 문서 내부 ID만 가리켜야 합니다. 편집기 metadata 안의 RDF를 비롯해 임의의 XML 네임스페이스 내용은 지원하지 않습니다. 지원하지 않는 편집 정보가 있다면 원래 제작 도구에서 정리하고 다시 입력하세요.
크기와 중첩 깊이에 상한 적용: 입력은 UTF-8 기준 1 MiB, 텍스트와 주석을 포함한 노드 20000개, 중첩 100단계까지 허용됩니다. 최적화가 20초를 넘으면 중단됩니다. PNG 생성에는 유효한 viewBox 또는 지원하는 픽셀 너비와 높이가 필요합니다. 상대 단위나 복잡한 CSS 치수로는 출력 비율을 정하지 않으므로 명확한 좌표 범위를 지정하세요. PNG 너비와 높이는 각각 4096픽셀 이내여야 하므로 세로로 긴 그림은 높이 제한에 걸릴 수 있습니다.
모양이 항상 같다고 보장하지 않음: 반올림과 경로 변경은 섬세한 윤곽에 영향을 줄 수 있습니다. 적용 전 이미지 비교뿐 아니라 실제로 넣을 화면에서도 확인하세요. SVG 최적화는 실제 바이트 변화를 보여주며 일정한 절감률을 약속하지 않습니다. 손으로 간결하게 만든 아이콘은 줄일 부분이 거의 없을 수 있습니다.

SVG 최적화 관련 질문

최적화로 그림이 달라질 수 있나요?

그럴 수 있습니다. 숫자 반올림이나 경로 최적화를 켜면 작은 좌표 변화도 가는 선에 영향을 줄 수 있습니다. 두 옵션은 기본으로 꺼져 있으므로 필요한 경우에만 켜고, 실제 사용할 크기에서 원본과 후보를 비교하세요.

SVG 파일 크기는 얼마나 줄어드나요?

원본이 담고 있는 불필요한 정보에 따라 다릅니다. 편집기 메타데이터가 많은 파일은 줄어들 여지가 있지만 이미 간결한 아이콘은 거의 변하지 않을 수 있습니다. 고정된 절감률 대신 실행 후 표시되는 이전 및 이후 바이트 수로 판단하세요.

SVG 애니메이션이나 JavaScript에도 영향이 있나요?

이 페이지에서는 애니메이션과 script, 이벤트 속성이 있는 문서를 처리하지 않습니다. 정적 도형을 위한 도구이므로 실행 가능한 내용을 거부하고 외부 리소스도 불러오지 않습니다. 대화형 SVG는 원래 프로젝트의 편집 및 검증 흐름에서 다루세요.

여러 SVG를 한 번에 처리할 수 있나요?

한 번에 문서 하나를 검토합니다. 이미지 비교와 변경 적용, 한 번 실행 취소를 같은 문서에 연결해 두기 때문입니다. 여러 자산을 일괄 처리해야 한다면 프로젝트의 빌드 과정에서 SVGO 같은 도구를 구성하는 편이 적합합니다.

SVG를 다른 이미지 형식으로 바꿀 수 있나요?

PNG로 내보낼 수 있습니다. 너비는 1에서 4096픽셀 사이로 지정하고 전체 면적은 16777216픽셀을 넘을 수 없습니다. 원본의 지원되는 치수로 높이를 결정하며 JPEG, WebP, 프레임워크 컴포넌트나 비트맵 벡터화 결과는 생성하지 않습니다.

올바르게 처리되지 않는 경우를 찾으셨나요?

SVG 최적화 시작하기

아이콘 하나를 SVG 최적화로 정리하고 외관을 확인한 뒤 프로젝트에 적용하세요.

작업 도구로 돌아가기 이미지 도구 보기

나중에 디자인을 수정할 수 있도록 원본을 보관하세요.