SVG 최적화
SVG Optimiser
편집기 잔여 데이터를 지우고 변환을 합치며 좌표 자릿수를 줄이고, 결과를 나란히 비교합니다.
디자인 도구에서 저장한 SVG에는 편집기 메타데이터와 아무도 풀지 않은 변환 목록, 소수점 일곱 자리까지 적힌 좌표가 들어 있습니다. 그것을 지우는 일은 쉽고, 그림이 달라졌는지 아는 일이 어렵습니다. 그래서 바이트 수만이 아니라 차이 보기를 함께 제공합니다.
SVG를 놓으세요
아래에서 마크업을 직접 고쳐도 됩니다. 아무것도 업로드하지 않습니다.
마크업 편집
사용 방법
SVG를 놓거나 마크업을 붙여넣습니다
입력하는 대로 최적화하므로 파일을 붙여넣고 그 자리에서 고쳐도 됩니다.
소수 자릿수를 정합니다
24 단위 viewBox에서 두 자리는 100배 확대해도 0.01픽셀입니다. 한 자리 아래로 내리면 아이콘이 눈에 띄게 틀어지기 시작합니다.
차이 보기를 확인합니다
최적화본을 원본 위에 차이 혼합으로 겹칩니다. 완전한 검정이면 똑같이 그려진다는 뜻이고, 밝게 뜨는 부분은 움직인 픽셀입니다.
SVG나 data URI를 복사합니다
여기서 주는 data URI는 Base64가 아니라 URL 인코딩이라, 원본 대비 33%가 아니라 10% 안팎만 커집니다.
자주 묻는 질문
“title 삭제”가 왜 기본으로 꺼져 있나요?
`<title>`이 인라인 SVG의 접근성 이름이기 때문입니다. 지우면 30바이트쯤 아끼고, 스크린 리더를 쓰는 사람에게는 이름이 붙어 있던 아이콘이 이름 없는 아이콘이 됩니다.
최적화 뒤에 아이콘이 살짝 움직였습니다.
viewBox에 비해 자릿수가 낮습니다. viewBox가 작으면 한 단위가 그림에서 차지하는 비중이 커서, 소수 한 자리로 반올림하면 눈에 띄게 움직입니다. 차이 보기가 검게 될 때까지 자릿수를 올리세요.
경로 데이터도 줄여 주나요?
숫자를 반올림하고 순수한 이동을 경로에 구워 넣은 뒤, 그렇게 아낀 바이트를 알려 줍니다. 명령을 더 짧은 등가 명령으로 바꾸지는 않습니다. 그것은 곡선의 종류를 바꾸는 일이고, 경로 최적화 도구들이 진짜 버그를 만드는 지점입니다.
이 도구로 이어지는 것
파비콘 생성
Favicon Generator
ICO·PNG·애플 터치 아이콘·웹 매니페스트를 한 번에 만들고 붙여넣을 HTML까지 제공합니다.
SVG PNG 변환
SVG to PNG
SVG를 원하는 배율로 PNG·JPEG·WebP로 렌더링하며 배경을 투명하게 두거나 채울 수 있습니다.
이미지 벡터 변환
Image to SVG
비트맵을 SVG 경로로 추적해 벡터로 만듭니다. 사진보다는 로고·선화에 적합합니다.
QR 코드 생성
QR Code Generator
URL·텍스트·와이파이·명함·결제 문자열의 QR을 만들고 오류 정정·로고·SVG 출력을 지원합니다.
다음 단계
이 도구의 결과를 그대로 받을 수 있는 도구들입니다.
파비콘 생성
Favicon Generator
ICO·PNG·애플 터치 아이콘·웹 매니페스트를 한 번에 만들고 붙여넣을 HTML까지 제공합니다.
SVG CSS 데이터 URI 변환
SVG to CSS Data URI
SVG를 CSS 배경용 데이터 URI로 인코딩하며 꼭 필요한 문자만 이스케이프해 크기를 줄입니다.
SVG 패스 편집기
SVG Path Editor
패스 데이터를 절대·상대 명령으로 바꾸고 이동·확대·회전·방향 뒤집기를 적용하며 경계 상자와 미리보기를 보여 줍니다.
SVG PNG 변환
SVG to PNG
SVG를 원하는 배율로 PNG·JPEG·WebP로 렌더링하며 배경을 투명하게 두거나 채울 수 있습니다.
이미지 배경 제거
Background Remover
단색이나 균일한 배경을 OKLab에서 키잉해 투명한 PNG로 만들고, 브러시로 경계를 다듬을 수 있습니다.
EXIF 정보 삭제
EXIF Remover
화질은 그대로 두고 카메라·GPS·편집 이력 메타데이터만 지웁니다.