SVG Sprite

SVG Sprite 사용 배경

기존에 img 태그로 src를 통해 svg 파일을 불러왔다. 그러다보니 css로 색상을 변경하기 어려웠다.
또한 public/images 폴더에 많은 svg 파일이 존재하게 되어 import 해야한다는 점도 아쉬웠다.

-> 이러한 점을 해결하기 위해 SVG Sprite 기법을 적용하게 되었고 이를 통해 svg 파일들을 한 파일에서 관리하고 색상도 쉽게 변경할 수 있었다!

---

SVG Sprite 란?

이미지 스프라이트 기법

• 하나의 이미지 파일에서 페이지에 사용할 여러 이미지들을 넣어 좌표와 범위를 통해 특정 이미지를 불러오는 기법
• 이를 통해 한번의 이미지 로딩으로 필요한 이미지 부분만을 잘라 사용하여 이미지 호출을 하는 성능을 최적화 할 수 있음!

Spritebot이라는 툴을 사용하면 SVG 파일들을 스프라이트로 제작된 SVG 파일을 얻을 수 있다.
https://github.com/thomasjbradley/spritebot

• 각 <symbol> 태그별로 각각의 SVG 파일 정보가 존재하고 구분을 하기 위한 id값이 존재한다.

해당 id값을 이용해 특정 SVG 이미지를 불러오는 코드는 다음과 같다.

• <svg> 태그로 감싼 후에 <use> 태그로 원하는 svg 파일을 가져온다.

<svg width="24px" height="24px">
    <use href="/icons/icons.svg#[svg 파일 id값]"/>
</svg>

---

적용 결과

icons.svg 파일을 다음처럼 정의해서 하나의 파일로 여러 SVG 파일을 관리할 수 있다.

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="clock" viewBox="0 0 24 24" fill="none">
        <circle cx="12" cy="12" r="7.25" stroke="var(--color" stroke-width="1.5"/>
        <path stroke="var(--color" stroke-linecap="round" stroke-linejoin="round" d="M12 8v4h4"/>
    </symbol>
    <symbol id="close" viewBox="0 0 24 24">
        <path fill="var(--color" d="M6.343 7.761l1.414-1.414 9.9 9.9-1.415 1.414z"/>
        <path fill="var(--color" d="M7.758 17.653l-1.415-1.414 9.9-9.9 1.414 1.414z"/>
    </symbol>
</svg>

시계 모양 svg 이미지를 불러오는 코드는 다음과 같다.

<svg width="24px" height="24px">
    <use href="/images/icons.svg#clock"/>
</svg>

---

참고 블로그

SVG 스프라이트 기법으로 사이트 성능 향상시키기(리액트에서 스프라이트 SVG 사용하기)

SVG Sprite 기법을 사용해 나만의 특별한 Icon 컴포넌트 개발