moai-tool-svg

SVG 作成・最適化スペシャリスト

ベクターグラフィックの作成、SVGO による最適化、アイコンシステム、データビジュアライゼーション、アニメーションを包括的に扱う SVG 開発です。このスキルでは、基本的な図形から複雑なアニメーショングラフィックまで、あらゆる SVG ワークフローのパターンを紹介します。

---

クイックリファレンス（30 秒）

基本的な SVG テンプレート

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <title>Accessible Title</title>
  <desc>Description for screen readers</desc>
  
</svg>

よく使う図形のチートシート

長方形：<rect x="10" y="10" width="80" height="60" rx="5" />

円：<circle cx="50" cy="50" r="40" />

楕円：<ellipse cx="50" cy="50" rx="40" ry="25" />

線：<line x1="10" y1="10" x2="90" y2="90" stroke="black" />

折れ線：<polyline points="10,10 50,50 90,10" fill="none" stroke="black" />

多角形：<polygon points="50,10 90,90 10,90" />

パスコマンドのクイックリファレンス

移動コマンド：

• M x y：絶対位置へ移動
• m dx dy：相対移動
• L x y：絶対位置まで線を引く
• l dx dy：相対位置まで線を引く
• H x：絶対位置まで水平線を引く
• h dx：相対位置まで水平線を引く
• V y：絶対位置まで垂直線を引く
• v dy：相対位置まで垂直線を引く
• Z：パスを閉じる

曲線コマンド：

• C x1 y1 x2 y2 x y：3 次ベジェ曲線（制御点 2 つ）
• S x2 y2 x y：滑らかな 3 次曲線（直前の制御点を反映）
• Q x1 y1 x y：2 次ベジェ曲線（制御点 1 つ）
• T x y：滑らかな 2 次曲線（直前の制御点を反映）
• A rx ry rotation large-arc sweep x y：円弧

SVGO CLI コマンド

グローバルにインストール：npm install -g svgo

単一ファイルを最適化：svgo input.svg -o output.svg

ディレクトリを最適化：svgo -f ./src/icons -o ./dist/icons

最適化の統計を表示：svgo input.svg --pretty --indent=2

設定ファイルを使用：svgo input.svg --config svgo.config.mjs

塗りと線のクイックリファレンス

塗りのプロパティ：fill、fill-opacity、fill-rule（nonzero、evenodd）

線のプロパティ：stroke、stroke-width、stroke-opacity、stroke-linecap（butt、round、square）、stroke-linejoin（miter、round、bevel）、stroke-dasharray、stroke-dashoffset

---

実装ガイド（5 分）

SVG ドキュメントの構造

SVG 要素には、単独で使用するファイルの場合、xmlns 属性が必要です。viewBox は「minX minY width height」の形式で座標系を定義します。width と height は、レンダリングされるサイズを設定します。

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 200 200"
     width="200" height="200"
     preserveAspectRatio="xMidYMid meet">

  
  <defs>
    <linearGradient id="grad1">
      <stop offset="0%" stop-color="#ff0000" />
      <stop offset="100%" stop-color="#0000ff" />
    </linearGradient>
  </defs>

  
  <g id="main-group" transform="translate(10, 10)">
    <rect width="100" height="100" fill="url(#grad1)" />
  </g>
</svg>

再利用可能なシンボルの作成

シンボルは、use 要素でインスタンス化できる再利用可能なグラフィックを定義します。スケーリング用に独自の viewBox を設定できます。

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="icon-star" viewBox="0 0 24 24">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
    </symbol>
  </defs>

  
  <use href="#icon-star" x="0" y="0" width="24" height="24" />
  <use href="#icon-star" x="30" y="0" width="24" height="24" fill="gold" />
  <use href="#icon-star" x="60" y="0" width="48" height="48" />
</svg>

パス作成パターン

移動、線、曲線を組み合わせたシンプルなアイコンパス：

<path d="M10 20 L20 10 L30 20 L20 30 Z" />

