ssakit개발자 도구SVG 최적화·미리보기
SVG 최적화·미리보기SVG 용량 줄이기, data URI·base64·JSX·CSS 변환
SVG 코드를 붙여 넣거나 파일을 불러오면 모양은 그대로 두고 주석·편집기 흔적·불필요한 속성을 걷어 용량을 줄여 주는 온라인 도구입니다. 밝은·어두운 바탕에서 미리 보고 data URI, base64, React JSX, CSS 배경 코드로 바꿔 줍니다.
SVG 최적화·미리보기 사용법
일러스트레이터·피그마·잉크스케이프에서 내보낸 SVG 의 군더더기를 걷어 용량을 줄이고, 웹에 바로 쓸 수 있는 여러 모양의 코드로 바꿉니다. 파일은 브라우저 안에서만 다룹니다.
SVG 를 넣습니다
코드를 붙여 넣거나 파일 불러오기로 .svg 파일을 엽니다. 숫자 자릿수와 <title>·<desc> 를 지울지 고를 수 있습니다.
미리보기로 모양을 확인합니다
격자·밝은·어두운 바탕과 50~400% 배율로 보고, 원본으로 보기를 켜 정리 전후 모양이 같은지 비교합니다. 줄어든 용량과 걷어 낸 항목 수도 함께 보입니다.
필요한 모양으로 복사합니다
정리한 SVG, data URI, base64, React JSX 컴포넌트, CSS 배경 코드 중 하나를 골라 복사하거나 SVG 파일로 받습니다.
자주 묻는 질문
- data URI 와 base64 중 무엇을 써야 하나요?
- SVG 는 글자라서 꼭 필요한 글자만 인코딩한 data URI 가 base64 보다 짧고 gzip 압축도 잘 됩니다. 글자 인코딩을 신경 쓰고 싶지 않은 곳(일부 메일 클라이언트 등)에서만 base64 를 쓰면 됩니다.
- 최적화하면 모양이 바뀌지 않나요?
- 주석·메타데이터·편집기 흔적·빈 그룹·기본값과 같은 속성처럼 모양에 영향이 없는 것만 걷고, 숫자는 고른 자릿수까지만 반올림합니다. 아주 작은 아이콘을 크게 확대해 쓴다면 자릿수를 늘리고, 원본으로 보기로 비교해 보세요.