Webサイトで見かけるロゴやアイコン。拡大しても全然ぼやけないものがありますよね。
スマートフォンで見ても、大きなディスプレイで見ても、いつもクッキリ綺麗に表示される。そんな画像の秘密は「SVG」という形式にあります。
SVGは、従来のJPEGやPNG画像とは全く違う仕組みで作られています。拡大しても画質が劣化しない、ファイルサイズが小さい、プログラムで自由に操作できる、といった魅力的な特徴があるんです。
今回は、このSVGについて、初心者の方にも分かりやすく解説していきます。
SVGとは？
SVG（エスブイジー）は、Scalable Vector Graphicsの略で、日本語では「スケーラブルベクターグラフィックス」と呼ばれます。
簡単に言うと
SVGは、拡大縮小しても画質が劣化しない画像形式です。
どれだけ大きくしても、どれだけ小さくしても、常に綺麗に表示されます。まるで魔法のようですが、実は数学の力を使っているんです。
ベクター画像とは
SVGは「ベクター画像」の一種です。
ベクター画像とは、点の座標と線の方程式で画像を表現する方式です。
例えば、円を描く場合、「中心点が(100, 100)、半径が50の円」という情報だけで表現します。実際に表示する時に、この情報を元に計算して描画するのです。
XMLベースの形式
SVGは、XML（Extensible Markup Language）という形式で記述されます。
つまり、テキストエディタで開くと、人間が読める文字で書かれているんです。HTMLと似た構造なので、Webとの相性が抜群です。
ラスター画像との違い
SVGを理解するには、従来の画像形式との違いを知ることが重要です。
ラスター画像の仕組み
JPEG、PNG、GIFなどは「ラスター画像」と呼ばれます。
ラスター画像は、小さな点（ピクセル）を並べて画像を表現します。モザイク画や点描画と同じ原理ですね。
例えば、100×100ピクセルの画像なら、10,000個の点の色情報を持っています。
拡大した時の違い
ここが決定的な違いです。
ラスター画像を拡大すると
一つ一つのピクセルが大きくなり、画像がぼやけたり、ギザギザ（ジャギー）が目立ったりします。
元が100×100ピクセルの画像を200×200ピクセルに拡大すると、1つのピクセルが2×2倍に引き伸ばされるため、画質が落ちるのです。
SVGを拡大すると
数式を元に再計算して描画するため、どんなサイズでも綺麗に表示されます。
10倍にしても、100倍にしても、常に最適な状態で描かれます。
データの持ち方の違い
具体的な例で見てみましょう。赤い円を表現する場合を考えます。
ラスター画像（PNG）の場合
ピクセル(0,0)の色: 白
ピクセル(1,0)の色: 白
ピクセル(2,0)の色: 赤
ピクセル(3,0)の色: 赤
...（すべてのピクセルの色情報）SVGの場合
<circle cx="50" cy="50" r="40" fill="red" />たったこれだけです。「中心(50,50)、半径40の赤い円」という情報だけで済みます。
SVGのメリット
SVGを使うと、どんな良いことがあるのでしょうか。
1. スケーラビリティ（拡大縮小自由）
名前の通り、どんなサイズでも綺麗に表示できます。
スマートフォンの小さな画面でも、4Kディスプレイの大画面でも、常に最適な画質です。
レスポンシブデザイン（画面サイズに応じて表示を変える）との相性も抜群です。
2. ファイルサイズが小さい
シンプルな図形やロゴの場合、ラスター画像よりも大幅にファイルサイズを削減できます。
複雑な情報を持たないため、データ量が少なくて済むのです。
Webサイトの読み込み速度向上に貢献します。
3. 編集が簡単
テキスト形式なので、コードエディタで直接編集できます。
色を変える、サイズを変える、といった修正が簡単です。画像編集ソフトを開かなくても、ちょっとした変更ならすぐにできます。
4. プログラムで制御できる
JavaScriptやCSSを使って、SVGを動的に操作できます。
色を変えたり、形を変形させたり、アニメーションを付けたり、インタラクティブな表現が可能です。
5. アクセシビリティに優れる
SVG内にテキスト情報を含められるため、検索エンジンやスクリーンリーダーが内容を理解できます。
視覚障害のある方にも、音声で内容を伝えられるのです。
6. 印刷品質が高い
どんな解像度でも最適に描画されるため、印刷物にも向いています。
名刺、ポスター、看板など、様々なサイズで使う素材として便利です。
SVGのデメリット
良いことばかりではありません。SVGにも弱点があります。
1. 複雑な画像には向かない
写真のような複雑な画像は、ベクター形式で表現するのが困難です。
無理にSVG化すると、ファイルサイズが巨大になってしまいます。
2. ブラウザの負荷
表示するたびに計算が必要なため、非常に複雑なSVGだとブラウザに負荷がかかります。
特に、アニメーションを多用すると、動作が重くなることがあります。
3. 古いブラウザでは表示できない
Internet Explorer 8以前など、古いブラウザでは対応していません。
ただし、現代のブラウザはほぼすべて対応しているため、あまり問題にはなりません。
4. 作成に専門知識が必要
手書きでSVGコードを書くには、ある程度の知識が必要です。
もっとも、専用のツールを使えば、知識がなくても作成できます。
SVGの基本構造
SVGファイルの中身を見てみましょう。
基本的な書き方
SVGファイルは、このような構造になっています。
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="200"
height="200"
viewBox="0 0 200 200">
<!-- ここに図形を描く -->
</svg><svg>タグで囲まれた中に、図形の情報を書いていきます。
座標系
SVGでは、左上が原点(0, 0)です。
- X軸：右に行くほど数値が大きくなる
- Y軸：下に行くほど数値が大きくなる
この座標系を理解すれば、図形の位置が分かりやすくなります。
viewBox属性
viewBoxは、SVGの「見える範囲」を指定します。
viewBox="0 0 200 200"これは「左上(0,0)から、幅200、高さ200の範囲を表示する」という意味です。
この設定により、実際の表示サイズが変わっても、比率を保ったまま拡大縮小されます。
基本的な図形の描き方
SVGで使える基本図形を見てみましょう。
円（circle）
<circle cx="100" cy="100" r="50" fill="blue" />cx,cy：円の中心座標r：半径fill：塗りつぶしの色
楕円（ellipse）
<ellipse cx="100" cy="100" rx="80" ry="50" fill="green" />rx：横方向の半径ry：縦方向の半径
長方形（rect）
<rect x="50" y="50" width="100" height="80" fill="red" />x,y：左上の座標width,height：幅と高さ
角を丸くすることもできます。
<rect x="50" y="50" width="100" height="80" rx="10" fill="red" />rxで角の丸みを指定します。
線（line）
<line x1="10" y1="10" x2="190" y2="190" stroke="black" stroke-width="2" />x1,y1：始点の座標x2,y2：終点の座標stroke：線の色stroke-width：線の太さ
折れ線（polyline）
<polyline points="10,10 50,50 90,30 130,70"
stroke="purple"
stroke-width="2"
fill="none" />pointsに座標のリストを指定します。複数の点を線で結びます。
多角形（polygon）
<polygon points="100,10 40,180 190,60 10,60 160,180"
fill="yellow"
stroke="black" />polylineと似ていますが、最後の点と最初の点が自動的につながります。
パス（path）
最も柔軟な図形描画方法です。
<path d="M 10 10 L 90 90 L 10 90 Z" fill="orange" />d属性に、描画コマンドを書きます。
M：移動（Move）L：直線を引く（Line）Z：パスを閉じる
曲線も描けます。
<path d="M 10 80 Q 95 10 180 80" stroke="blue" fill="none" />Qは二次ベジェ曲線を描くコマンドです。
テキストの扱い
SVGではテキストも描けます。
基本的なテキスト
<text x="50" y="50" font-family="Arial" font-size="20" fill="black">
Hello SVG!
</text>パスに沿ったテキスト
曲線に沿って文字を配置することもできます。
<defs>
<path id="curve" d="M 50 100 Q 150 50 250 100" />
</defs>
<text>
<textPath href="#curve">
This text follows a curve
</textPath>
</text>グループ化と再利用
グループ（g要素）
複数の図形をまとめて扱えます。
<g id="myGroup" fill="blue" stroke="black">
<circle cx="50" cy="50" r="30" />
<circle cx="150" cy="50" r="30" />
</g>グループ全体に属性を適用できるので便利です。
定義と再利用（defs、use）
一度定義した図形を、何度も再利用できます。
<defs>
<circle id="myCircle" cx="0" cy="0" r="30" fill="red" />
</defs>
<use href="#myCircle" x="50" y="50" />
<use href="#myCircle" x="150" y="50" />
<use href="#myCircle" x="100" y="120" />同じ図形を複数配置する時に、コードがスッキリします。
スタイリング
SVGのスタイル指定方法を見てみましょう。
属性での指定
図形の属性として直接指定できます。
<circle cx="50" cy="50" r="30" fill="blue" stroke="black" stroke-width="2" />CSSでの指定
CSS（スタイルシート）で指定することもできます。
<style>
.my-circle {
fill: blue;
stroke: black;
stroke-width: 2;
}
</style>
<circle class="my-circle" cx="50" cy="50" r="30" />主なスタイルプロパティ
塗りつぶし関連
fill：塗りつぶしの色fill-opacity：塗りつぶしの透明度
線関連
stroke：線の色stroke-width：線の太さstroke-opacity：線の透明度stroke-dasharray：破線のパターン
その他
opacity：全体の透明度transform：変形（移動、回転、拡大縮小）
グラデーションと模様
より複雑な表現も可能です。
線形グラデーション
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<rect x="10" y="10" width="180" height="80" fill="url(#grad1)" />黄色から赤へのグラデーションです。
放射状グラデーション
<defs>
<radialGradient id="grad2">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<circle cx="100" cy="100" r="80" fill="url(#grad2)" />中心から外側に向かってグラデーションがかかります。
パターン
繰り返しのパターンも作れます。
<defs>
<pattern id="pattern1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="5" fill="red" />
</pattern>
</defs>
<rect x="0" y="0" width="200" height="200" fill="url(#pattern1)" />アニメーション
SVGは動かすこともできます。
SMIL（SVGアニメーション）
SVGの標準アニメーション機能です。
<circle cx="50" cy="50" r="30" fill="blue">
<animate attributeName="cx"
from="50"
to="150"
dur="2s"
repeatCount="indefinite" />
</circle>円が左右に往復する動きになります。
CSSアニメーション
CSSのアニメーション機能も使えます。
<style>
@keyframes move {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
.animated {
animation: move 2s infinite alternate;
}
</style>
<circle class="animated" cx="50" cy="50" r="30" fill="red" />JavaScriptでの制御
JavaScriptを使えば、より複雑な動きも可能です。
<svg id="mySvg" width="200" height="200">
<circle id="myCircle" cx="50" cy="50" r="30" fill="green" />
</svg>
<script>
const circle = document.getElementById('myCircle');
let x = 50;
setInterval(() => {
x += 1;
if (x > 150) x = 50;
circle.setAttribute('cx', x);
}, 20);
</script>SVGの作成方法
SVGファイルは、どうやって作るのでしょうか。
グラフィックソフトを使う
Adobe Illustrator
プロ向けの定番ソフトです。SVG出力機能が充実しています。
Inkscape
無料で使えるベクターグラフィックソフトです。機能も豊富で、初心者から上級者まで使えます。
Figma
Webブラウザで動作するデザインツールです。SVGのエクスポート機能があります。
Sketch
Mac専用のデザインツールです。UI/UXデザインに特化しています。
オンラインツールを使う
SVG-Edit
ブラウザ上で動作する無料のSVGエディタです。
Vectr
シンプルなインターフェースで、初心者にも使いやすいツールです。
コードエディタで書く
シンプルな図形なら、直接コードを書いた方が早いこともあります。
Visual Studio CodeやAtomなどのエディタで、SVGの構文をサポートしています。
HTMLでの使い方
Webページにで、SVGはどう使うのでしょうか。
方法1：imgタグ
通常の画像と同じように扱えます。
<img src="image.svg" alt="説明">最もシンプルですが、JavaScriptやCSSでの操作はできません。
方法2：インライン
HTMLの中に直接SVGコードを埋め込みます。
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>JavaScriptやCSSで自由に操作できます。
方法3：objectタグ
<object data="image.svg" type="image/svg+xml"></object>SVG内のスクリプトも実行されます。
方法4：背景画像（CSS）
.my-element {
background-image: url('image.svg');
}装飾的な要素として使う場合に便利です。
SVGの最適化
ファイルサイズを削減するテクニックをご紹介します。
不要な情報の削除
グラフィックソフトから出力されたSVGには、不要なメタデータが含まれていることがあります。
編集情報、コメント、使われていない定義などを削除することで、ファイルサイズを減らせます。
小数点以下の桁数を減らす
座標や数値の小数点以下を、必要最小限の桁数に丸めます。
<!-- 最適化前 -->
<circle cx="50.123456" cy="50.789012" r="30.456789" />
<!-- 最適化後 -->
<circle cx="50.1" cy="50.8" r="30.5" />パスの簡略化
複雑すぎるパスは、視覚的に問題ない範囲で簡略化できます。
SVGO（最適化ツール）
SVGOは、SVGファイルを自動で最適化してくれるツールです。
コマンドラインやオンライン版があり、様々な最適化処理を一括で行ってくれます。
ブラウザ対応状況
SVGは、どこで使えるのでしょうか。
主要ブラウザの対応
現代のブラウザは、ほぼすべてSVGに対応しています。
- Chrome：完全対応
- Firefox：完全対応
- Safari：完全対応
- Edge：完全対応
- Opera：完全対応
スマートフォンのブラウザも、iOS Safari、Android Chromeともに対応済みです。
古いブラウザへの対応
Internet Explorer 8以前では、SVGが表示できません。
もし対応が必要な場合は、PNG画像などをフォールバック（代替手段）として用意します。
<object data="image.svg" type="image/svg+xml">
<img src="image.png" alt="代替画像">
</object>SVGの実用例
実際に、SVGはどんな場面で使われているのでしょうか。
ロゴとアイコン
企業ロゴやWebサイトのアイコンは、SVGで作られることが多いです。
どんな画面サイズでも綺麗に表示され、色の変更も簡単だからです。
インフォグラフィック
グラフや図表をSVGで作成すると、拡大しても綺麗です。
データに応じて動的に生成することもできます。
地図
GoogleマップなどでもSVGが活用されています。
ズームしても地図が綺麗に表示されるのは、ベクター形式のおかげです。
アニメーション
ローディングアイコンやインタラクティブな演出に、SVGアニメーションがよく使われます。
軽量で滑らかな動きを実現できます。
データビジュアライゼーション
D3.jsなどのライブラリを使って、データを視覚化する時にSVGが活躍します。
動的にグラフを生成したり、インタラクティブにしたりできます。
SVGライブラリとツール
SVGをさらに便利に使うためのライブラリをご紹介します。
Snap.svg
JavaScriptでSVGを操作するためのライブラリです。
複雑なアニメーションやインタラクティブな表現が簡単に作れます。
D3.js
データドリブンなドキュメント操作に特化したライブラリです。
データビジュアライゼーションの定番ツールです。
Anime.js
軽量なアニメーションライブラリで、SVGにも対応しています。
滑らかで美しいアニメーションが簡単に作れます。
GSAP（GreenSock Animation Platform）
プロのアニメーター御用達のライブラリです。
高性能で複雑なアニメーションも実現できます。
SVGとアクセシビリティ
SVGを使う時は、アクセシビリティにも配慮しましょう。
titleとdesc要素
SVGに説明を付けることができます。
<svg>
<title>企業ロゴ</title>
<desc>青い円の中に白い文字でABCと書かれている</desc>
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>スクリーンリーダーが、この情報を読み上げてくれます。
role属性とaria-label
HTMLの要素として扱う場合は、role属性も設定すると良いでしょう。
<svg role="img" aria-label="企業ロゴ">
<!-- SVGの内容 -->
</svg>装飾的なSVG
純粋な装飾で、意味を持たないSVGの場合は、支援技術に無視してもらいます。
<svg aria-hidden="true">
<!-- 装飾的な図形 -->
</svg>まとめ
SVG（Scalable Vector Graphics）について、理解を深めましょう。
重要なポイントをおさらいします。
- SVGは拡大縮小しても画質が劣化しないベクター画像形式
- 数式で図形を表現するため、ラスター画像とは根本的に異なる
- ファイルサイズが小さく、編集も簡単
- XMLベースなので、HTMLと組み合わせやすい
- JavaScriptやCSSで動的に操作できる
- ロゴ、アイコン、グラフなどシンプルな図形に最適
- 写真のような複雑な画像には向かない
- 主要なブラウザはすべて対応している
- IllustratorやInkscapeなどのツールで作成できる
- アニメーションやインタラクティブな表現も可能
Webデザインやアプリ開発をする上で、SVGは欠かせない技術です。
レスポンシブデザインが当たり前の現代では、どんな画面サイズでも綺麗に表示できるSVGの価値は高まる一方です。
最初は難しく感じるかもしれませんが、基本的な図形の描き方を覚えれば、意外と簡単に使えるようになります。
ぜひ、あなたのプロジェクトでもSVGを活用してみてください。美しく、軽量で、柔軟な表現が可能になるはずです。
コメント