JSON 맵을 사용하여 SVG 스프라이트 시트 생성

SVG 스프라이트시트란?

스프라이트시트는 작은 이미지 여러 개를 격자에 담은 이미지 하나와, 각각이 어디에 놓였는지 알려 주는 맵으로 이루어집니다. 여기서 원본은 SVG 파일입니다. 하나씩 자기 셀에 그려지고, 완성된 시트는 PNG, WebP 또는 하나의 SVG 캔버스로 내보냅니다.

SVG 기호 스프라이트와는 다릅니다. 기호 스프라이트는 페이지가 <use>의 ID로 참조하는 아이콘당 <symbol>가 있는 하나의 SVG 파일이므로 각 아이콘은 벡터 마크업으로 유지되고 CSS는 여전히 색상을 지정할 수 있습니다. 스프라이트시트는 시각적 캔버스입니다. 이를 사용하는 모든 것은 좌표에 따라 프레임을 분할합니다. HTML 아이콘용 기호 스프라이트, 캔버스용 스프라이트 시트, WebGL 또는 CSS 배경 스프라이트를 선택합니다.

스프라이트시트를 써야 하는 경우

스프라이트시트는 작은 이미지 여러 개를 파일 하나로 합칩니다. 그래서 게임이나 앱은 요청을 한 번만 보내고 모든 프레임을 텍스처 하나에 담아 둡니다. canvas와 WebGL 렌더러는 사각형 영역으로 시트에서 그림을 가져오고, CSS는 background-position으로 위치를 잡으며, JSON 맵이 좌표를 알려 주므로 손으로 잴 것이 없습니다. 쓰는 쪽이 픽셀 단위로 동작한다면 스프라이트시트를 꺼내 쓰세요. HTML 안에서 확대되고 색을 물려받는 아이콘이 필요하다면 SVG 심볼 스프라이트를 만드세요.

SVG 파일로 스프라이트시트를 만드는 방법

1. 1

   SVG 파일을 끌어다 놓거나 '파일 선택'을 눌러 대기열에 추가합니다. 한 번에 최대 40개까지 가능합니다.

2. 2

   그리드(열, 행, 셀 크기, 여백, 간격)를 정한 다음 정렬과 확대 비율, 아이콘 순서, 출력 형식을 지정하세요. 값을 바꾸는 대로 시트가 다시 그려집니다.

3. 3

   '모두 저장'을 누르면 시트와 JSON 프레임 맵이 담긴 ZIP 하나를 내려받을 수 있습니다.

개인정보: 파일은 브라우저를 벗어나지 않습니다

변환은 JavaScript 및 WebAssembly를 사용하여 브라우저에서 로컬로 실행됩니다. 파일 업로드나 서버측 변환이 없으므로 추가한 파일은 장치에 그대로 유지됩니다.

로컬 처리는 기밀 로고, 내부 문서 및 미공개 클라이언트 아트워크를 보호하는 데 도움이 됩니다. 페이지와 변환 코드는 사용하는 동안 캐시되므로 이미 연 도구는 네트워크 연결 없이도 계속 작동할 수 있습니다.

자주 묻는 질문