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

SVGファイルとは？初心者でもわかる基礎から活用方法まで徹底解説

SVGファイルとは何かをわかりやすく解説。ベクター形式の特徴やPNG/JPEGとの違い、作成・編集方法、Webサイトでの活用事例まで、実際のコード例を交えて詳しく紹介します。

2 min read

SVGファイルとは、Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略称で、XMLベースのベクター画像形式です。拡大縮小しても画質が劣化しない特徴を持ち、現代のWebデザインにおいて不可欠な存在となっています。

SVGファイルとは何か？基本概念を理解する

SVGファイルとは、数式で図形を定義するベクター形式の画像ファイルです。ラスター形式（JPEG、PNGなど）とは根本的に異なり、ピクセルの集合ではなく、点、線、曲線、多角形などの数値データで画像を表現します。

ベクター形式の特徴

  • 拡大縮小自由：どんなに拡大してもジャギー（ギザギザ）が発生しない
  • ファイルサイズが小さい：複雑な図形でも軽量に保存可能
  • 編集が容易：テキストエディタで直接編集できる
  • スタイル変更が簡単：CSSで色やサイズを変更可能

SVGファイルの構造と基本的な書き方

SVGファイルの基本構造はXMLで構成されており、以下のようなコード形式になります：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 円を描画 -->
  <circle cx="100" cy="100" r="80" fill="blue" stroke="black" stroke-width="2"/>
  
  <!-- 四角形を描画 -->
  <rect x="50" y="50" width="100" height="100" fill="red" opacity="0.5"/>
</svg>

基本的な図形要素

SVGファイルでは様々な図形要素を組み合わせて複雑なグラフィックを作成できます：

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 直線 -->
  <line x1="10" y1="10" x2="290" y2="190" stroke="black" stroke-width="2"/>
  
  <!-- 多角形 -->
  <polygon points="100,10 40,198 190,78 10,78 160,198" fill="lime" stroke="purple"/>
  
  <!-- パス（複雑な形状） -->
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>

SVGファイルと他の画像形式との比較

SVG vs PNG vs JPEG

特徴SVGPNGJPEG
形式ベクターラスターラスター
拡大縮小画質維持画質劣化画質劣化
ファイルサイズ図形に依存中〜大小〜中
透明度対応対応非対応
アニメーション可能不可能不可能

実践的なSVGファイルの活用方法

WebページでのSVG埋め込み

SVGファイルをHTMLに直接埋め込む方法：

<!DOCTYPE html>
<html>
<head>
    <title>SVG埋め込み例</title>
    <style>
        .custom-svg {
            width: 150px;
            height: 150px;
            transition: fill 0.3s ease;
        }
        .custom-svg:hover {
            fill: #ff6b6b;
        }
    </style>
</head>
<body>
    <svg class="custom-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" fill="#4ecdc4"/>
        <text x="50" y="55" text-anchor="middle" fill="white">Hover</text>
    </svg>
</body>
</html>

CSSでのスタイリング

SVG要素にCSSクラスを適用してスタイルを変更：

/* SVG要素のスタイリング */
.icon {
    fill: #3498db;
    stroke: #2980b9;
    stroke-width: 2;
    transition: all 0.3s ease;
}

.icon:hover {
    fill: #e74c3c;
    transform: scale(1.1);
}

/* レスポンシブなSVG */
.responsive-svg {
    width: 100%;
    height: auto;
    max-width: 600px;
}

よくある間違いと正しい使い方

間違った使い方

<!-- 非推奨：imgタグで複雑なSVGを使用 -->
<img src="complex-chart.svg" alt="グラフ" style="width: 800px; height: 600px;">

<!-- 非推奨：インラインSVGにスタイルを直接記述 -->
<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" style="fill:red;stroke:black;stroke-width:2"/>
</svg>

推奨される使い方

<!-- 推奨：objectタグでSVGを埋め込み -->
<object type="image/svg+xml" data="chart.svg" class="responsive-chart">
    お使いのブラウザはSVGをサポートしていません
</object>

<!-- 推奨：CSSクラスを使用 -->
<svg class="styled-icon" viewBox="0 0 24 24">
    <path class="icon-path" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>

SVGファイル作成・編集ツール

専門的なSVG編集には以下のツールがおすすめです：

  • Adobe Illustrator：プロフェッショナル向け
  • Inkscape：無料で高機能なオープンソースツール
  • Figma：Webベースのデザインツール
  • Sketch：Mac向けデザインツール

W3C SVG仕様書では、SVGの詳細な技術仕様を確認できます。

よくある質問（FAQ）

SVGファイルはどのような場面で使用すべきですか？

ロゴ、アイコン、図表、地図、技術図面など、拡大縮小が必要なグラフィックに最適です。写真のような複雑な画像には向いていません。

SVGファイルのセキュリティリスクは？

SVGファイルはXMLベースのため、悪意のあるコードを含む可能性があります。信頼できるソースからのみSVGファイルを使用し、ユーザーアップロード機能を実装する場合は適切なサニタイズが必要です。

すべてのブラウザでSVGはサポートされていますか？

現代の主要ブラウザ（Chrome、Firefox、Safari、Edge）はすべてSVGを完全にサポートしています。Can I useで詳細なブラウザサポート状況を確認できます。

まとめ

SVGファイルとは、現代のWeb開発において不可欠なベクター画像形式です。その拡張性、軽量性、編集の容易さから、レスポンシブWebデザインやインタラクティブなグラフィックスの実現に大きく貢献しています。基本的な構造を理解し、適切なツールと手法を駆使することで、より質の高いユーザー体験を提供できるでしょう。