SVG CONVERTER
履歴SVG→コード
← Back to Blog

SVGコードの書き方・使い方完全ガイド｜基礎から実践サンプルまで

SVGコードの基本構文からHTML/CSS/JavaScriptでの実装方法まで、具体例でわかりやすく解説。レスポンシブ対応やアニメーション技法、よくあるエラーと解決策も紹介します。

3 min read

SVG（Scalable Vector Graphics）は拡大縮小しても画質が劣化しないベクター画像形式です。本記事ではSVGコードの書き方から実践的な活用方法まで、具体例を交えて詳細に解説します。

SVGコードの基本構造と構文

SVGコードはXMLベースのマークアップ言語で、図形やパスを定義します。基本的なSVGドキュメントの構造から理解しましょう。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="100" fill="blue" />
  <circle cx="100" cy="100" r="40" fill="red" />
</svg>

上記のコードは青い四角形と赤い円を描画する基本的なSVGコードです。xmlns属性はSVGの名前空間を指定し、必須の要素となります。

主要なSVG要素とそのコード

基本図形の描画

SVGでは様々な図形をコードで表現できます。以下に主要な図形のサンプルコードを示します。

<svg width="300" height="300" viewBox="0 0 300 300">
  <!-- 四角形 -->
  <rect x="20" y="20" width="100" height="80" fill="#3498db" stroke="#2980b9" stroke-width="2"/>
  
  <!-- 円 -->
  <circle cx="200" cy="60" r="40" fill="#e74c3c" opacity="0.8"/>
  
  <!-- 楕円 -->
  <ellipse cx="80" cy="180" rx="60" ry="30" fill="#9b59b6"/>
  
  <!-- 直線 -->
  <line x1="150" y1="150" x2="250" y2="250" stroke="#27ae60" stroke-width="3"/>
  
  <!-- 多角形 -->
  <polygon points="180,180 220,200 200,240 160,240 140,200" fill="#f39c12"/>
</svg>

パス（Path）要素

複雑な形状を表現するには<path>要素を使用します。パスコマンドを用いて自由な曲線や形状を描画できます。

<svg width="200" height="200">
  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
  <path d="M20 120 C 40 60, 100 40, 160 120" stroke="blue" fill="transparent"/>
  <path d="M30 150 L 70 130 L 110 170 L 150 140" stroke="red" fill="none"/>
</svg>

HTMLでのSVGコード実装方法

インラインSVGの埋め込み

HTMLファイル内に直接SVGコードを記述する方法です。CSSやJavaScriptとの連携が容易になります。

<!DOCTYPE html>
<html>
<head>
  <style>
    .svg-container {
      width: 100%;
      max-width: 400px;
    }
    .interactive-rect {
      fill: #3498db;
      transition: fill 0.3s ease;
    }
    .interactive-rect:hover {
      fill: #e74c3c;
    }
  </style>
</head>
<body>
  <div class="svg-container">
    <svg viewBox="0 0 200 200">
      <rect class="interactive-rect" x="50" y="50" width="100" height="100" rx="10"/>
      <text x="100" y="120" text-anchor="middle" fill="white">ホバー効果</text>
    </svg>
  </div>
</body>
</html>

外部SVGファイルの読み込み

<img>タグやCSSのbackground-imageで外部SVGファイルを読み込む方法です。

<!-- imgタグでの読み込み -->
<img src="icon.svg" alt="SVGアイコン" width="100" height="100">

<!-- CSSでの背景画像設定 -->
<div style="background-image: url('background.svg'); width: 300px; height: 200px;"></div>

<!-- objectタグでの読み込み（インタラクティブなSVG向け） -->
<object type="image/svg+xml" data="interactive.svg" width="200" height="200"></object>

CSSでのSVGコードスタイリング

SVG要素にはCSSでスタイルを適用できます。スタイルの指定方法にはいくつかのパターンがあります。

/* 外部CSSファイルでのスタイリング */
svg .custom-shape {
  fill: #2ecc71;
  stroke: #27ae60;
  stroke-width: 2;
  transition: all 0.3s ease;
}

svg .custom-shape:hover {
  fill: #e74c3c;
  transform: scale(1.05);
}

/* アニメーション効果 */
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.animated-circle {
  animation: pulse 2s infinite;
}

JavaScriptによるSVGコードの動的制御

SVG要素はJavaScriptで動的に操作できます。DOM操作と同様の方法で要素を制御します。

