SVG / 아이콘
SVG 스프라이트 생성기: 심볼 및 아이콘 사용법
여러 SVG 아이콘을 추가해 심볼 스프라이트를 생성합니다. 마크업을 정제하고 파일 이름 ID의 중복을 제거하며 viewBox를 유지합니다. 필요하면 fill을 currentColor로 변환하고 sprite.svg를 다운로드할 수 있습니다.
SVG 스프라이트 생성기: 심볼 및 아이콘 사용법: SVG 아이콘을 여러 개 추가하면 각 아이콘에 하나의 심볼이 포함된 스프라이트 파일과 아이콘별 사용 코드가 생성됩니다. 스크립트, 외부 리소스 및 안전하지 않은 항목은 제거되며, 필요한 경우 크기 정보가 viewBox로 변환됩니다. fill을 currentColor로 전환하면 아이콘이 텍스트 색상을 따릅니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.
- 카테고리
- 개발자 도구
- 실행 횟수
- 브라우저에서
- 비용
- 무료 · 가입 불필요
- 사용 가능 여부
- 사용 가능
브라우저에서 전부 실행됩니다
스크립트, 이벤트 핸들러, 외부 리소스, 포함된 이미지, 텍스트 및 지원되지 않는 요소는 삭제됩니다. 기본 인라인 스타일은 프레젠테이션 속성으로 변환됩니다. viewBox가 없으면 숫자로 된 너비와 높이를 사용하며, 누락된 각 치수에는 24단위를 기본값으로 사용합니다. 사용하기 전에 각 미리 보기를 확인하십시오.
SVG 아이콘 편집심볼과 재사용
SVG 2는 심볼 및 use 요소와 해당 viewBox 동작을 지정합니다: https://www.w3.org/TR/SVG2/struct.html#SymbolElement ; https://www.w3.org/TR/SVG2/struct.html#UseElement
로컬 처리와 페인트
각 아이콘은 안전한 SVG 요소와 속성 목록으로 다시 구성되므로 스크립트, 이벤트 핸들러 및 외부 리소스가 스프라이트에 접근할 수 없습니다. 타사 아이콘 세트는 포함되지 않습니다. SVG 페인트와 currentColor는 https://www.w3.org/TR/SVG2/painting.html 에 지정되어 있습니다. 업로드한 아이콘의 라이선스는 사용자가 책임져야 합니다.
사용 방법
- 최대 60개의 SVG 아이콘을 추가합니다. 각 파일은 1 MB 미만이어야 합니다.
- 정제된 미리보기를 확인하고 필요하면 fill을 currentColor로 변환합니다.
- 스프라이트를 다운로드한 다음 아이콘을 선택해 사용 코드를 복사합니다.
개인정보 보호 및 제한사항
SVG 파일은 사용자의 기기에 로컬로 유지됩니다. 이 도구는 포함된 URL을 가져오거나 아이콘을 업로드하지 않습니다.
관련 도구
자주 묻는 질문
스프라이트는 어떻게 사용합니까?
페이지의 숨겨진 컨테이너에 SVG를 한 번 삽입한 다음, 복사한 인라인 사용 코드를 사용합니다. 별도 파일을 사용하려면 대신 href에 sprite.svg#id를 지정하십시오.
viewBox가 없으면 어떻게 됩니까?
px 단위를 포함한 숫자 width와 height로 새 viewBox를 정의합니다. 누락되었거나 지원되지 않는 크기는 24 단위로 설정됩니다. 미리보기에서 수정된 viewBox를 표시하므로 잘림 여부를 확인할 수 있습니다.
모든 아이콘이 원래 모양을 그대로 유지합니까?
아니요. 기본 도형, 그룹, 그라디언트, 클리핑 및 마스크는 유지되지만 스크립트, 텍스트, 포함된 이미지, use 요소 및 지원되지 않는 스타일은 제거됩니다. 미리보기를 확인하십시오. 업로드한 아트워크의 라이선스에 대한 책임은 사용자에게 있습니다.
무료 도구 · 브라우저에서회 실행 · 계정 불필요