Svg는 어떻게 사용해야할까?

Svg가 뭔가요?

MDN 문서의 말을 빌리자면 다음과 같습니다.

SVG는 XHTML과 비슷한 XML 언어로 오른쪽에 있는 것과 같은 그래픽을 그리는 데 사용된다. SVG 이미지는 필요한 모든 선과 모양을 직접 일일이 지정하거나, 이미 존재하는 래스터 이미지를 수정하거나, 이 두 가지 방법을 조합해서 만들 수 있다. 이미지와 그 구성요소들은 변형되고, 조합되고, 필터링될 수 있으며, 이를 통해 원래의 형태를 완전히 바꿀 수도 있다. - MDN

이런 Svg를 사용하는 방법에는 무엇이 있을까요?

Svg 렌더링 방식

우선 Svg의 여러가지 사용방법 중 대표적인 몇가지를 알아보겠습니다.

인라인 Svg

인라인 Svg는 말 그대로 Svg 콘텐츠가 HTML에 직접 포함 시키는 방식을 말합니다.

아이콘이 동일한 페이지에서 여러 번 나타나면 해당 내용이 매번 반복됩니다.


<svg viewBox="0 0 24 24" width="24" height="24">
  <!-- paths, shapes, etc. -->
</svg>

React 에서는 이런식으로 컴포넌트로 만들어 사용할 수 있습니다.

하지만 전체 Svg 콘텐츠를 반환하는 수동으로 작성된 React 컴포넌트는 마이그레이션이 힘들어 안티 패턴 이라고 합니다.


export default GloddyIcon = (props) => (
  <svg viewBox="0 0 300 300" {...props}>
		  <!-- paths, shapes, etc. -->
  </svg>
);

그래서 이런점을 해결하기 위해 Svgr 같은 라이브러리가 있는데요.

Svgr은 .svg 파일에 대해 import가 동작하도록 번들러에게 자바스크립트가 아닌 파일을 어떻게 처리해야 할지 알려주고 .svg 파일을 리액트 컴포넌트로 변환합니다.

이는 SVG 태그의 속성(fill="red" 같은)을 손쉽게 추가할 수 있도록 해줍니다.


// App.jsx
import HeartIcon from "./HeartIcon.svg";
const App = () => <HeartIcon fill="red" />;

전체 SVG 콘텐츠를 반환하는 수동으로 작성된 React 구성 요소는 소개에 작성된 이유와 svgr과 비교하여 마이그레이션하기가 더 어렵기 때문에 웹에 대한 안티 패턴이라고 합니다.

Symbol Sprite

Symbol Sprite는 단일 Svg 파일에서 symbol 로 나누어진 아이콘들을 use 를 통해 원하는 아이콘의 id를 참조해 가져올 수 있는 방식입니다.

sprite 파일은 아이콘이 여러개인 페이지에서도 1회만 다운로드 받고 중복되는 코드를 줄일 수 있습니다.

또 사용측면에서도 id를 통해 참조하기에 컴포넌트로 분리하기 쉽고 재사용이 용이합니다.


<svg style="display:none">
  <symbol id="example" viewBox="0 0 24 24" width="24" height="24">
    <!-- paths, shapes, etc. -->
  </symbol>
</svg>

<svg><use href="#example"/></svg>

이미지

모든 이미지 형식과 마찬가지로 Svg도 img 를 통해서 표시할 수 있습니다.

다만 이 경우에는 아이콘의 색상을 변경할 수 없습니다.


<img src="path/to/icon/color.svg" alt="">

각 방식의 성능 비교

각 방식의 성능을 자세히 분석한 글이 있는데요 더욱 자세한 내용은 아래에서 확인이 가능합니다!

Which SVG technique performs best for way too many icons?

When I started giving talks about SVG back in 2016, I'd occasionally hear a question I never had a great answer for: What if you have a lot of icons on a page?

https://cloudfour.com/thinks/svg-icon-stress-test/

다음은 1,000개의 아이콘을 서로 다른 방식으로 렌더링한 결과를 ms 단위로 표시한 표 입니다.

속도 측면에서는 Image + Data URI 방식이 가장 빨랐지만 img 태그이기에 Svg의 많은 기능을 지원하지 못하기 때문에 Svg를 사용하는 의미가 없습니다.

그렇다면 Svg의 기능을 모두 지원하고 성능도 좋은 Inline Svg와 Symbol Sprite 방식을 사용하는게 좋아보입니다.

사용이 용이하고 성능도 괜찮은 Symbol Sprite가 짱짱맨 아님?

앞서 렌더링 방식을 살펴볼때 Symbol Sprite의 사용성을 칭찬했습니다.

제가 활동하는 Gloddy 팀에서 Icon을 렌더링할 때 바로 이 방식을 사용했습니다.

사용측에서 props 를 통해 Svg 다양한 값을 전달할 수 있고 굉장히 편리하게 사용이 가능한데요.


export default function Icon({
  id,
  width = 24,
  height = 24,
  fill = 'none',
  className,
  ...rest
}: IconProps) {
  return (
    <svg width={width} height={height} fill={fill} className={cn('shrink-0', className)} {...rest}>
      <use href={`/sprite/sprite.svg#${id}`} />
    </svg>
  );
}

<Icon id="24-notification" />

하지만 이 방식도 단점이 존재했습니다.

Gloddy 에서 어떤 이슈가 있었고 어떤 방식을 취했을까요?