SVG 스프라이트를 활용하여 아이콘 효율적으로 사용하기 - 1

SVG 스프라이트가 뭐지?

SVG 스프라이트는 여러개의 SVG아이콘을 하나의 파일로 결합하여 관리하는 기법을 말합니다. 하나의 파일 안에서 <symbol>태그를 사용하여 각각의 개별 아이콘을 정의하고, <use>태그로 사용하게 됩니다. SVG 스프라이트를 사용하는 이유는 다음과 같습니다.

• 성능 최적화 - 하나의 SVG파일만 로드하므로 네트워크 비용을 줄여 성능을 개선할 수 있습니다.
• 일관된 스타일 - fill, stroke등의 스타일을 쉽게 제어할 수 있습니다.
• 재사용성 증가 - 여러페이지에서 동일한 아이콘을 사용할 경우 유리합니다.
• 유지보수성 증가 - 하나의 파일만 관리하면 되기때문에 효율적입니다.

어떻게 만들까?

SVG 스프라이트를 만들때는, <symbol>태그를 사용하여 여러개의 SVG 아이콘을 하나의 파일에 저장하면 됩니다. 개별 아이콘을 <symbol>태그로 감싸고, 각각의 id를 부여하여 구분합니다. viewBox 속성을 추가하여 아이콘의 크기를 조정할 수 있습니다.

<svg width="0" height="0">
  <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="calendar">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 8V18C5 19.1046 5.89543 20 7 20H17C18.1046 20 19 19.1046 19 18V8C19 6.89543 18.1046 6 17 6H7C5.89543 6 5 6.89543 5 8ZM3 8V18C3 20.2091 4.79086 22 7 22H17C19.2091 22 21 20.2091 21 18V8C21 5.79086 19.2091 4 17 4H7C4.79086 4 3 5.79086 3 8Z" fill="#1E293B"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M9 2C9.55228 2 10 2.44772 10 3V7C10 7.55228 9.55228 8 9 8C8.44771 8 8 7.55228 8 7V3C8 2.44772 8.44772 2 9 2Z" fill="#1E293B"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M15 2C15.5523 2 16 2.44772 16 3V7C16 7.55228 15.5523 8 15 8C14.4477 8 14 7.55228 14 7V3C14 2.44772 14.4477 2 15 2Z" fill="#1E293B"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M20 11H4V9H20V11Z" fill="#1E293B"></path>
  </symbol>
  <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="sch">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M10 4C6.68629 4 4 6.68629 4 10C4 13.3137 6.68629 16 10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10Z" fill="#1E293B"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.2929 14.2929C14.6834 13.9024 15.3166 13.9024 15.7071 14.2929C17.6597 16.2455 18.9097 17.4952 19.6715 18.2568L20.7068 19.2917L19.2932 20.7065L18.2575 19.6712C17.4956 18.9096 16.2455 17.6598 14.2929 15.7071C13.9024 15.3166 13.9024 14.6834 14.2929 14.2929ZM20.7074 20.706C20.317 21.0967 19.6838 21.0969 19.2932 20.7065L20.7068 19.2917C21.0975 19.6821 21.0978 20.3153 20.7074 20.706Z" fill="#1E293B"></path>
  </symbol>
  <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="x">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L19.7071 18.2929C20.0976 18.6834 20.0976 19.3166 19.7071 19.7071C19.3166 20.0976 18.6834 20.0976 18.2929 19.7071L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#1E293B"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.7071 4.29289C19.3166 3.90237 18.6834 3.90237 18.2929 4.29289L4.29289 18.2929C3.90237 18.6834 3.90237 19.3166 4.29289 19.7071C4.68342 20.0976 5.31658 20.0976 5.70711 19.7071L19.7071 5.70711C20.0976 5.31658 20.0976 4.68342 19.7071 4.29289Z" fill="#1E293B"></path>
  </symbol>
</svg>

