SVG 심볼 스프라이트
SVG 아이콘을 하나의 심볼 스프라이트로 합치기
SVG 아이콘 폴더를 하나의 재사용 가능한 스프라이트로 결합합니다. 각 파일은 미리 만들어진 <use> 스니펫이 있는 <symbol>가 되며, 접두사가 붙은 내부 ID는 그라디언트, 마스크 및 클립 경로가 충돌하는 것을 방지합니다.
이 설정은 스프라이트 전체에 적용됩니다.
스프라이트 미리보기
SVG 파일을 추가하면 스프라이트를 만듭니다.
아직 파일이 없습니다. 위에 파일을 놓거나 '파일 선택'을 누르세요.
심볼 스프라이트와 스프라이트시트 중 무엇을 쓸까요?
심볼 스프라이트는 아이콘마다 <symbol> 하나를 담은 SVG 파일 하나입니다. <use>로 심볼을 참조하기 전까지는 아무것도 그려지지 않으므로, 아이콘은 벡터로 남고 CSS로 스타일을 지정할 수 있으며 어떤 크기에서도 또렷합니다. 사용자 인터페이스 아이콘 세트에는 이쪽이 맞습니다.
스프라이트시트는 모든 아이콘을 격자에 늘어놓은 이미지 하나로, background-position이나 JSON 프레임 맵으로 그립니다. 아이콘이 고정된 좌표에 놓인 픽셀이므로 게임 엔진과 캔버스 렌더러가 기대하는 형태이고, 대상이 <use>를 아예 쓸 수 없을 때 필요한 형태이기도 합니다.
SVG 스프라이트시트 생성기 열기심볼 스프라이트를 써야 하는 경우
기호 스프라이트는 재사용 가능한 하나의 SVG 파일에 아이콘 세트를 유지하며 모든 아이콘 인스턴스는 반복되는 경로 블록 대신 짧은 <use> 요소가 됩니다. 이는 동일한 아이콘을 재사용하는 탐색, 버튼, 테이블 및 기타 인터페이스에 유용합니다. 기호는 벡터 마크업으로 유지되므로 선명도를 유지하고 CSS에서 색상과 크기를 상속할 수 있습니다.
SVG 심볼 스프라이트를 온라인에서 만드는 방법
- 1
SVG 아이콘을 끌어다 놓거나 '파일 선택'을 눌러 대기열에 추가합니다. 한 번에 최대 40개까지 가능하며, 목록 순서가 곧 심볼 순서입니다.
- 2
외부 파일과 인라인 스프라이트 중에서 고르고, 아이콘을 최적화할지와 viewBox를 표준화할지 정하세요. 아이콘 그리드가 스프라이트 자체에서 다시 만들어지는 모습을 그 자리에서 볼 수 있습니다.
- 3
'모두 저장'을 누르면 sprite.svg를 내려받을 수 있습니다. 사용 예시를 켜 두면 sprite.svg와 usage.html이 담긴 ZIP이 됩니다.
개인정보: 파일은 브라우저를 벗어나지 않습니다
변환은 JavaScript 및 WebAssembly를 사용하여 브라우저에서 로컬로 실행됩니다. 파일 업로드나 서버측 변환이 없으므로 추가한 파일은 장치에 그대로 유지됩니다.
로컬 처리는 기밀 로고, 내부 문서 및 미공개 클라이언트 아트워크를 보호하는 데 도움이 됩니다. 페이지와 변환 코드는 사용하는 동안 캐시되므로 이미 연 도구는 네트워크 연결 없이도 계속 작동할 수 있습니다.
자주 묻는 질문
두 파일이 같은 ID를 만들면 어떻게 되나요?
ID는 파일 이름에서 확장자를 뗀 부분을 소문자로 바꾸고 하이픈으로 이어 만듭니다. 그래서 'Arrow Left.svg'는 arrow-left가 됩니다. 두 파일이 같은 ID를 만들면 처음 것이 그 ID를 그대로 가지고 다음 것들은 -2, -3처럼 번호가 붙습니다. 목록에서 파일 이름을 바꾸면 ID도 그 자리에서 바뀌고, 목록을 정렬하거나 끌어서 옮겨도 마찬가지입니다. 순서상 첫 번째 파일이 번호 없는 ID를 가지기 때문입니다.
외부 스프라이트와 인라인 스프라이트 중 무엇을 써야 하나요?
외부 스프라이트는 <use href="sprite.svg#icon-id">로 참조하는 sprite.svg 파일입니다. 다른 에셋과 똑같이 캐시되고 HTML을 작게 유지해 주지만 요청이 하나 더 늘고, CORS가 허용하지 않는 한 같은 출처에서 와야 합니다. 인라인 스프라이트는 같은 마크업을 페이지 안의 숨긴 <svg>에 붙여 넣고 <use href="#icon-id">로 참조하는 방식입니다. 요청이 필요 없고 참조가 언제나 풀리지만, 그 바이트가 이를 쓰는 모든 HTML 문서에 되풀이됩니다.
스프라이트로 묶으면 아이콘 모양이 달라지나요?
아니요. 파일마다 루트 <svg>가 같은 viewBox를 가진 <symbol>이 되고, 그 자식들은 ID에 접두사가 붙는 것 말고는 그대로 옮겨집니다. 'SVG 최적화'는 SVG 최적화 도구와 똑같은 안전 단계 묶음을 실행하므로 주석, 편집기 메타데이터, 불필요한 속성은 사라지고 도형은 그대로 남습니다. 'viewBox 표준화'는 아이콘마다 정사각형 좌표 상자 안에 다시 가운데로 맞추는 것이어서 상자가 바뀔 뿐 그림은 바뀌지 않습니다. <script> 요소와 on* 속성은 언제나 제거됩니다. 스프라이트는 결국 페이지 안에 인라인되기 때문입니다.