SVG 스프라이트를 만드는 방법
세 단계, 약 10초. 아무것도 업로드되지 않습니다.
- 1
SVG 아이콘 놓기
파일, 폴더를 추가하거나 SVG 코드를 붙여넣으세요.
SVG24 icons - 2
id 접두사 설정
각 아이콘이 파일 이름을 딴 symbol이 됩니다. 예: icon-rocket.
icon-rocket - 3
sprite.svg 다운로드
사이트에 올리고 use 코드로 아이콘을 표시하세요.
SVGsprite.svg<use href="#icon-rocket"/>
더 많은 무료 도구
브라우저에서 바로 아이콘을 변환, 최적화, 패키징하세요. 아무것도 업로드되지 않습니다.
- 변환SVGicon.svg벡터PNGicon.png512 × 512SVG를 PNG로원하는 크기의 선명한 PNG, 하나든 수백 개든.도구 열기
- 트레이싱PNGheart.png64 × 64 pxSVGheart.svg패스 1개PNG를 SVG로PNG나 JPG를 깔끔한 벡터로 트레이싱.도구 열기
- 파비콘PNGlogo.png1024 pxICOfavicon.ico4가지 크기PNG를 ICO로16부터 256 px가 들어 있는 파비콘 .ico 파일.도구 열기
- 앱 아이콘SVGlogo.svg모든 크기ZIPicons.zip파일 14개파비콘 & 앱 아이콘웹사이트, Chrome, iOS, Android 세트.도구 열기
- 코드SVGbell.svg
<svg
viewBox="0 0 24"
<path d="M4…"
</svg>
export function
Icon(props) {
return <svg
{...props}/>
- 최적화SVGlogo.svg
4.2 KBSVGmin.svg−74%
1.1 KBSVG 최적화보이는 변화 없이 더 작은 SVG 파일.도구 열기 - 스티커JPGcat.jpg사진WEBPcat.webp512 × 512스티커 메이커WhatsApp과 Telegram 스티커 파일.도구 열기
- 애니메이션SVGbell.svg정적GIFbell.gif60 fps아이콘 애니메이터애니메이션 SVG, Lottie, GIF, Telegram 스티커.도구 열기
- AITXT“rocket ship”
rocket ship, line icon
몇 단어SVGrocket.svg벡터, 레이어AI 아이콘 생성기설명하면 깔끔한 SVG 아이콘을 받습니다.도구 열기 - 변환SVGicon.svg벡터JPGicon.jpg512 × 512SVG를 JPG로원하는 크기의 플랫 JPG 이미지.도구 열기
- 변환SVGicon.svg벡터WEBPicon.webp512 × 512SVG를 WebP로벡터에서 작은 WebP 이미지로.도구 열기
- 변환PNGphoto.png사진WEBPphoto.webp−64%PNG를 WebP로웹용으로 이미지 줄이기.도구 열기
- 변환PNGphoto.png사진JPGphoto.jpg더 작게PNG를 JPG로더 작은 사진, 흰색 또는 색상 배경.도구 열기
- 변환JPGphoto.jpg사진PNGphoto.png무손실JPG를 PNG로사진에서 무손실 PNG로.도구 열기
- 변환WEBPimage.webp이미지PNGimage.png무손실WebP를 PNG로어디서나 열리는 PNG 파일.도구 열기
- 변환ICOfavicon.ico4가지 크기PNGfavicon.png256 × 256ICO를 PNG로파비콘에서 아이콘 추출.도구 열기
- 트레이싱JPGlogo.jpg64 × 64 pxSVGlogo.svg패스 1개JPG를 SVG로사진과 로고를 벡터로 트레이싱.도구 열기
- 코드SVGbell.svg
<svg
viewBox="0 0 24"
<path d="M4…"
</svg>
export function
Icon(props) {
return <svg
{...props}/>
- 코드SVGbell.svg
<svg
viewBox="0 0 24"
<path d="M4…"
</svg>
export function
Icon(props) {
return <svg
{...props}/>
- 코드SVGbell.svg
<svg
viewBox="0 0 24"
<path d="M4…"
</svg>
export function
Icon(props) {
return <svg
{...props}/>
- 코드SVGbell.svg
<svg
viewBox="0 0 24"
<path d="M4…"
</svg>
export function
Icon(props) {
return <svg
{...props}/>
SVG 스프라이트 FAQ
아직 궁금하신가요? 라이선스를 읽거나 문의하세요.
브라우저가 모든 아이콘을 파일 하나로 로드하고 캐시합니다. 페이지의 각 아이콘은 전체 SVG 대신 마크업 한 줄입니다.
href가 스프라이트와 아이콘 id를 가리키는 use 요소를 담은 svg 요소를 추가하세요. 예: /sprite.svg#icon-rocket.
네. 단색 아이콘은 currentColor를 사용해 주변 텍스트 색상을 따릅니다.
네. 각 아이콘 안의 id에 symbol id 접두사가 붙으므로 그라데이션과 클립 패스가 충돌하지 않습니다.