SVG 압축 · 최적화

Q: 무엇이 최적화되나요?

널리 쓰이는 오픈소스 최적화 도구 SVGO의 기본 규칙을 여러 번 반복 적용합니다. 에디터 메타데이터·주석·숨은 요소 제거, 소수점 정리, 패스 병합, 색상 축약 등이 이루어집니다. 디자인 툴에서 바로 내보낸 파일은 보통 30~70% 줄고, 이미 정리된 파일은 거의 줄지 않기도 합니다. 기본 규칙은 그림 밖의 정보도 일부 지우므로 아래 ‘최적화 후 그림이 달라 보이면?’도 확인해 주세요.

Q: 파일이 서버로 올라가나요?

아니요. 모든 처리가 브라우저 안에서 끝나고 파일은 어디에도 올라가지 않습니다. 회사 로고, 미공개 아이콘도 안심하고 사용하세요.

Q: 최적화 후 그림이 달라 보이면?

기본 규칙은 그림 모양 말고도 다음을 바꿉니다. viewBox — width·height가 viewBox와 같은 크기면 viewBox를 지웁니다. 이런 파일은 CSS로 크기를 바꾸면 그림이 따라 커지지 않고 잘려 보일 수 있습니다. — 스크린 리더가 읽는 제목이 지워집니다. ID — 파일 안에서 쓰이지 않는 ID는 지우고 나머지는 짧은 이름으로 바꿉니다. 그래서 바깥에서 파일명#아이디로 불러 쓰는 스프라이트 파일이나 ID를 가리키는 CSS·스크립트는 깨질 수 있습니다. 전/후 미리보기로 확인하되, 미리보기에는 이런 문제가 드러나지 않을 수 있으니 이런 용도의 파일이라면 원본을 쓰세요.

최적화가 브라우저 안에서 바로 이루어집니다. 여러 파일 일괄 처리, 전/후 미리보기.

SVG 파일을 끌어다 놓거나 클릭해서 선택 (여러 개 가능)

파일은 내 컴퓨터에서만 처리됩니다

파일 선택

또는 SVG 코드 붙여넣기

업로드 0 B — 이 페이지는 파일을 서버로 보내지 않았습니다?

입력한 내용도 파일도 어디에도 전송되지 않습니다 — 모든 처리가 이 페이지 안에서 끝나고, 서버로 내보내는 통신 자체가 없습니다.

다른 변환 사이트는 입력한 내용이나 파일을 서버로 보내서 처리합니다. 처리 뒤 지운다고 안내해도 그때까지는 남의 서버에 남아 있습니다. 여기에는 보내는 단계 자체가 없습니다. 비밀번호·계약 문구·개인 메모처럼 새어 나가면 곤란한 내용일수록 이 차이가 큽니다. 직접 확인하는 방법 →

디자인 툴에서 내보낸 SVG, 보이는 모양은 그대로 두고 용량만 줄이기

디자인 툴에서 내보낸 SVG에는 그림과 상관없는 정보가 많이 들어 있습니다. 이 도구는 널리 쓰이는 오픈소스 엔진 SVGO의 기본 규칙으로 그런 부분을 걷어 내고 전/후 용량과 미리보기를 나란히 보여 줍니다. 회사 로고 파일도 서버로 올라가지 않습니다.

조금 더 자세히

SVG는 그림을 점과 곡선의 좌표로 적은 텍스트(XML) 파일입니다. 편집기는 여기에 프로그램 이름이 적힌 주석, 레이어 이름, 메타데이터, 쓰지 않는 id, 소수점이 긴 좌표를 함께 저장합니다. 그리는 데 필요 없는 내용이라 걷어 내도 모양은 같습니다. 디자인 툴에서 바로 내보낸 파일은 보통 30~70% 줄고, 이미 정리된 파일은 거의 줄지 않기도 합니다.

규칙은 더 줄지 않을 때까지 여러 번 반복 적용됩니다. #ff0000은 red로 짧아지고, 좌표는 소수점 셋째 자리로 반올림되며, 사각형 같은 도형은 더 짧은 경로(path)로 바뀝니다. display:none으로 숨긴 요소, 쓰이지 않는 id, 제목(title) 요소는 지워지고, 쓰이는 id는 a, b처럼 짧아집니다. 규칙을 골라 켜고 끄는 설정은 없고, 보안 필터가 아니어서 스크립트나 onclick 속성은 그대로 남습니다.

이렇게 쓰세요