// SVG要素の作成と追加
const svgNS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(svgNS, "svg");
svg.setAttribute("width", "200");
svg.setAttribute("height", "200");

const circle = document.createElementNS(svgNS, "circle");
circle.setAttribute("cx", "100");
circle.setAttribute("cy", "100");
circle.setAttribute("r", "50");
circle.setAttribute("fill", "#3498db");

svg.appendChild(circle);
document.getElementById("container").appendChild(svg);

// インタラクティブな操作
circle.addEventListener("click", function() {
  const currentRadius = parseInt(circle.getAttribute("r"));
  circle.setAttribute("r", currentRadius + 10);
});

// アニメーション制御
function animateElement() {
  let scale = 1;
  setInterval(() => {
    scale = scale === 1 ? 1.2 : 1;
    circle.setAttribute("transform", `scale(${scale})`);
  }, 1000);
}

レスポンシブなSVGコードの実装

モバイルファーストの現代Webデザインでは、SVGのレスポンシブ対応が重要です。

<svg viewBox="0 0 300 150" preserveAspectRatio="xMidYMid meet">
  <!-- viewBoxでアスペクト比を維持 -->
  <rect x="10%" y="10%" width="80%" height="80%" fill="#3498db"/>
</svg>
.responsive-svg {
  width: 100%;
  height: auto;
  max-width: 600px;
}

/* メディアクエリでのスタイル調整 */
@media (max-width: 768px) {
  .responsive-svg {
    max-width: 100%;
  }
}

よくあるSVGコードのエラーと解決策

エラー1：表示されないSVG

<!-- 問題のあるコード -->
<svg width="100" height="100">
  <rect x="0" y="0" width="100" height="100" fill="blue">
</svg>

<!-- 修正したコード -->
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100" height="100" fill="blue"/>
</svg>

解決策: xmlns属性の追加とタグの閉じ忘れを修正します。

エラー2：パスデータの構文エラー

<!-- 問題のあるパス -->
<path d="M10 10 L 100 100 L 200 200" fill="red"/>

<!-- 修正したパス -->
<path d="M10 10 L 100 100 L 200 200 Z" fill="red"/>

解決策: パスを閉じるにはZコマンドを使用します。

パフォーマンス最適化のためのSVGコード

SVGファイルのサイズを最適化することで、ページ読み込み速度を向上させます。

<!-- 最適化前 -->
<svg width="200" height="200">
  <rect x="10" y="10" width="180" height="180" fill="#000000"/>
  <circle cx="100" cy="100" r="50" fill="#ff0000"/>
</svg>

<!-- 最適化後 -->
<svg viewBox="0 0 200 200">
  <path d="M10 10h180v180H10z" fill="#000"/>
  <path d="M100 100a50 50 0 1 0 0-0.1z" fill="#f00"/>
</svg>

SVGコードのアクセシビリティ対応

アクセシブルなSVGを実装するためには、適切なARIA属性とテキスト代替を提供します。

<svg role="img" aria-labelledby="title desc" width="200" height="200">
  <title id="title">ビジネス成長チャート</title>
  <desc id="desc">四半期ごとの売上成長を示す折れ線グラフ</desc>
  
  <g aria-label="データ系列">
    <path d="M20 180 L 60 120 L 100 150 L 140 80 L 180 100" 
          stroke="#3498db" stroke-width="3" fill="none"/>
  </g>
</svg>

よくある質問（FAQ）

SVGコードを最適化するツールはありますか？

SVGO（SVG Optimizer）が代表的です。SVGO GitHubリポジトリで公開されており、コマンドラインやオンラインツールとして利用できます。画像編集ソフトのエクスポート機能でも最適化オプションが提供されています。

SVGコードとCanvasの違いは何ですか？

SVGはベクターベースのDOM要素で、CSSでのスタイリングやイベント処理が容易です。一方、Canvasはピクセルベースで、複雑なアニメーションやゲーム開発に向いています。MDN Web Docsに詳細な比較が記載されています。

SVGコードのブラウザ互換性はどうですか？

現代的なブラウザでは広くサポートされています。Internet Explorer 9以降で基本的な機能が利用可能です。特定の機能を使用する際は、Can I useで互換性を確認することをお勧めします。

まとめ

SVGコードはモダンなWeb開発において不可欠な技術です。ベクターグラフィックスの特性を活かし、レスポンシブでアクセシブル、かつ高性能なビジュアルを実現できます。本記事で紹介した基本構造から実践的なテクニックまでを参考に、質の高いSVGコードを作成してください。