👉 상황에 따라 SVG Sprite Generator 등 여러가지 자동화 도구를 사용할 수도 있고, 프로젝트 환경에 따라 Webpack, Gulp 등을 활용할 수도 있습니다. 여기에서는 개념만 간단히 살펴보기 위해 수동으로 SVG 스프라이트를 생성하는 방법만 소개하도록 하고, 다음글에서 SVG 스프라이트를 자동생성하는 방법을 다뤄보겠습니다.

 

SVG 스프라이트 사용하기

1. 외부 파일로 사용하기

앞서 생성한 SVG 스프라이트 파일을 외부 파일로 저장하여 html에 로드 후 사용하는 방법입니다. <symbol>태그의 xlink:href 속성을 이용하여 외부파일의 아이콘을 파일명#아이콘ID 형식으로 불러와 사용합니다.

<!-- 아이콘 사용 -->
<svg class="icon">
  <use xlink:href="sprite.svg#calendar"></use>
</svg>

2. 내부에 추가하여 사용하기

html 내부에 <symbol>을 직접 추가하여 사용할 수도 있습니다. 이 경우 파일경로 없이 #아이콘ID만 사용하면 됩니다.

<!-- 내부에 추가 -->
<svg width="0" height="0">
  <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="calendar">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 8V18C5 19.1046 5.89543 20 7 20H17C18.1046 20 19 19.1046 19 18V8C19 6.89543 18.1046 6 17 6H7C5.89543 6 5 6.89543 5 8ZM3 8V18C3 20.2091 4.79086 22 7 22H17C19.2091 22 21 20.2091 21 18V8C21 5.79086 19.2091 4 17 4H7C4.79086 4 3 5.79086 3 8Z" fill="#1E293B"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M9 2C9.55228 2 10 2.44772 10 3V7C10 7.55228 9.55228 8 9 8C8.44771 8 8 7.55228 8 7V3C8 2.44772 8.44772 2 9 2Z" fill="#1E293B"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M15 2C15.5523 2 16 2.44772 16 3V7C16 7.55228 15.5523 8 15 8C14.4477 8 14 7.55228 14 7V3C14 2.44772 14.4477 2 15 2Z" fill="#1E293B"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M20 11H4V9H20V11Z" fill="#1E293B"></path>
  </symbol>
  <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="sch">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M10 4C6.68629 4 4 6.68629 4 10C4 13.3137 6.68629 16 10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10Z" fill="#1E293B"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.2929 14.2929C14.6834 13.9024 15.3166 13.9024 15.7071 14.2929C17.6597 16.2455 18.9097 17.4952 19.6715 18.2568L20.7068 19.2917L19.2932 20.7065L18.2575 19.6712C17.4956 18.9096 16.2455 17.6598 14.2929 15.7071C13.9024 15.3166 13.9024 14.6834 14.2929 14.2929ZM20.7074 20.706C20.317 21.0967 19.6838 21.0969 19.2932 20.7065L20.7068 19.2917C21.0975 19.6821 21.0978 20.3153 20.7074 20.706Z" fill="#1E293B"></path>
  </symbol>
  <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="x">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L19.7071 18.2929C20.0976 18.6834 20.0976 19.3166 19.7071 19.7071C19.3166 20.0976 18.6834 20.0976 18.2929 19.7071L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#1E293B"></path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.7071 4.29289C19.3166 3.90237 18.6834 3.90237 18.2929 4.29289L4.29289 18.2929C3.90237 18.6834 3.90237 19.3166 4.29289 19.7071C4.68342 20.0976 5.31658 20.0976 5.70711 19.7071L19.7071 5.70711C20.0976 5.31658 20.0976 4.68342 19.7071 4.29289Z" fill="#1E293B"></path>
  </symbol>
</svg>

<!-- 아이콘 사용 -->
<svg class="icon">
  <use xlink:href="#calendar"></use>
</svg>