[React] React에서 SVG 쓰는 방법

기존에 쓰고 있던 png, jpeg 등의 파일에 비해 svg 파일은 생소하기도 하고 다루기 까다롭다고 느껴서
쓰지 않고 있었는데 최적화를 진행중 이미지가 너무 커서 어떻게 할까 생각을 하다 svg를 사용하기로 했습니다.

-SVG란

'Scalable Vector Graphics' 의 약어로 각 위치 값을 표시하는 벡터와 같은 방식의 2차원 그래픽용 XML
기반의 형식입니다.

-XML이란?

HTML과 같은 마크업 언어이고 HTML이 브라우저가 분석할 수 있는 태그로 기술되어있는 문서라면, XML은 웹페이지에서 데이터를 주고받기(통신하기) 위한 태그들로 기술된 문서입니다.

 

png, jpeg와 svg의 차이점

1. png, jpeg는 비트맵 기반의 이미지라서 원래의 크기보다 크게 보여지게 될 경우 이미지가 깨진다는 문제가 있습니다.
그러나 svg는 벡터 기반의 아이콘이라 확대나 축소를 해도 깨지지 않고 선명하게 볼 수 있습니다.

2. svg는 CSS와 JavaScript로 수정이 가능합니다. (애니메이션 등)

3. 파일의 크기가 동일한 이미지의 png, jpeg 보다 훨신 작습니다.

 

React에서 SVG 사용하는 방법

리액트에서 svg를 불러오는 방법은 대표적으로 2가지가 있습니다.

1. img src를 이용하는 방법 

import Rocket from 'assets/rocket.svg';
<img src={Rocket} />

png, jpeg 와 똑같은 방식으로 불러올 수 있으나 CSS와 JavaScript로 수정이 어렵습니다.

 

2. svg를 React 컴포넌트로 사용하는 방법 

import { ReactComponent as Rocket } from 'assets/rocket.svg';
<Rocket />

 

2번째 방식을 사용하면 css를 활용하여 크기, 색상, 애니메이션 등을 가진 아이콘으로 사용할 수 있습니다.

<svg
    enable-background="new 0 0 128 128"
    id="Слой_1"
    version="1.1"
    viewBox="0 0 128 128"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M75.1,92.9H52.9l-3-4.5C31.6,60.9,37.8,24,64,4l0,0l2.2,1.8c24.7,20.6,29.7,56.5,11.7,83.1L75.1,92.9z"
      fill="#F37865"
    />
</svg>

이러한 형태를 가진 svg 코드에서 바꾸고자 하는 요소를 "current"로 바꿔주면 css로 사용자가 원하는대로
커스텀 할 수 있게 됩니다.

예를들어 위에 코드의 width, height, fill 을 "current"로 바꿔주면 사용자가 원하는대로
컴포넌트에 width, height, fil 값을 줄 수 있습니다.

<svg
    enable-background="new 0 0 128 128"
    id="Слой_1"
    version="1.1"
    viewBox="0 0 128 128"
    xmlns="http://www.w3.org/2000/svg"
    width:"current"
    height:"current"
>
<path
      d="M75.1,92.9H52.9l-3-4.5C31.6,60.9,37.8,24,64,4l0,0l2.2,1.8c24.7,20.6,29.7,56.5,11.7,83.1L75.1,92.9z"
      fill="current"
    />
</svg>
 
<Rocket width="100" height="100" fill="green"/>

 

styled-components를 사용하여 적용하면 이런식으로 적용할 수 있습니다.

import { ReactComponent as Rocket } from 'assets/rocket.svg';
 
const RocketIcon = styled(Rocket)`
    
    width:100px;
    height:100px;
    fill:"green"
`
 
<RocketIcon /> 

 

 

SVG에 애니메이션 적용하는 방법

1. 전체 애니메이션 적용법

keyframes을 이용하여 적용합니다.

const spinAnimation = keyframes`
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
`;
 
const RocketIcon = styled(Rocket)`
    
    width:100px;
    height:100px;
    fill:"green"
 
    animation: ${spinAnimation} 2s linear infinite;
`

 

 

2. 부분 애니메이션 적용법

svg의 특정 부분(path)만 애니메이션을 적용하려면 SVG 코드를 JSX로 변환해야 됩니다.

-새로운 컴포넌트를 만들어 줍니다. => ex) SVGComponent.js 파일
그 후 svg의 모든 요소를 CTRL+C & CTRL+V로 퍼와서 넣어줍니다.

const SVGComponent = ( ) => (
  <svg
    enableBackground="new 0 0 128 128"
    id="Слой_1"
    version="1.1"
    viewBox="0 0 128 128"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      xmlns="http://www.w3.org/2000/svg"
      d="M75.1,92.9H52.9l-3-4.5C31.6,60.9,37.8,24,64,4l0,0l2.2,1.8c24.7,20.6,29.7,56.5,11.7,83.1L75.1,92.9z"
      fill="#F37865"
    />
{....}
</svg>

keyframes을 이용하여 애니메이션을 만들어 줍니다.

const fadeIn = keyframes`
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
`;

styled-components 기준 :
특정부분만 애니메이션이 나오게 하려면 
SVG파일의 path를 styled-components를 이용하여 바꿔줍니다.

const AnimatedPath = styled.path`
  animation: ${fadeIn} 1s ease-in-out infinite;
`;
 
 
const SVGComponent = ( ) => (
  <svg
    enableBackground="new 0 0 128 128"
    id="Слой_1"
    version="1.1"
    viewBox="0 0 128 128"
    xmlns="http://www.w3.org/2000/svg"
  >
     <AnimatedPath 
      xmlns="http://www.w3.org/2000/svg"
      d="M75.1,92.9H52.9l-3-4.5C31.6,60.9,37.8,24,64,4l0,0l2.2,1.8c24.7,20.6,29.7,56.5,11.7,83.1L75.1,92.9z"
      fill="#F37865"
    />
<path
      d="M75.1,92.9H52.9l-3-4.5C31.6,60.9,37.8,24,64,4l0,0l2.2,1.8c24.7,20.6,29.7,56.5,11.7,83.1L75.1,92.9z"
      fill="#F37865"
    />
    <g>
      <path
        d="M64,4L64,4C37.8,24,31.6,60.9,49.9,88.4l3,4.5h6l-3-4.5C38.3,62,41.3,25.5,65,5C64.7,4.8,64,4,64,4z"
        fill="#FFFFFF"
      />
...
</svg>

 

이렇게하면 AnimatedPath로 바뀐 path에만 애니메이션이 적용되게 할 수 있습니다.

 

프론트엔드 특성상 많은 이미지가 필요할 때가 있는데 SVG를 사용함으로써 용량이 적어 최적화도 되고
Component화 하여 사용자가 만들고 싶은 애니메이션이나 Custom 할 수 있어서 좋은 것 같습니다.
앞으로 이미지를 사용하는 일이 생긴다면 적극적으로 활용해야겠습니다.