SVG 파일을 상자에 끌어다 놓거나 파일 선택으로 고릅니다. 여러 개를 넣을 수 있고, SVG가 아닌 파일은 "SVG 파일이 아니에요" 안내와 함께 빠집니다.
코드만 있다면 또는 SVG 코드 붙여넣기 칸에 붙여넣습니다. 이 칸은 목록에 파일이 없을 때만 쓰입니다.
최적화를 누르면 파일마다 전/후 용량과 절감 비율이 표시되고 첫 파일의 원본과 최적화 후 그림이 나란히 나옵니다. 다른 파일은 그 줄의 미리보기로 봅니다. 엔진을 불러오는 중이라는 안내가 뜨면 1~2초 뒤 다시 누르세요.
줄마다 저장을 누르면 이름에 .min.svg가 붙어 내려받아지고, 두 개 이상이면 모두 저장으로 한꺼번에 받습니다. 붙여넣은 코드의 결과는 복사하거나 저장(optimized.min.svg)합니다.

이럴 때 유용해요

웹사이트 로고·아이콘헤더 로고와 아이콘을 줄여 페이지가 조금이라도 빨리 뜨게 합니다.

코드에 직접 넣는 아이콘최적화한 코드를 복사해 HTML이나 리액트 컴포넌트에 넣으면 소스가 짧아집니다.

아이콘 세트 일괄 정리디자이너가 준 아이콘 수십 개를 한 번에 넣어 줄이고 모두 저장으로 받습니다.

외부 전달 전 정리편집기 주석과 레이어 이름, 메타데이터를 지운 깔끔한 파일을 고객사에 넘깁니다.

자주 막히는 지점

CSS로 크기를 바꾸면 그림이 늘어나지 않고 잘립니다.원본에 width·height와 같은 값의 viewBox가 있으면 기본 규칙이 viewBox를 지웁니다. 그러면 그림이 크기에 맞춰 늘지 않으니 원본의 viewBox 속성을 결과의 svg 요소에 다시 붙이세요.

아이콘 스프라이트 파일이 거의 빈 파일로 나옵니다.스프라이트는 id 붙은 symbol에 아이콘을 담아 다른 페이지에서 불러 씁니다. 파일 안에서는 그 id가 안 쓰이는 것으로 보여 symbol째 지워지고, CSS나 스크립트가 id로 찾던 요소도 같은 이유로 끊깁니다. 이런 파일은 id 보존 설정으로 SVGO를 직접 돌리세요.

"최적화 실패"와 함께 Unexpected close tag 같은 문구가 나옵니다.XML 문법이 맞지 않는 파일로, 닫히지 않은 태그나 일부만 복사된 코드가 흔한 원인입니다. 원본을 브라우저로 열어 봐도 오류가 나면 편집기에서 다시 내보내세요.

붙여넣은 코드가 무시되거나 모두 저장이 일부만 받아집니다.목록에 파일이 있으면 붙여넣기 칸은 쓰이지 않으니 각 줄의 ✕로 목록을 비우고 최적화를 다시 누르세요. 모두 저장이 중간에 멈추면 브라우저의 여러 파일 다운로드 요청을 허용하고 다시 누르세요.

팁 쓰기 전에 원본과 최적화 후 미리보기의 가장자리·글자·그라디언트를 비교하고, 조금이라도 다르면 그 파일은 원본을 쓰세요.

자주 묻는 질문

무엇이 최적화되나요?

널리 쓰이는 오픈소스 최적화 도구 SVGO의 기본 규칙을 여러 번 반복 적용합니다. 에디터 메타데이터·주석·숨은 요소 제거, 소수점 정리, 패스 병합, 색상 축약 등이 이루어집니다. 디자인 툴에서 바로 내보낸 파일은 보통 30~70% 줄고, 이미 정리된 파일은 거의 줄지 않기도 합니다. 기본 규칙은 그림 밖의 정보도 일부 지우므로 아래 ‘최적화 후 그림이 달라 보이면?’도 확인해 주세요.

파일이 서버로 올라가나요?

아니요. 모든 처리가 브라우저 안에서 끝나고 파일은 어디에도 올라가지 않습니다. 회사 로고, 미공개 아이콘도 안심하고 사용하세요.

최적화 후 그림이 달라 보이면?

기본 규칙은 그림 모양 말고도 다음을 바꿉니다. viewBox — width·height가 viewBox와 같은 크기면 viewBox를 지웁니다. 이런 파일은 CSS로 크기를 바꾸면 그림이 따라 커지지 않고 잘려 보일 수 있습니다. <title> — 스크린 리더가 읽는 제목이 지워집니다. ID — 파일 안에서 쓰이지 않는 ID는 지우고 나머지는 짧은 이름으로 바꿉니다. 그래서 바깥에서 파일명#아이디로 불러 쓰는 스프라이트 파일이나 ID를 가리키는 CSS·스크립트는 깨질 수 있습니다. 전/후 미리보기로 확인하되, 미리보기에는 이런 문제가 드러나지 않을 수 있으니 이런 용도의 파일이라면 원본을 쓰세요.

여러 파일도 되나요?

네. 파일을 여러 개 선택하면 일괄 최적화되고, 파일마다 저장하거나 [모두 저장]으로 한 번에 받을 수 있습니다.