# SVG 스프라이트

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

### Iconizr

[Iconizr](https://iconizr.com/) 온라인 서비스는 SVG + PNG Icon Kit 제너레이터 입니다.

![](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESj2oAmWv2J2cQuXL1%2F-LET1NYj7JCnyEdcSjyZ%2Fimage.png?alt=media\&token=797f91e2-2249-4afb-858f-3faf9e1db19b)

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

![](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESj2oAmWv2J2cQuXL1%2F-LET28G189SEby2u0PxO%2Fimage.png?alt=media\&token=5e2f4fdc-ccf7-44f1-8152-8779263cfb5d)

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

![](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESj2oAmWv2J2cQuXL1%2F-LET2YyQg_zoH3VSsUPs%2Fimage.png?alt=media\&token=8234f96e-806b-47fc-a174-f9853626002b)

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

![](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESj2oAmWv2J2cQuXL1%2F-LET2kIIlG5RT0xFxQHm%2Fimage.png?alt=media\&token=0b8232c6-b2c8-4d6f-b92a-e27529f2f855)

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

![](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESj2oAmWv2J2cQuXL1%2F-LET3FFPhAkjVoV2CzXP%2Fimage.png?alt=media\&token=c3c4e5d6-6ed3-4548-81c0-204cb49cc08f)

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

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

접근성을 고려하여 `aria-hidden` 또는 `aria-label` 속성을 적용합니다. \
※ 자세한 내용은 [SVG 아이콘 접근성](https://a11y.gitbook.io/graphics-aria/~/edit/primary/svg-graphics/untitled)을 참고하세요.

표현 아이콘 예:

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

의미 아이콘 예:

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

### Spritebot

[Spritebot](https://github.com/thomasjbradley/spritebot)은 [SVGO](https://github.com/svg/svgo) 라이브러리를 포함하는 설치형 GUI SVG 스프라이트 생성기 입니다. 사용법은 간단합니다. 먼저 사용자의 플랫폼에 맞는 인스톨러를 [다운로드](https://github.com/thomasjbradley/spritebot#download) 받은 후 설치합니다.

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

![](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESj2oAmWv2J2cQuXL1%2F-LET5geeoH7Q4VyjRHkZ%2Fimage.png?alt=media\&token=df50fa0f-f5cc-489d-a828-5ffcc870bc5e)

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

![](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESj2oAmWv2J2cQuXL1%2F-LET5a6VgYQMurfYK8P-%2Fimage.png?alt=media\&token=96ac3932-6307-45c7-98e4-b7906b5f1512)

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

```markup
<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 코드를 변경하거나, 애니메이션을 적용하는 등 활용도가 높습니다.

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

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

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

```markup
<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 스프라이트 이미지를 사용하려면 이 방법은 좋은 방법이라고 볼 수 없습니다.

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

### 참고&#x20;

{% embed url="<https://speckyboy.com/top-50-free-icon-sets/>" %}
2018 웹 디자이너를 위한 무료 아이콘 세트 50선 입니다.
{% endembed %}

{% embed url="<https://icons8.com/>" %}
상당한 수의 아이콘을 제공합니다. 무료 라고 안내하나 SVG 파일 다운로드는 유료입니다.
{% endembed %}

{% embed url="<https://icomoon.io/>" %}
IcoMoon 온라인 앱 서비스입니다. SVG 파일을 업로드 하여 SVG 웹 폰트를 다운로드 받을 수 있습니다.
{% endembed %}

{% embed url="<https://github.com/jkphl/node-iconizr>" %}
Node.js 개발 환경을 구성할 수 있다면 CLI 명령어로 iconizr를 사용해보세요.
{% endembed %}

{% embed url="<https://css-tricks.com/svg-sprites-use-better-icon-fonts/>" %}
SVG 스프라이트 이미지 활용 방법을 소개합니다.
{% endembed %}