円弧を使った角丸長方形：

<path d="M15 5 H85 A10 10 0 0 1 95 15 V85 A10 10 0 0 1 85 95 H15 A10 10 0 0 1 5 85 V15 A10 10 0 0 1 15 5 Z" />

3 次ベジェ曲線を使ったハート形：

<path d="M50 88 C20 65 5 45 5 30 A15 15 0 0 1 35 30 Q50 45 50 45 Q50 45 65 30 A15 15 0 0 1 95 30 C95 45 80 65 50 88 Z" />

グラデーションの実装

左から右への線形グラデーション：

<defs>
  <linearGradient id="horizontal-grad" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#3498db" />
    <stop offset="50%" stop-color="#9b59b6" />
    <stop offset="100%" stop-color="#e74c3c" />
  </linearGradient>
</defs>
<rect fill="url(#horizontal-grad)" width="200" height="100" />

焦点を指定した放射状グラデーション：

<defs>
  <radialGradient id="sphere-grad" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
    <stop offset="0%" stop-color="#ffffff" />
    <stop offset="100%" stop-color="#3498db" />
  </radialGradient>
</defs>
<circle fill="url(#sphere-grad)" cx="50" cy="50" r="40" />

SVGO の設定

プロジェクトルートに svgo.config.mjs を作成します：

export default {
  multipass: true,
  plugins: [
    'preset-default',
    'prefixIds',
    {
      name: 'sortAttrs',
      params: {
        xmlnsOrder: 'alphabetical'
      }
    },
    {
      name: 'removeAttrs',
      params: {
        attrs: ['data-name', 'class']
      }
    }
  ]
};

特定の要素を保持する設定：

export default {
  multipass: true,
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,
          cleanupIds: {
            preserve: ['icon-', 'logo-']
          }
        }
      }
    }
  ]
};

React への SVG の埋め込み

インライン SVG コンポーネント：

