SVG

확장 가능한 벡터 그래픽(Scalable Vector Graphics)는 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어입니다. 벡터는 기본적인 도형, 패스 등 일러스트에서 작업하는 모든 것이 될 수 있습니다. 일반적으로 웹 상 이미지 파일형식은 JPEG를 많이 사용합니다. SVG는 코드로 수정할 수 있기 때문에 (텍스트 편집기에서 수정이 가능하고, CSS / JS로 이미지 변경이 가능합니다) 다른 이미지 형식보다 강력한 기능을 가지고 있습니다.

• 독립적인 해상도
• 모든 종류의 최신 브라우저 지원
• 경쟁력있는 기술(W3C 표준)
• 작성 및 수정의 편리
• CSS & JS로 구현
• 높은 압축 용량

리엑트(VDOM)에서 SVG 사용 유의점

기존 임포트 방식의 문제점

정적 파일의 일종인 SVG는 흔히 PNG,JPG,JPEG와 같은 이미지 파일과 동일하게 다음과 같이 esm 방식으로 불러와 사용한다.

가상 돔에서는 각각의 엘리먼트들의 업데이트를 계산해야 하기 때문에 아래와 같이 복잡한 경우 많은 CPU 자원을 사용하게 된다.

실제로 모바일 웹뷰를 기준으로 크롬에서 제공하는 light house를 이용해 성능 검사를 하게 되면 아래와 같이 16개의 svg 파일만 사용했음에도 불구하고 2000개의 엘리먼트들로 인해 급격한 프레임 드랍이 발생하는데

이에 대한 대안으로
img 태그와 같이 외부 리소스를 주소로 받는 html 태그를 사용하는 방법을 사용할 수 있다.

<object
  type="image/svg+xml"
  height="70"
  width="150"
  data="/assets/my-svg-path.svg"
></obeject>

• 위와 같은 방법을 사용할 시 크롬 네트워크 탭에서 svg가 외부 파일로 다운받아짐

꼭 이렇게 사용해야 하는가?

• 대표적인 번들러 webpack의 file-loader를 사용할 경우, 파일들이 외부 리소스로 불려지기 때문에 기존의 방식을 사용해도 문제가 없다.

• 또한 svg가 간단한 엘리먼트로 이뤄진 경우 오히려 번들에 포함시키지 않는 것이 좋을 수 있습니다.
  정적 파일을 다운받는데 추가적인 네트워크 자원을 사용하기 때문

• 기존에 svg를 사용하는 방식에서 퍼포먼스 이슈가 일어날 수 있는 점은 숙지하고 조심해야 합니다.
  아무리 컴포넌트 설계를 잘했다고 하더라도 복잡한 svg 파일로 인해 예상치 못한 cpu 점유율이 생길 수 있기 때문이다.