こんにちは！この記事では、SVGの基本から実践的な使い方まで、初心者の方向けにわかりやすく解説していきます。
目次
1. SVGとは？
SVG（Scalable Vector Graphics）は、XMLベースのベクターグラフィックス形式です。Webでの使用を前提に設計された、W3C標準の画像フォーマットです。
主な用途
- Webサイトのアイコンやロゴ
- データの可視化（グラフやチャート）
- アニメーションやインタラクティブな図形
- 地図やダイアグラム
2. SVGの特徴とメリット
📱 解像度に依存しない
SVGの最大の特徴は、どんなサイズに拡大・縮小しても画質が劣化しないことです。
🎨 編集が容易
- テキストエディタで直接編集可能
- CSSでスタイリング可能
- JavaScriptで動的な操作が可能
📦 ファイルサイズ
- シンプルな図形の場合、PNGやJPGより軽量
- 数式で図形を表現するため、複雑な図形でも効率的
🔍 SEOフレンドリー
- テキストベースのため検索エンジンが内容を理解可能
- アクセシビリティの向上に貢献
3. 基本構造と主要な要素
SVGの基本構造
<svg width="500" height="300" viewBox="0 0 500 300">
<!-- ここに図形要素を配置 -->
</svg>
主要な属性
-
width,height: SVG要素の表示サイズ -
viewBox: 描画領域の座標系を定義 -
preserveAspectRatio: アスペクト比の制御方法を指定
基本的な図形要素
1. 四角形（rect）
<rect x="10" y="10" width="100" height="50" fill="blue" />
2. 円（circle）
<circle cx="60" cy="60" r="50" fill="red" />
3. 楕円（ellipse）
<ellipse cx="100" cy="50" rx="100" ry="50" fill="green" />
4. 直線（line）
<line x1="0" y1="0" x2="100" y2="100" stroke="black" />
5. 多角形（polygon）
<polygon points="50,0 100,50 50,100 0,50" fill="purple" />
よく使用する属性
-
fill: 塗りつぶしの色 -
stroke: 線の色 -
stroke-width: 線の太さ -
opacity: 透明度 -
transform: 変形（回転、拡大縮小など）
4. 実践：SVGで図形を描いてみよう
シンプルなアイコンの作成例
ホームアイコン
<svg width="100" height="100" viewBox="0 0 100 100">
<!-- 家の屋根 -->
<polygon points="10,50 50,10 90,50" fill="#666"/>
<!-- 家の本体 -->
<rect x="20" y="50" width="60" height="40" fill="#888"/>
<!-- ドア -->
<rect x="40" y="60" width="20" height="30" fill="#444"/>
</svg>
シンプルなグラフ
<svg width="200" height="100" viewBox="0 0 200 100">
<!-- 軸線 -->
<line x1="10" y1="90" x2="190" y2="90" stroke="black"/>
<line x1="10" y1="90" x2="10" y2="10" stroke="black"/>
<!-- バー -->
<rect x="30" y="40" width="20" height="50" fill="blue"/>
<rect x="60" y="20" width="20" height="70" fill="blue"/>
<rect x="90" y="50" width="20" height="40" fill="blue"/>
</svg>
5. HTMLへの組み込み方
1. インライン埋め込み
<!DOCTYPE html>
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red"/>
</svg>
</body>
</html>
2. img要素での読み込み
<img src="icon.svg" alt="アイコン" width="100" height="100">
3. CSS背景画像として使用
.icon {
background-image: url('icon.svg');
width: 100px;
height: 100px;
}
4. object要素での読み込み
<object data="icon.svg" type="image/svg+xml" width="100" height="100">
<!-- フォールバックコンテンツ -->
<img src="icon.png" alt="アイコン">
</object>
まとめ
SVGは現代のWeb開発において非常に重要な技術の1つです。この記事で解説した基本を押さえれば、以下のようなことが可能になります：
- レスポンシブな画像やアイコンの作成
- インタラクティブな図形やアニメーションの実装
- データの視覚化やグラフの作成
次のステップとしては、以下の学習をおすすめします：
- SVGのアニメーション（SMIL, CSS, JavaScript）
- パスコマンドを使用した複雑な図形の作成
- SVGフィルターやグラデーション
- JavaScriptを使用した動的なSVG操作