SVG画像はアイコンやイラストに最適

SVGは「Scalable Vector Graphics」の略語ですが、拡大しても画質がぼやけずに鮮明に表示されるベクター形式の画像のことを指します。

例えば、以下のようなSVG画像があったとします。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M4 12h16M10 6l6 6-6 6"/>
</svg>

この場合、<svg>タグのなかに<path>タグが2つありますが、「M10 6」の箇所については、X座標:10、Y座標:6の位置（X:10、Y:6）に移動(M)する意味になります。

さらに「l6 6-6 6」の箇所については、X軸方向に6、Y軸方向に6ユニットで右下に移動した地点（X:16、Y12）まで線(l)を引く意味になります。続けて、X方向に-6、Y方向に6移動した地点（X:10、Y:18）まで左下に線を引き、これらの線で囲まれた部分が矢印となって以下のように表示されます。

矢印アイコンのpathデータ

上の<path>については背景を指定するタグのため、図形的な意味はありませんが、このコードでは2つのパスを使用して矢印のアイコン画像を表示しています。

■パスの仕様の詳細
→ https://www.w3.org/TR/SVG11/paths.html

このように、数学的な形状やパスを使用して画像を表現する方法をベクター形式と呼びますが、拡大可能なベクターグラフィックス（Scalable Vector Graphics）の意味で、SVG画像と呼ばれています。

一方、一般的な写真画像などのJPGやPNGはビットマップ形式と呼ばれていますが、画像をピクセル単位のドットで表示する方法のため、拡大すると画質が劣化したり、サイズ容量が大きくなることがあります。

それぞれにメリット、デメリットがありますが、ベクター形式のSVG画像については、シンプルなイラスト画像やアイコンなどを表示するのに適しています。一方、ビットマップ形式のJPG画像などは、リアルな写真など複雑な画像を表示するのに向いています。

拡大しても画質が劣化しないSVG画像のメリット

SVG画像でアイコンの形を変える際は、パスを伸ばしたり、あるいはfill属性で色を指定して塗りつぶすだけでよく、単に数値データを変えるだけで簡単に変更できます。

pathデータ変更後のSVG画像

また、画像にwidthやheightを指定することで、画質の劣化を抑えつつ、簡単に拡大や縮小することができます。

一方、一般的なJPGやPNGはビットマップ形式と呼ばれていますが、画像をピクセル単位のドットで表示する方法のため、拡大して表示すると画質が劣化することがあります。かといって、元画像を大きなサイズで表示すると、サイズ容量が大きくなるデメリットがあります。

その点でいえば、SVGを使用することにより、画質の劣化とサイズ容量の増加を抑えながら、数値のみを変更することで、簡単に画像を拡大、縮小できるメリットがあります。

そのため、スマホ用の375pxやディスプレイ用の1920pxなど、画像のサイズ容量を気にすることなく、閲覧者の解像度に応じて拡大、縮小することが可能になります。

ただし、必ずしもサイズ容量が増加しないわけではなく、リアルな写真のような複雑な画像の場合はかえってサイズ容量が大きくなる傾向があります。そのため、写真などについてはJPGやPNGを使用し、シンプルなアイコンやイラストなどについてのみ、SVG画像を使用することをおすすめします。

SVGは複雑でリアルな写真画像には向いていない

SVG画像は、数学的な形状やパスを使用して描画するため、写真のような複雑でリアルな画像を表示するには、ドットで表示するビットマップ形式のJPGやPNGの方が向いています。

例えば、以下のライオンのJPG画像があったとします。

■JPG画像

ライオン画像

これをSVG画像に変換した場合、以下のように画質が劣化します。

■SVGに変換した場合

SVGに変換したライオン画像

この原因は、それぞれの部分に分け、パスで描画したものを組み合わせたSVG画像だからです。

■SVG画像を構成するpathの１部

ライオン画像を構成するpath

パスを確認すると、以下のように膨大な量のテキストが記載されているため、データ量が大きくなり、SVGの場合はファイルサイズが大きくなる傾向があります。（※このページではPNGで代用しました。）

■pathのテキストデータ

ライオン画像のpathのテキストデータ

このように、複雑な写真画像の各部分をパスで表示する場合、画質が劣化するのに加え、pathのテキストデータ量が膨大になることにより、かえってJPG画像よりもサイズ容量が大きくなるため、ドットで描画するビットマップ形式の方が適しています。

一方で、以下のようなシンプルな画像の場合、pathのテキストデータは数行程度しかなく、サイズ容量はせいぜい7KB程度しかないため、SVG画像の方が適しています。

山のSVG画像

それぞれにメリット、デメリットがありますが、SVG画像については、pathの記載が数行で済むようなシンプルなアイコンやイラスト画像で使用するとよいでしょう。

Inkscapeを使ったSVG画像の作り方

SVG画像を自分で作るには、ベクター画像の編集ソフトを利用することをおすすめします。

人気のソフトには、有料のAdobe Illustratorなどもありますが、無料で利用できるオープンソースのInkscape（インクスケープ）がおすすめです。

→ Inkscape

矢印などの簡単なアイコン画像でしたら、アイコンのテンプレートを選択して、そのまま作成することができます。「ファイル」→「ドキュメントのプロパティ」からビューボックス、幅、高さなどを指定して作成していくとよいでしょう。

