Web 개발자 가이드: SVG 통합 모범 사례

SVG 장점:
- 해상도 독립적
- 작은 파일 크기
- CSS로 스타일링 가능
- 애니메이션 가능
- 접근 가능
- SEO 친화적

적합한 용도:
- 로고와 아이콘
- 일러스트레이션
- 차트와 그래프
- UI 요소
- 애니메이션 그래픽

<!-- 1. Inline SVG -->
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40"/>
</svg>

<!-- 2. 이미지 태그 -->
<img src="icon.svg" alt="아이콘">

<!-- 3. CSS 배경 -->
<div style="background-image: url('icon.svg')"></div>

<!-- 4. Object/embed -->
<object data="graphic.svg" type="image/svg+xml"></object>

선택 기준:
Inline: CSS/JS 제어 필요
Image: 단순 표시
Background: 장식적
Object: 인터랙티브/복잡

// Inline 용도:
// - CSS 스타일링 필요
// - JS 인터랙션 필요
// - 애니메이션 필요
// - 작고 자주 사용

<!-- 최적화된 inline SVG -->
<svg
  viewBox="0 0 24 24"
  width="24"
  height="24"
  aria-hidden="true"
  focusable="false"
>
  <path d="M12 2L2 22h20z"/>
</svg>

<img
  src="/icons/logo.svg"
  alt="회사 로고"
  width="200"
  height="60"
  loading="lazy"
>

<picture>
  <source
    media="(min-width: 1024px)"
    srcset="logo-large.svg"
  >
  <img src="logo.svg" alt="로고">
</picture>

.icon {
  width: 24px;
  height: 24px;
  background: url('icon.svg') no-repeat center;
  background-size: contain;
}

.icon {
  background-image: url("data:image/svg+xml,%3Csvg...");
}

// SVG를 React 컴포넌트로
const Icon = ({ name, size = 24, color = 'currentColor' }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill={color}
  >
    <use href={`#icon-${name}`} />
  </svg>
);

<template>
  <svg
    :width="size"
    :height="size"
    :class="iconClass"
  >
    <use :href="iconHref" />
  </svg>
</template>

<!-- SVG 스프라이트 정의 -->
<svg style="display: none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </symbol>
  <symbol id="icon-menu" viewBox="0 0 24 24">
    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
  </symbol>
</svg>

<!-- 사용 -->
<svg><use href="#icon-home"/></svg>

<!-- 외부 스프라이트 파일 -->
<svg>
  <use href="/sprites.svg#icon-home"/>
</svg>

최적화 단계:
1. 메타데이터 제거
2. 패스 간소화
3. 소수점 최소화
4. 미사용 요소 제거
5. 압축/최소화

최적화 도구:
SVGO: CLI 옵티마이저
SVGOMG: 웹 인터페이스
svgo-loader: Webpack
@svgr/webpack: React

<!-- 접근 가능한 SVG -->
<svg
  role="img"
  aria-labelledby="title desc"
>
  <title id="title">장바구니</title>
  <desc id="desc">장바구니를 보려면 클릭</desc>
  <path d="..."/>
</svg>

<!-- 장식적 (a11y 불필요) -->
<svg aria-hidden="true" focusable="false">
  <path d="..."/>
</svg>

/* Fill과 stroke */
svg {
  fill: currentColor;
  stroke: none;
}

/* 호버 상태 */
svg:hover {
  fill: #007bff;
}

/* 트랜지션 */
svg {
  transition: fill 0.2s ease;
}

:root {
  --icon-size: 24px;
  --icon-color: currentColor;
}

.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  fill: var(--icon-color);
}

/* 회전 애니메이션 */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-icon {
  animation: spin 1s linear infinite;
}

<svg>
  <circle cx="50" cy="50" r="20">
    <animate
      attributeName="r"
      values="20;35;20"
      dur="1s"
      repeatCount="indefinite"
    />
  </circle>
</svg>

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
};

// vite.config.js
import svgr from 'vite-plugin-svgr';

export default {
  plugins: [svgr()],
};

변환 워크플로우:
1. 최고 품질로 래스터 내보내기
2. VectoSolve로 변환
3. SVG 출력 최적화
4. 프로젝트에 통합

SVG 준비:
- 깨끗한 패스
- 최소한의 노드
- 올바른 viewBox
- 임베디드 래스터 없음