SVG 스프라이트 생성기

두 가지입니다. 스프라이트 전체를 HTML 앞부분에 붙이고 use href="#icon-name"으로 참조하거나, 파일로 서비스하고 use href="/sprite.svg#icon-name"으로 참조합니다. 앞쪽은 요청 하나를 아끼고, 뒤쪽은 브라우저가 스프라이트 하나를 모든 페이지에 걸쳐 캐시하게 해 줍니다.

파일 이름에서 옵니다. 소문자로 바꾸고, 글자와 숫자가 아닌 것은 붙임표로 바꾼 뒤, 앞에 접두사를 붙입니다. 기본 접두사라면 arrow_left.svg는 icon-arrow-left가 됩니다.

XML의 id는 숫자로 시작할 수 없는데 2-arrow.svg 같은 파일 이름은 흔합니다. 접두사는 페이지에 이미 있는 id와 부딪히는 것도 막아 줍니다. 바꾸거나 비울 수 있고, 비웠을 때 id가 잘못되면 대체 접두사가 다시 붙습니다.

뒤엣것에 번호가 붙습니다. 그러지 않으면 두 symbol이 같은 id를 달게 되고, 그 id를 가리키는 참조는 모두 첫 번째 아이콘을 그립니다 — 오류가 아니라 조용히 틀린 그림입니다.

살아남습니다. 아이콘 안의 모든 id와 클래스는 그 아이콘의 symbol id를 접두사로 새 이름을 받고, 참조도 함께 고쳐집니다: 속성의 url(), 조각 href, style 속성, style 요소 안의 CSS.

아이콘이 fill="currentColor"를 쓴다면 됩니다. 참조를 감싼 svg에 color를 주면 아이콘이 따라옵니다. 칠을 못박아 둔 아이콘은 그 색을 유지합니다 — 스프라이트는 당신의 색을 고치지 않습니다.

한 번에 40개까지입니다. 스프라이트 자체에는 실질적인 한계가 없지만, 그보다 훨씬 큰 시트는 보통 사이트 구역별로 나누는 편이 낫습니다. 그래야 한 페이지가 실제로 쓰는 아이콘만 싣습니다.

아니요. SVG의 해석과 조립은 브라우저 안에서 끝나고, 미리보기는 당신 기기에서 만든 blob URL입니다. 이 도구에는 파일을 받을 서버 자체가 없습니다.

네. 무료이고 워터마크도 가입도 없습니다.