Manipulation SVG avec Claude Code

SVGの操作と最適化をClaude Codeで効率化

SVGはアイコン、イラスト、グラフなど幅広い用途で使われるベクター形式です。Claude Codeを使えば、SVGの生成、操作、最適化を素早く実装できます。

SVGアイコンシステムの構築

> 再利用可能なSVGアイコンコンポーネントを作成して。
> サイズ、色、アクセシビリティに対応して。

// components/Icon.tsx
interface IconProps {
  name: string;
  size?: number;
  color?: string;
  className?: string;
  label?: string;
}

const icons: Record<string, string> = {
  search: 'M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z',
  menu: 'M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5',
  close: 'M6 18L18 6M6 6l12 12',
  arrow: 'M8.25 4.5l7.5 7.5-7.5 7.5',
  check: 'M4.5 12.75l6 6 9-13.5',
};

export function Icon({ name, size = 24, color = 'currentColor', className, label }: IconProps) {
  const path = icons[name];
  if (!path) return null;

  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      role={label ? 'img' : 'presentation'}
      aria-label={label}
      aria-hidden={!label}
    >
      <path d={path} />
    </svg>
  );
}

SVGスプライトの実装

// components/SvgSprite.tsx
export function SvgSprite() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" style={{ display: 'none' }}>
      <symbol id="icon-home" viewBox="0 0 24 24">
        <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
      </symbol>
      <symbol id="icon-mail" viewBox="0 0 24 24">
        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
        <polyline points="22,6 12,13 2,6" />
      </symbol>
    </svg>
  );
}

// 使用方法
function NavIcon({ icon, label }: { icon: string; label: string }) {
  return (
    <svg width="24" height="24" aria-label={label}>
      <use href={`#icon-${icon}`} />
    </svg>
  );
}

SVGアニメーション

<!-- ローディングスピナー -->
<svg width="48" height="48" viewBox="0 0 48 48">
  <circle cx="24" cy="24" r="20" fill="none" stroke="#e5e7eb" stroke-width="4" />
  <circle cx="24" cy="24" r="20" fill="none" stroke="#3b82f6" stroke-width="4"
    stroke-dasharray="80 45"
    stroke-linecap="round">
    <animateTransform
      attributeName="transform"
      type="rotate"
      from="0 24 24"
      to="360 24 24"
      dur="1s"
      repeatCount="indefinite" />
  </circle>
</svg>

/* CSSによるSVGアニメーション */
.svg-draw path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s ease forwards;
}

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

/* ホバーでアイコン変化 */
.icon-hover {
  transition: transform 0.2s ease, color 0.2s ease;
}

.icon-hover:hover {
  transform: scale(1.1);
  color: var(--color-accent);
}

JavaScriptによるSVG生成

// 動的にSVGチャートを生成
function createBarChart(data: { label: string; value: number }[]): string {
  const width = 400;
  const height = 200;
  const barWidth = width / data.length - 10;
  const maxValue = Math.max(...data.map(d => d.value));

  const bars = data.map((d, i) => {
    const barHeight = (d.value / maxValue) * (height - 40);
    const x = i * (barWidth + 10) + 5;
    const y = height - barHeight - 20;

    return `
      <rect x="${x}" y="${y}" width="${barWidth}" height="${barHeight}"
            fill="#3b82f6" rx="4" />
      <text x="${x + barWidth / 2}" y="${height - 5}"
            text-anchor="middle" font-size="11">${d.label}</text>
    `;
  }).join('');

  return `<svg viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">
    ${bars}
  </svg>`;
}

SVGの最適化

> SVGファイルを最適化するスクリプトを作成して。
> 不要な属性やメタデータを削除して、ファイルサイズを削減して。

// scripts/optimize-svg.ts
import { optimize } from 'svgo';
import { readFileSync, writeFileSync } from 'fs';
import { globSync } from 'glob';

const svgFiles = globSync('src/assets/icons/**/*.svg');

for (const file of svgFiles) {
  const svg = readFileSync(file, 'utf-8');
  const result = optimize(svg, {
    plugins: [
      'preset-default',
      'removeDimensions',
      { name: 'removeAttrs', params: { attrs: ['data-name', 'class'] } },
      { name: 'addAttributesToSVGElement', params: { 
        attributes: [{ 'aria-hidden': 'true' }] 
      }},
    ],
  });

  writeFileSync(file, result.data);
  const savings = ((1 - result.data.length / svg.length) * 100).toFixed(1);
  console.log(`${file}: ${savings}% 削減`);
}

アクセシビリティ

// 装飾的SVG
<svg aria-hidden="true" focusable="false">...</svg>

// 意味のあるSVG
<svg role="img" aria-label="検索アイコン">
  <title>検索</title>
  ...
</svg>

// リンク内SVG
<a href="/search" aria-label="検索ページへ">
  <svg aria-hidden="true" focusable="false">...</svg>
</a>

Summary

SVGの操作と最適化は、パフォーマンスとユーザー体験の両面で重要です。Claude Codeを使えば、アイコンシステムの構築からSVGO最適化スクリプトまで、一貫した実装を効率的に進められます。CSSアニメーションと組み合わせることで、リッチなビジュアル表現も実現できます。SVGの仕様はW3C SVG Specificationを参照してください。