const Icon = ({ size = 24, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <path d="M12 2L2 7l10 5 10-5-10-5z" stroke={color} strokeWidth="2" />
  </svg>
);

use 要素を使った SVG スプライト：

const SpriteIcon = ({ name, size = 24 }) => (
  <svg width={size} height={size}>
    <use href={`/sprites.svg#${name}`} />
  </svg>
);

テキスト要素

基本的なテキストの配置：

<text x="50" y="50" text-anchor="middle" dominant-baseline="middle"
      font-family="Arial" font-size="16" fill="#333">
  Centered Text
</text>

パス上のテキスト：

<defs>
  <path id="text-curve" d="M10 80 Q95 10 180 80" fill="none" />
</defs>
<text font-size="14">
  <textPath href="#text-curve">Text following a curved path</textPath>
</text>

---

高度な実装（10 分以上）

複雑なフィルター効果

ぼかしを使ったドロップシャドウ：

<defs>
  <filter id="drop-shadow" x="-20%" y="-20%" width="140%" height="140%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
    <feOffset in="blur" dx="3" dy="3" result="offsetBlur" />
    <feMerge>
      <feMergeNode in="offsetBlur" />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>
</defs>

グロー効果：

<filter id="glow">
  <feGaussianBlur stdDeviation="4" result="coloredBlur" />
  <feMerge>
    <feMergeNode in="coloredBlur" />
    <feMergeNode in="SourceGraphic" />
  </feMerge>
</filter>

クリッピングとマスキング

切り抜き用のクリップパス：

<defs>
  <clipPath id="circle-clip">
    <circle cx="50" cy="50" r="40" />
  </clipPath>
</defs>
<image href="photo.jpg" width="100" height="100" clip-path="url(#circle-clip)" />

フェード効果用のグラデーションマスク：

<defs>
  <linearGradient id="fade-grad">
    <stop offset="0%" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </linearGradient>
  <mask id="fade-mask">
    <rect width="100" height="100" fill="url(#fade-grad)" />
  </mask>
</defs>
<rect width="100" height="100" fill="blue" mask="url(#fade-mask)" />

CSS アニメーションとの連携

SVG 要素のキーフレームアニメーション：

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

.animated-circle {
  animation: pulse 2s ease-in-out infinite;
  transform-origin: center;
}

線を描画するアニメーション：

.draw-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s ease forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

アクセシビリティのベストプラクティス

意味のあるグラフィックには、必ず title と desc を含めてください：

<svg role="img" aria-labelledby="title desc">
  <title id="title">Company Logo</title>
  <desc id="desc">A blue mountain with snow-capped peak</desc>
  
</svg>

装飾用の SVG は、スクリーンリーダーから隠してください：

<svg aria-hidden="true" focusable="false">
  
</svg>

パフォーマンスの最適化

パスデータの精度を小数点以下 6 桁から 2 桁に下げます：

変更前：M10.123456 20.654321 L30.987654 40.123456

変更後：M10.12 20.65 L30.99 40.12

適切な場合は図形をパスに変換して、ファイルサイズを小さくします。繰り返し使う要素にはシンボルを使用します。SVGZ 圧縮を適用すると、サイズを 20～50% 削減できます。

各トピックの詳しいパターンについては、modules ディレクトリを参照してください。

---

モジュール一覧

• modules/svg-basics.md：ドキュメント構造、座標系、図形、パス、テキスト
• modules/svg-styling.md：塗り、ストローク、グラデーション、パターン、フィルター、クリッピング、マスキング
• modules/svg-optimization.md：SVGO の設定、圧縮、スプライト、パフォーマンス
• modules/svg-animation.md：CSS アニメーション、SMIL、JavaScript、インタラクションパターン

---

相性の良いツール

• moai-domain-frontend：React/Vue の SVG コンポーネント統合
• moai-docs-generation：ドキュメント用 SVG 図の生成
• moai-domain-uiux：アイコンシステムとデザインシステムの統合

よくある合理化

合理化	実際のところ
「このアイコンなら PNG で十分。SVG は過剰です」	PNG は解像度が異なるとぼやけ、複数のサイズが必要です。SVG はきれいに拡大縮小でき、シンプルな画像ならファイルサイズも小さくなります。
「SVG は後で最適化します」	デザインツールから出力した未最適化の SVG には、エディタのメタデータ、非表示のレイヤー、過剰な精度の小数点が含まれ、ファイルサイズが 50〜80% 増加します。
「インライン SVG は常に img タグより優れています」	インライン SVG は HTML のペイロードを増やし、ブラウザーのキャッシュを妨げます。動的なスタイル設定が不要な静的アイコンには img タグを使用してください。
「装飾用アイコンにはアクセシビリティは関係ありません」	装飾用アイコンには、スクリーンリーダーが適切に無視できるよう aria-hidden=true が必要です。指定しないと、意味のない内容が読み上げられます。
「SVGO のデフォルト設定は、どの SVG にも適しています」	SVGO のデフォルト設定では viewBox と title 要素が削除されます。アクセシビリティとレスポンシブ対応を維持するには、カスタム設定が必要です。

注意すべき兆候

• SVG ファイルにエディタのメタデータが含まれている（Illustrator、Sketch、Figma の出力時に付加された不要な情報）
• SVG に viewBox 属性がない（レスポンシブな拡大縮小ができない）
• インタラクティブな SVG に role 属性と aria-label 属性がない
• 装飾用 SVG に aria-hidden="true" がない
• SVG ファイルが同じ見た目の PNG より大きい

検証

• SVG が SVGO または同等のツールで最適化されている（最適化前後のファイルサイズを提示）
• すべての SVG に viewBox 属性がある（固定の width/height 属性のみではない）
• 装飾用 SVG に aria-hidden="true" がある
• インタラクティブな SVG に role="img" と aria-label がある
• SVG のファイルサイズが、対象解像度での同等の PNG より小さい
• コミットされた SVG ファイルにエディタのメタデータがない（Illustrator/Sketch/Figma のタグを確認）