svg란?(리액트의 프레이머 모션 적용)

1. SVG란?

SVG(Scalable Vector Graphics)는 크기를 조절해도 깨지지 않는 벡터 이미지이다.
HTML 요소처럼 사용할 수 있으며, 아이콘, 로고, 일러스트 등에 많이 사용된다.

• 픽셀 기반(JPG, PNG) 이미지와 달리 확대해도 깨지지 않음
• CSS와 JavaScript로 스타일 및 애니메이션 적용 가능
• React에서 직접 JSX로 작성 가능

---

2. React에서 SVG 사용하는 방법

1) JSX 안에 직접 넣기

function MyComponent() {
  return (
    <svg width="100" height="100" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="40" fill="blue" />
    </svg>
  );
}

• 내부 요소(fill, stroke)를 조작 가능
• 프레이머 모션과 결합하여 애니메이션 가능

---

✅ 2) img 태그로 사용

<img src="/logo.svg" alt="Logo" width={100} height={100} />

• 빠른 로딩 (브라우저에서 최적화됨)
• 내부 속성 조작 불가능

---

3) React 컴포넌트로 변환 (svgr 사용)

import { ReactComponent as Logo } from "./logo.svg";

function App() {
  return <Logo width={100} height={100} fill="red" />;
}

• fill, stroke 조작 가능
• Vite/Webpack에서는 vite-plugin-svgr 설치 필요

---

3. SVG 주요 속성

SVG는 CSS가 아닌 JSX 속성(prop) 으로 스타일을 조작해야 한다.

속성	설명	예제
width	너비 지정	<svg width="100">
height	높이 지정	<svg height="100">
fill	내부 색상 변경	<circle fill="red" />
stroke	테두리 색상 변경	<circle stroke="black" strokeWidth="2" />
strokeWidth	테두리 두께	<circle strokeWidth="5" />
opacity	투명도 설정 (0~1)	<rect opacity="0.5" />
viewBox	SVG 좌표 시스템	viewBox="0 0 100 100"
d	path 경로 정의	<path d="M10 10 L50 50" />

---

4. <svg> 태그 vs <path> 태그 차이

<svg> 태그 → 전체 SVG 캔버스

• 크기(width, height), 좌표 시스템(viewBox) 설정

<path> 태그 → 개별적인 선/도형을 그리는 역할

• d 속성을 사용해 선, 곡선, 도형을 직접 정의

예제

<svg width="200" height="200" viewBox="0 0 200 200">
  <path d="M10 10 H 190 V 190 H 10 Z" stroke="red" strokeWidth="4" fill="none"/>
</svg>

• d="M10 10 H 190 V 190 H 10 Z" → 사각형을 그리는 경로
• stroke="red" → 테두리 색상
• strokeWidth="4" → 테두리 두께

---

5. SVG 애니메이션 적용 (프레이머 모션 활용)

React에서 SVG를 애니메이션하려면 Framer Motion을 사용하면 된다.

import { motion } from "framer-motion";

export default function AnimatedSVG() {
  return (
    <svg width="200" height="200" viewBox="0 0 200 200">
      <motion.path
        d="M10 80 C40 10, 65 10, 95 80 S150 150, 180 80"
        stroke="red"
        strokeWidth="4"
        fill="transparent"
        initial={{ pathLength: 0 }}
        animate={{ pathLength: 1 }}
        transition={{ duration: 2, ease: "easeInOut" }}
      />
    </svg>
  );
}

설명

• strokeDasharray, strokeDashoffset 없이 pathLength만으로 애니메이션 적용
• initial={{ pathLength: 0 }} → 처음에는 보이지 않음
• animate={{ pathLength: 1 }} → 점점 선이 그려짐
• transition={{ duration: 2 }} → 2초 동안 애니메이션

---

정리

React에서 SVG 사용 방법

• JSX에서 <svg> 직접 작성 (추천)
• img 태그로 삽입 (fill 조작 불가능)
• svgr을 사용해 React 컴포넌트로 변환 가능

SVG 주요 속성

• fill: 내부 색상
• stroke: 테두리 색상
• viewBox: 크기 조절

SVG와 path 차이

• <svg> → 전체적인 틀
• <path> → 개별 도형, 글자, 아이콘 등

프레이머 모션을 활용한 애니메이션

• motion.path + pathLength를 사용해 선이 그려지는 효과 적용 가능