SVG 스프라이트
Last updated
Last updated
SVG 그래픽을 아이콘 스프라이트로 만들거나, 이미지 스프라이트로 만드는 손쉬운 방법을 소개해봅니다.
Iconizr 온라인 서비스는 SVG + PNG Icon Kit 제너레이터 입니다.
사용법은 간단합니다. 스프라이트 이미지 처리할 SVG 파일들을 사이트에 드래그 앤 드롭 합니다. 그리고 아래 옵션에 적절한 값을 입력한 후, Create & download icon kit 버튼을 누릅니다.
온라인 무료 서비스라 변환에 다소 시간이 소요됩니다.
주어진 시간이 소요되면 프로세스가 성공적으로 종료됩니다. 생성된 Icon kit을 Download 하거나, Preview 할 수 있습니다.
생성된 SVG 아이콘 스프라이트 시트를 확인할 수 있습니다.
생성된 SVG 아이콘 중 컴파스(y9-icon_compass)를 사용하려면 다음과 같이 마크업 합니다.
접근성을 고려하여 aria-hidden 또는 aria-label 속성을 적용합니다.
※ 자세한 내용은 SVG 아이콘 접근성을 참고하세요.
표현 아이콘 예:
의미 아이콘 예:
Spritebot은 SVGO 라이브러리를 포함하는 설치형 GUI SVG 스프라이트 생성기 입니다. 사용법은 간단합니다. 먼저 사용자의 플랫폼에 맞는 인스톨러를 다운로드 받은 후 설치합니다.
설치한 후 앱을 구동하면 SVG 파일을 드래그 앤 드롭 할 수 있는 간단한 인터페이스가 띄워집니다.
SVG 스프라이트 이미지로 작성할 SVG 이미지를 모두 인터페이스 안으로 드래그 앤 드롭 합니다. 인터페이스 우측에는 SVG 최적화 결과를 퍼센트(%)로 보여줍니다. 이제 남은 일은 Save Sprite Sheet 버튼을 누르는 것입니다.
생성된 sprite-sheet.svg 파일을 열어보면 구별 가능한 ID를 가진 심볼 그래픽을 볼 수 있습니다.
Spritebot으로 생성된 SVG 스프라이트 이미지는 앞서 다룬 Iconizr와 사용법이 다릅니다. Spritebot이 생성한 스프라이트 이미지를 사용하는 방법은 2가지 입니다.
sprite-sheet.svg 파일을 이미지 폴더에 넣은 후, <svg><use /></svg> 요소를 사용해 이미지를 로드 합니다. 이 방법은 SVG 심볼을 재사용 하는 방법으로 필요할 경우 SVG 코드를 변경하거나, 애니메이션을 적용하는 등 활용도가 높습니다.
HTML 문서에 SVG 스프라이트 코드를 삽입해서 사용할 경우, 먼저 불필요한 속성 xmlns를 제거하고 적절한 ID를 설정합니다. 그리고 화면에 렌더링 되지 않도록 hidden 속성을 <svg> 요소에 추가합니다.
동일한 문서에 SVG 심볼이 있으니, 심볼 ID를 사용해 바로 문서에서 재사용 할 수 있습니다. 앞서 이미지를 첨부한 경우보다 코드가 간결해지는 장점이 있습니다. 하지만, 여러 문서에서 동일한 SVG 스프라이트 이미지를 사용하려면 이 방법은 좋은 방법이라고 볼 수 없습니다.
