SVG 아이콘 스프라이트 묶기

SVG 아이콘 스프라이트 묶기

정적 SVG의 안전한 하위 집합만 처리합니다. 원본 내부 ID 충돌을 해소하며 파일은 서버로 올리지 않습니다.

1. SVG 파일 선택

최대 24개 · 파일당 256KiB · 전체 2MiB

스크립트·외부 리소스·지원하지 않는 SVG 기능이 있으면 파일을 거부합니다. 파일 이름은 출력의 접근성 라벨에 포함됩니다.

파일을 추가하거나 예제를 확인하세요.

2. 아이콘 2개

star.svg 미리보기

star.svg

#icon-star

viewBox: 0 0 24 24

변경한 내부 ID: 1개

circle.svg 미리보기

circle.svg

#icon-circle

viewBox: 0 0 32 32

변경한 내부 ID: 1개

3. sprite와 사용 예제

icon-sprite.svg와 HTML 파일을 같은 출처에 두세요. HTML의 href 경로는 배치 위치에 맞게 바꿔야 합니다.

SVG sprite

<svg xmlns="http://www.w3.org/2000/svg"><defs>
<symbol id="icon-star" viewBox="0 0 24 24"><defs><linearGradient id="icon-star--paint"><stop offset="0%" stop-color="#eab308"/><stop offset="100%" stop-color="#f97316"/></linearGradient></defs><path d="M12 2 L15 9 L22 9 L17 14 L19 22 L12 17 L5 22 L7 14 L2 9 L9 9 Z" fill="url(#icon-star--paint)"/></symbol>
<symbol id="icon-circle" viewBox="0 0 32 32"><defs><linearGradient id="icon-circle--paint"><stop offset="0%" stop-color="#2563eb"/><stop offset="100%" stop-color="#14b8a6"/></linearGradient></defs><circle cx="16" cy="16" r="12" fill="url(#icon-circle--paint)"/></symbol>
</defs></svg>

HTML

<svg width="32" height="32" role="img" aria-label="star.svg"><use href="icon-sprite.svg#icon-star"/></svg>
<svg width="32" height="32" role="img" aria-label="circle.svg"><use href="icon-sprite.svg#icon-circle"/></svg>

댓글과 질문

SVG 아이콘 스프라이트 묶기

SVG 아이콘 여러 개를 올려 한 파일의 symbol로 묶습니다. 파일마다 viewBox를 보존하고 이름에서 고유한 symbol ID를 만들며, 서로 같은 이름의 그라데이션·클립 ID는 아이콘별로 바꿉니다. 아이콘별 미리보기와 ID를 확인하고 sprite 및 HTML 사용 예제를 저장하세요. 결과 예제의 icon-sprite.svg 경로를 실제 배치 위치에 맞추고 동일 출처에서 사용해야 합니다.

