SVG 톺아보기

SVG란 Scalable Vector Graphics의 약자로
2차원 벡터 그래픽을 표현하기 위한 XML 기반의 마크업 언어이다.

벡터 기반이기 때문에 크기를 조절해도 품질 손실이 없고 텍스트 편집기로도 내용 수정이 가능하다!

SVG의 장점

1. 확장성: 어떤 크기로 조절해도 품질 저하가 없음
2. 작은 파일 크기: 복잡한 이미지가 아니라면 대체로 래스터 이미지보다 파일 크기가 작음
3. 검색 엔진 최적화(SEO): 검색 엔진이 SVG의 텍스트 요소를 읽을 수 있음
4. 접근성: 텍스트 편집기로도 내용 수정 가능
5. 애니메이션: CSS나 JavaScript로 쉽게 애니메이션을 적용

SVG 사용법

1. <img> 태그 사용

<img src="icon.svg" alt="아이콘" width="100" height="100">

2. CSS background-image 속성 사용

.icon {
  background-image: url('icon.svg');
  width: 100px;
  height: 100px;
}

3. SVG 코드를 직접 HTML에 삽입

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

4. 애니메이션

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle class="pulse" cx="50" cy="50" r="40" fill="tomato" />
</svg>

.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

5. Next.js에서 SVG 사용하기

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"]
    });
    return config;
  }
}

next.config.js에 설정

위 과정을 거치면 SVG를 React 컴포넌트처럼 사용하는 것이 가능해진다.

import Icon from './icon.svg';

const MyComponent = () => (
  <div>
    <Icon width={50} height={50} />
  </div>
);