できるだけ、ビューボックスのアスペクト比と幅、高さのアスペクト比は同じにすることをおすすめします。16、24、48など、2や4、8などで割り切れる値を設定しておくとよいでしょう。

SVG画像が完成しましたら、「ファイル」→「名前を付けて保存」から、ファイルの種類で「SVG」を指定して保存します。出来上がった「.svg」ファイルについては、メモ帳などで開いてコードを確認することができます。

■既存の画像からトレースして作成

また、既存のPNGなどの画像からトレースしてSVG画像に変換することもできます。あるいは紙に書いた手書きのイラストを撮影したり、スキャンした画像からトレースするのもよいかもしれません。

PNGからSVGにトレース

変換したい画像をInkscapeで開き、「編集」→「全て選択」を選択したのち、「パス」→「ビットマップのトレース」にて、マルチカラーなどを適用してクリックします。検出モードによって結果が違ってくるため、プレビューで確認しながら適切なモードを選択します。

トレースが完了しましたら、レイヤーの箇所でトレース元の画像を削除すれば、SVG画像になっているはずです。

トレース元の画像を削除

SVG画像には、ビットマップ形式の画像を組み込むこともできますが、できるだけ、組み込みをせずに作成することをおすすめします。

加えて、完成したSVG画像のファイル容量を確認し、あまりにサイズが大きくなるようでしたら、検出モードを変更したり、PNGなど違う方法も検討してください。複雑な画像はpathの数が多くなり、500KBなど、かなりサイズが大きくなることもあるため、既存画像をトレースして使用する際にはサイズ容量もチェックしておくとよいでしょう。

■フリーのアイコン素材を使用する

Google Fontsにはフリーのアイコンも公開されていますが、そのまま利用できるようでしたら、無料のアイコンサイトなどでSVG画像をダウンロードして使用する方が簡単かもしれません。

→ Material Symbols and Icons - Google Fonts

Google Fontsでは、たいていのアイコンは用意されているため、自分で作成しなくても、こちらのサイトだけで十分かと思います。

SVG画像をサイトで使用する方法

■HTMLファイルにSVGコードを直接記載する方法

SVG画像はXMLベースのマークアップ言語ですが、HTMLタグとしても機能するため、上記のコードをHTMLファイルに直接記載して表示することができます。

この方法はインラインSVGと呼ばれていますが、.svg画像を外部リソースのファイルとして読み込む必要がなく、HTMLファイルのみで完結することができます。

ただし、SVG画像にはwidthとheightを指定しておくようにしましょう。

<p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M4 12h16M10 6l6 6-6 6"/></svg>
</p>

上記のようにHTMLに<p>タグなどで囲って記載すると、実際にはこのように表示されます。

上記のviewBox="0 0 24 24"については、X座標:0、Y座標:0を始点として、幅24ユニット、高さ24ユニットの表示領域の意味になります。仮に、サイトの表示領域の幅が720pxだった場合、1ユニットあたり30pxの計算となり、widthやheightを何も指定しない状態では180pxの大きさのアイコンとなって表示されてしまいます。

そのため、svg画像には、widthやheightを指定して大きさを制御することをおすすめします。このwidthやheightについて、デフォルトでの単位はpxとなります。

■SVGファイルを外部リソースとして参照する方法

あるいは、上記の<svg>タグのデータをメモ帳などに貼り付け、.拡張子を「任意の英数.svg」とし、文字コードUTF-8で保存すれば、画像のJPGやPNGなどと同様に、外部リソースのSVGファイルとして使用できます。

SVGファイルとして使用

この際には、<p>タグなどの記載は必要ありません。また、widthやheightの指定もどちらでも構いませんが、デフォルトのwidthやheightの値は指定しない方が拡大や縮小の制御はしやすいです。

サイト上で実際に使用する際には、一般的なJPG画像などと同様に<imgタグを使い、svgファイルをサーバーにアップロードした上で以下のように記載します。

<p><img src="sample.svg" alt="矢印のアイコン" width="48" height="48"></p>

■CSSで拡大や縮小を制御する方法

この際、svg画像については、class属性などを指定しておき、メディアクエリで場合分けをすると拡大や縮小の管理が楽になります。

例えば、SVGを設定している<imgタグについては、widthやheightを指定せず、class="svg-image"などのclass属性を設定しておきます。

<p><img src="sample.svg" alt="矢印のアイコン" class="svg-image"></p>コピーボタンコピーチェックボタン

また、CSSでは以下のように指定します。

img.svg-image {max-width: 100%;height: auto;}
@media (min-width: 768px) {
img.svg-image {width: 480px;height:auto;}
}
@media (min-width: 1900px) {
img.svg-image {width: 640px;height:auto;}
}コピーボタンコピーチェックボタン

このようにすることで、解像度の大きなデスクトップのデバイスでは幅640px、スマホでは端末幅、その他の大きさでは480pxの幅で表示されるようになります。

このように拡大して表示された場合でも、ベクター形式のSVGでは実際の元画像のサイズが拡大されないため、サイズ容量を抑制できるメリットがあります。

この点でいえば、ビットマップ形式のJPG画像の場合、拡大すると画質が劣化しますし、かといって元画像を拡大して表示するとサイズ容量が大きくなってしまいます。SVG画像にはそのようなデメリットを補う利点があります。

この設定は、クラス属性を指定したSVG画像にのみ適用されます。通常のJPG画像については設定しないようにしましょう。

トップページ　⁄　HTMLタグ　⁄　SVG画像
関連ページ