주요 기능

  • 최대 24개 로컬 SVG 파일을 하나의 symbol sprite로 결합
  • 각 아이콘의 viewBox·원본 비율 유지
  • 파일 간 중복 내부 ID와 url(#id) 참조를 함께 재작성
  • 아이콘별 미리보기·symbol ID·내부 ID 개수 표시
  • SVG sprite와 같은 출처 HTML 사용 예제 다운로드

사용 방법

  1. 두 아이콘 예제로 결과 구조를 확인하거나 SVG 파일 여러 개를 선택합니다.
  2. 파일별 미리보기·viewBox·생성된 symbol ID를 확인합니다.
  3. 불필요한 아이콘은 목록에서 제거합니다.
  4. SVG sprite와 HTML 예제를 다운로드하거나 HTML을 복사합니다.
  5. sprite를 사이트 자산으로 배치하고 HTML의 파일 경로를 맞춘 뒤 브라우저에서 확인합니다.

활용 예시

  • 서로 다른 viewBox 크기의 아이콘을 한 SVG 파일로 관리
  • 여러 아이콘에 같은 gradient ID가 있을 때 참조 충돌 방지
  • 웹페이지에서 아이콘별 symbol을 use로 재사용

자주 묻는 질문

같은 파일 이름을 두 번 올리면 어떻게 되나요?

symbol ID에 번호를 덧붙여 구분합니다. 예를 들어 icon-star와 icon-star-2가 됩니다.

그라데이션 ID가 두 파일에 모두 paint이면 안전한가요?

예. 각각의 내부 ID와 해당 url(#paint) 참조를 symbol별 ID로 함께 바꿉니다.

모든 SVG 파일을 받을 수 있나요?

아니요. path·기본 도형·그라데이션·clipPath·텍스트 등의 정적 하위 집합을 받습니다. 스크립트, 외부 이미지·폰트·CSS, use, mask, filter, 애니메이션, 엔티티와 지원하지 않는 속성은 거부합니다.

HTML 예제의 use가 보이지 않아요.

icon-sprite.svg를 HTML과 같은 출처의 실제 경로에 두고 href의 경로를 수정하세요. 외부 SVG를 참조하는 use는 브라우저의 동일 출처 제한을 받습니다.

미리보기와 실제 사이트 색상이 다를 수 있나요?

네. 현재 브라우저 글꼴, CSS 상속, 외부 sprite의 사용 방식에 따라 다를 수 있습니다. 다운로드한 결과를 대상 사이트에서 확인하세요.

개인정보 안내

선택한 SVG 파일은 현재 브라우저 메모리에서만 처리하고 이 도구의 서버 API로 전송하지 않습니다. 미리보기는 검사된 SVG의 데이터 URL이며 외부 리소스를 불러오지 않습니다.

관련 도구

SVG→PNG/JPG 변환이미지 SVG 벡터화파비콘 생성기WebAssembly 모듈 검사기다국어 연결 행렬 검사기구문 트리 질의 실험실컨테이너 빌드 단계 분석기의존성 그래프 탐색기버전 제약 충돌 분석기작업 스케줄 충돌 검사기패치 검토 작업대소스맵 탐색기다국어 카탈로그 검사기구조화 데이터 대조기HTTP 아카이브 분석기웹훅 서명 실험실Protobuf 스키마 작업대GraphQL 스키마 실험실Avro 스키마 호환성 검사기로컬 SQL 데이터 작업대스키마 기반 입력 폼 생성기3D 메쉬 검사·복구기관망 유량·압력 실험실로봇팔 운동학 실험열저항 회로 실험실보 휨 실험실기어열 배치 실험공차 누적 실험실센서 교정 곡선 맞추기PCB 적층 비교 설계기디지털 필터 설계기도로망 도달 범위 지도태양 그림자 배치 실험GPS 오차 시뮬레이터디지털 논리 회로 실험아날로그 회로 실험실링크 기구 운동 실험해석용 메쉬 생성기OpenAPI 계약 검사기DB 스키마 변경 계획기수식 차원 검사기트러스 힘 실험실논리식 최소화 실험실제어계 응답 실험실대기행렬 시뮬레이터위치 구역 출입 이벤트 실험실좌표계 변환 실험실측량 폐합 검산 실험실위성·래스터 구간 분류단계구분도 설계기지도 인쇄 편집기GeoTIFF 래스터 재투영고도 등고선 생성기지형 가시영역 실험실지형 유역 탐색기오프라인 지도 타일 패키저텍스트 파일 인코딩 작업대파일 경로 호환성 검사기SBOM 라이선스 탐색기파일 형식 위장 검사기npm 잠금 파일 충돌 해결기소스 비밀값 점검기오프라인 웹 자료 패키저인증서 체인 검사기토렌트 메타정보 검사기파일 분할 전송 패키저로컬 파일 암호 금고동일 파일 찾기압축 파일 작업대디자인 토큰 관리기반응형 간격 체계 설계기반응형 타이포 시스템 설계기포장 전개도 설계기Flexbox 배치 설계기CSS Grid 배치 설계기정규 언어 동치 검사기Markdown 문서 묶음 검사기로그 패턴 추출기반응형 HTML 레이아웃 검사기메일 HTML 렌더 검토기내부 링크 구조 분석기상태 전이 모델 테스트 생성기페트리넷 흐름 실험Git 이력 그래프 탐색기HTTP 요청 명령 설계기바이너리 프로토콜 설계기바이너리 Hex 편집기바이너리 차이 패치 만들기파일 전자서명 작업대API 모의 응답 실험실데이터 열 매핑 설계기이벤트 로그 세션 분석기데이터베이스 관계도 설계기시계열 누락 검사기학습 데이터 분할기데이터 흐름 계보 작성기결정트리 학습 실험실데이터 비식별 처리기데이터 계약 규칙 검사기JSON Schema 검증기항목 동시출현 분석기robots 규칙 시뮬레이터HTML 검색 기본 검사기접근성 구조 검사기RSS·Atom 피드 작성기IndexNow 배포 알림 준비기검색 로봇 로그 분석기CSP 정책 검토기검색 실적 CSV 분석기CSV 수식 위험 검사기CORS 응답 시뮬레이터HTTP 캐시 동작 실험실쿠키 속성 검사기성능 추적 파일 분석기사이트맵 구조 검사기파일 일괄 이름 바꾸기파일 묶음 무결성 검증기폴더 용량 지도폴더 차이 검토기방문 순서 최적화GeoJSON 지도 편집기지도 영역 중첩 분석기지도 라벨 배치기공간 속성 결합기GeoJSON 공간 위상 검사기GPS 이동 기록 분석기이동 기록 위치 가림표 관계 결합기피벗 테이블 작업대데이터 품질 프로파일러표 데이터 정제 작업대기록 대사 도구데이터 사전 작성기canonical 관계 검사기리다이렉트 계획 검증기HTTP 응답 속도·핑 참고 테스트내 브라우저·시스템 정보JSON ↔ YAML 변환기XML ↔ JSON 변환기HTML 포맷터JavaScript 압축기목 데이터 생성기.gitignore 생성기라이선스 생성기User-Agent 분석기비밀번호 강도 검사코드 이미지 만들기XML 포맷터HTTP 상태 코드 찾기MIME 타입 찾기JS·SQL 문자열 이스케이프CSS 박스 그림자 생성기CSS 그라데이션 생성기들여쓰기 변환기진법 변환기유니코드 이스케이프 변환기유니코드 문자 분석기JSON 구조 비교기Markdown 표 생성기Base64 인코더JSON 포맷터URL 인코더SQL 포맷터Cron 표현식 생성기정규식 테스터UUID 생성기해시 생성기타임스탬프 변환기JWT 디코더HTML 엔티티 변환기Markdown 미리보기CSS Minifier메타태그·OG 생성기JSON CSV 변환대소문자·케이스 변환이미지 Base64 변환
개발 도구 도구 전체 보기 →이미지/미디어 →텍스트/변환 →생활/재미 →