by 야무(yamoo9)

SVG 스프라이트

SVG 그래픽을 아이콘 스프라이트로 만들거나, 이미지 스프라이트로 만드는 손쉬운 방법을 소개해봅니다.

Iconizr

Iconizr 온라인 서비스는 SVG + PNG Icon Kit 제너레이터 입니다.

사용법은 간단합니다. 스프라이트 이미지 처리할 SVG 파일들을 사이트에 드래그 앤 드롭 합니다. 그리고 아래 옵션에 적절한 값을 입력한 후, Create & download icon kit 버튼을 누릅니다.

온라인 무료 서비스라 변환에 다소 시간이 소요됩니다.

주어진 시간이 소요되면 프로세스가 성공적으로 종료됩니다. 생성된 Icon kit을 Download 하거나, Preview 할 수 있습니다.

생성된 SVG 아이콘 스프라이트 시트를 확인할 수 있습니다.

생성된 SVG 아이콘 중 컴파스(y9-icon_compass)를 사용하려면 다음과 같이 마크업 합니다.

<i class="icon y9-icon_compass y9-icon_compass-dims"></i>

접근성을 고려하여 aria-hidden 또는 aria-label 속성을 적용합니다. ※ 자세한 내용은 SVG 아이콘 접근성을 참고하세요.

표현 아이콘 예:

<a href="#">
  <i class="icon y9-icon_compass y9-icon_compass-dims" aria-hidden="true"></i>
  컴파스(Compass)
</a>

의미 아이콘 예:

<i class="icon y9-icon_compass y9-icon_compass-dims" aria-label="컴파스(Compass)"></i>

Spritebot

Spritebot은 SVGO 라이브러리를 포함하는 설치형 GUI SVG 스프라이트 생성기 입니다. 사용법은 간단합니다. 먼저 사용자의 플랫폼에 맞는 인스톨러를 다운로드 받은 후 설치합니다.

설치한 후 앱을 구동하면 SVG 파일을 드래그 앤 드롭 할 수 있는 간단한 인터페이스가 띄워집니다.

SVG 스프라이트 이미지로 작성할 SVG 이미지를 모두 인터페이스 안으로 드래그 앤 드롭 합니다. 인터페이스 우측에는 SVG 최적화 결과를 퍼센트(%)로 보여줍니다. 이제 남은 일은 Save Sprite Sheet 버튼을 누르는 것입니다.

생성된 sprite-sheet.svg 파일을 열어보면 구별 가능한 ID를 가진 심볼 그래픽을 볼 수 있습니다.

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon-network" viewBox="0 0 64 64">...</symbol>
  <symbol id="icon-onlinecart" viewBox="0 0 64 64">...</symbol>
  <symbol id="icon-presentation3" viewBox="0 0 64 64">...</symbol>
  <symbol id="icon-pricetag" viewBox="0 0 64 64">...</symbol>
  <symbol id="icon-safe" viewBox="0 0 64 64">...</symbol>
</svg>

Spritebot으로 생성된 SVG 스프라이트 이미지는 앞서 다룬 Iconizr와 사용법이 다릅니다. Spritebot이 생성한 스프라이트 이미지를 사용하는 방법은 2가지 입니다.

1. SVG 스프라이트 이미지를 로드 한 후 사용법

sprite-sheet.svg 파일을 이미지 폴더에 넣은 후, <svg><use /></svg> 요소를 사용해 이미지를 로드 합니다. 이 방법은 SVG 심볼을 재사용 하는 방법으로 필요할 경우 SVG 코드를 변경하거나, 애니메이션을 적용하는 등 활용도가 높습니다.

<svg><use xlink:href="./이미지-폴더/sprite-sheet.svg#icon-pricetag" /></svg>

2. SVG 스프라이트 이미지를 HTML 문서에 포함할 경우 사용법

HTML 문서에 SVG 스프라이트 코드를 삽입해서 사용할 경우, 먼저 불필요한 속성 xmlns를 제거하고 적절한 ID를 설정합니다. 그리고 화면에 렌더링 되지 않도록 hidden 속성을 <svg> 요소에 추가합니다.

<svg hidden id="svg-sprites">
  <symbol id="icon-network" viewBox="0 0 64 64">...</symbol>
  <symbol id="icon-onlinecart" viewBox="0 0 64 64">...</symbol>
  <symbol id="icon-presentation3" viewBox="0 0 64 64">...</symbol>
  <symbol id="icon-pricetag" viewBox="0 0 64 64">...</symbol>
  <symbol id="icon-safe" viewBox="0 0 64 64">...</symbol>
</svg>

동일한 문서에 SVG 심볼이 있으니, 심볼 ID를 사용해 바로 문서에서 재사용 할 수 있습니다. 앞서 이미지를 첨부한 경우보다 코드가 간결해지는 장점이 있습니다. 하지만, 여러 문서에서 동일한 SVG 스프라이트 이미지를 사용하려면 이 방법은 좋은 방법이라고 볼 수 없습니다.

<svg><use xlink:href="#icon-pricetag" /></svg>

참고

PreviousSVG 최적화NextSVG 애니메이션

Last updated