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：Webインターフェース
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
- 埋め込みラスターなし