SVG

Scalable Vector Graphics.

SVGとは

　SVGは Scalable Vector Graphics の略で、二次元グラフィックスを XMLで記述するための言語（テキストファイル）であり、ベクター形式の画像フォーマットでもあります。

　現在は代表的な最新ブラウザのすべてで SVGが利用可能です（Can I use SVG? ）。ただし、指定する属性によってはサポートされている状況に違いがあるようです。

　また、一部のブラウザではファビコンも SVG形式に対応しています（Can I use SVG favicons? ）。

　SVGを Webで利用する（SVG形式のファイルを HTMLで表示する）には以下のような方法があります。

　ただし、imgタグや CSSで表示する場合、表示された SVG画像に対して画像のパーツごとにスタイルを指定したり、JavaScript等で操作することができません。

画像ファイルとして読み込んで表示

　SVGは画像ファイル（外部ファイル）として img要素の src属性で指定したり、CSSの background-imageプロパティなどを使って読み込むことができます。

　SVGファイルの拡張子は .svg です（gzip圧縮された場合は .svgz になります）。

img要素として HTMLに記述

HTML source


<img src="sample.svg" width="100" height="100" alt="">

CSSの background-imageプロパティで背景画像として指定

HTML source


<div class="bg-svg"></div>

CSS source


.bg-svg {
	width: 100px;
	height: 100px;
	background-image: url("sample.svg");
}

ファビコンの設置（head要素内）

　以下はファビコンの設置例です。type属性（MIMEタイプ）を image/svg+xml にします。また、対応していないブラウザ用に PNG形式のファビコンも設置しています。

HTML source


<link rel="icon" href="sample.svg" type="image/svg+xml">
<link rel="icon alternate" href="sample.svg" type="image/png">

objectタグを使って表示

　objectタグを使って表示するには、data属性に表示する SVGファイルの URL、type属性（MIMEタイプ）に image/svg+xml を指定します。

HTML source


<object data="sample.svg" type="image/svg+xml" width="100" height="100"></object>

SVG要素として記述（インラインSVG）

　svg要素を HTMLの中に直接記述（コードをインラインで記述）することができます。

HTML source


<svg width="100px" height="100px">
	<circle cx="50" cy="50" r="50" fill="#33a595" />
</svg>

　上記のように記述した SVGは、HTMLの DOMの一部になります（DOMツリーとしてブラウザ内部に保持され、CSSや JavaScript等で操作することができます）。

　以下は Bootstrap Icons のSVGアイコンを表示して CSSで操作する例です。この例では svg要素の width と height を 64px に指定していますが、CSSでスタイルを設定することもできます。

　また、CSSの transition でホバー時に回転と拡大および色を変更するアニメーションを設定しています。

HTML source


<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-music-note-beamed" viewBox="0 0 16 16">
	<path d="M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2zm9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2z"/>
	<path fill-rule="evenodd" d="M14 11V2h1v9h-1zM6 3v10H5V3h1z"/>
	<path d="M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4V2.905z"/>
</svg>

CSS source


.bi-music-note-beamed {
	transition: 0.6s;
	margin: 30px 0;
}

.bi-music-note-beamed:hover {
	transform: rotate(360deg) scale(1.5);
	color: #33a595;
}