HTML & CSS

最終更新日：
公開日：

レシピ

画像

SVG形式の画像を表示する

SVG形式で書き出された画像ファイルをHTMLに埋め込む基本的な方法を解説します。

この記事のポイント

  • img要素、svg要素、object要素、背景画像でSVG画像を表示する
  • SVG画像の表示サイズを指定する

目次

SVG形式のファイルをHTMLで表示する

SVG形式のファイルはベクター画像のため拡大しても画像が劣化しにくく、マルチデバイス対応で便利という特徴を持っています。
そのため、ロゴやアイコンをはじめ非常に広く使われるようになりました。

ロゴをSVG形式の画像で表示
ロゴをSVG形式の画像で表示

今回はSVG形式で書き出したファイルをHTMLで表示する4つの方法を解説します。

  • img要素で表示
  • svg要素で表示
  • object要素で表示
  • 背景画像として表示

img要素で表示

JPEGやPNGなど通常の画像と同じ形式で表示させる方法です。
画像を表示するには最も馴染みのある手段なので、今回ご紹介する方法の中でも一番扱いやすいかもしれません。

コード例

<style>
figure img {
	width: 100px;
}
</style>
<figure><img src="images/logo.svg" alt="GRAYCODE"></figure>

img要素のsrc属性にSVG形式のファイルパスを指定するだけです。
今回はCSSで画像の横幅を指定していますが、通常の画像と同様にwidth属性とheight属性を使ってサイズ指定することも可能です。

ラスター画像のように通常サイズと高解像度サイズなどサイズ別に画像を用意する必要がなく便利です。

img要素でSVG形式の画像を表示
img要素でSVG形式の画像を表示

svg要素で表示

書き出したSVG形式の画像(SVGのパス座標や色が記述されたテキストデータ)をそのままHTMLに記述する方法です。

コード例

<style>
figure svg {
	width: 100px;
}
</style>
<figure><svg id="layer1" data-name="layer1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 475.56 283.2"><defs><style>.cls-1{fill:#fff;}</style></defs><title>logo</title><path class="cls-1" d="M184.06,130.65a25.22,25.22,0,0,0-9-6.16,30.83,30.83,0,0,0-12.16-2.31,29.73,29.73,0,0,0-12.32,2.47,27.73,27.73,0,0,0-9.35,6.77,30.88,30.88,0,0,0-5.94,10,34.65,34.65,0,0,0-2.09,12,35.39,35.39,0,0,0,2.09,12.21,30,30,0,0,0,5.94,10,27.13,27.13,0,0,0,9.46,6.66,31.41,31.41,0,0,0,12.54,2.42,48.31,48.31,0,0,0,10.12-1,29.35,29.35,0,0,0,8-2.86V159.14H164.15V149.9h28v37.73a56.19,56.19,0,0,1-13.42,5.06,67.35,67.35,0,0,1-15.84,1.76,45.15,45.15,0,0,1-16.77-3A37.91,37.91,0,0,1,124.44,170a45.91,45.91,0,0,1,.06-33.22,37.76,37.76,0,0,1,8.69-12.87,39.58,39.58,0,0,1,13.14-8.3,44.89,44.89,0,0,1,16.5-3,47,47,0,0,1,16.67,2.75,35.19,35.19,0,0,1,12.15,7.37Z" transform="translate(-46.94 -69)"/><path class="cls-1" d="M228.4,192.47H217.5V114.59h25a47.94,47.94,0,0,1,10.67,1.15,26.33,26.33,0,0,1,8.85,3.69,18.14,18.14,0,0,1,6,6.65,21.26,21.26,0,0,1,2.19,10.07q0,8.58-5.27,13.86a24.56,24.56,0,0,1-13.65,6.71l21.78,35.75h-13.2l-19.8-34.65H228.4Zm0-43.78h12.54a36.41,36.41,0,0,0,7.14-.66,17.94,17.94,0,0,0,5.78-2.15,12,12,0,0,0,3.91-15.62,11.11,11.11,0,0,0-3.8-3.79,16.92,16.92,0,0,0-5.55-2,36.33,36.33,0,0,0-6.71-.6H228.4Z" transform="translate(-46.94 -69)"/><path class="cls-1" d="M303.63,192.47h-12.1l33.77-77.88h9.9l33.44,77.88H356.32l-7.92-19.14h-37Zm11.66-28.71h29.15l-14.52-36.52Z" transform="translate(-46.94 -69)"/><path class="cls-1" d="M415.61,192.47h-11V158.81l-29.15-44.22h13.42l21.56,35.2,21.67-35.2h12.65l-29.15,44.22Z" transform="translate(-46.94 -69)"/><path class="cls-1" d="M192.09,287.37a34.84,34.84,0,0,1-12,10.17q-7.36,3.9-17.71,3.91a43.64,43.64,0,0,1-16.44-3A38.23,38.23,0,0,1,133,290a39,39,0,0,1-8.53-13,45.91,45.91,0,0,1,.06-33.22,37.76,37.76,0,0,1,8.69-12.87,39.58,39.58,0,0,1,13.14-8.3,44.89,44.89,0,0,1,16.5-3,43.39,43.39,0,0,1,8,.77,39.32,39.32,0,0,1,7.81,2.31,31.91,31.91,0,0,1,6.82,3.79,24.49,24.49,0,0,1,5.28,5.23l-8.58,6.6a21.46,21.46,0,0,0-8.08-6.55,25.11,25.11,0,0,0-11.28-2.58,29.31,29.31,0,0,0-12.26,2.47,27.83,27.83,0,0,0-9.3,6.77,30.88,30.88,0,0,0-5.94,10,34.61,34.61,0,0,0-2.09,12.05,36.44,36.44,0,0,0,2,12.32,29.63,29.63,0,0,0,5.83,9.95,26.92,26.92,0,0,0,9.24,6.66,29.65,29.65,0,0,0,12.15,2.42,26.88,26.88,0,0,0,12-2.64,23,23,0,0,0,8.91-7.7Z" transform="translate(-46.94 -69)"/><path class="cls-1" d="M288.34,260.42A42.65,42.65,0,0,1,285.21,277a39.14,39.14,0,0,1-8.64,13,38.6,38.6,0,0,1-13.09,8.47,44.1,44.1,0,0,1-16.5,3,43.64,43.64,0,0,1-16.44-3A38.14,38.14,0,0,1,208.92,277a46.33,46.33,0,0,1,0-33.22,37.64,37.64,0,0,1,8.58-12.87,39.24,39.24,0,0,1,13-8.3,44.42,44.42,0,0,1,16.44-3,44.89,44.89,0,0,1,16.5,3,39,39,0,0,1,13.09,8.3,38.07,38.07,0,0,1,8.64,12.87A43,43,0,0,1,288.34,260.42Zm-11.77,0a34.38,34.38,0,0,0-2.09-12.05,30.53,30.53,0,0,0-5.94-10,27.69,27.69,0,0,0-9.29-6.77A29.33,29.33,0,0,0,247,229.18a29,29,0,0,0-12.15,2.47,27.2,27.2,0,0,0-9.24,6.77,31.3,31.3,0,0,0-5.89,10,34.61,34.61,0,0,0-2.09,12.05,35.43,35.43,0,0,0,2.09,12.21,30,30,0,0,0,5.94,9.95,27.7,27.7,0,0,0,9.24,6.66,29.31,29.31,0,0,0,12.1,2.42,30,30,0,0,0,12.21-2.42,27.26,27.26,0,0,0,9.35-6.66,29.71,29.71,0,0,0,5.94-9.95A35.2,35.2,0,0,0,276.57,260.42Z" transform="translate(-46.94 -69)"/><path class="cls-1" d="M305.39,221.59h26.73a52.62,52.62,0,0,1,15,2.2,39.85,39.85,0,0,1,13.53,6.93,35.25,35.25,0,0,1,9.79,12.1q3.75,7.37,3.74,17.71a37.5,37.5,0,0,1-3.74,17.32,36,36,0,0,1-9.79,12.1,41.86,41.86,0,0,1-13.53,7.15,49.24,49.24,0,0,1-15,2.37H305.39Zm10.89,68.31h13.64a41.35,41.35,0,0,0,13-2,30.18,30.18,0,0,0,10.34-5.72,25.66,25.66,0,0,0,6.76-9.24,30.46,30.46,0,0,0,2.42-12.43,31.3,31.3,0,0,0-2.42-12.76,25.14,25.14,0,0,0-6.76-9.19A30,30,0,0,0,343,233a42.54,42.54,0,0,0-13-1.92H316.28Z" transform="translate(-46.94 -69)"/><path class="cls-1" d="M400,289.79h40.7v9.68H389.1V221.59H439v9.57H400v23.32h36.74v9.35H400Z" transform="translate(-46.94 -69)"/><path class="cls-1" d="M110,69c-14,1.5-30-4-44.5,15.5s-9,47.5-6,60.5,3,57-12.56,65.5C66,225,66,253,61.5,275s-1.5,49,6,62,27,17,42.5,14.5,31.5-9,31.5-9l-13.5-11S108,347,91,342s-22-15.5-22.5-28.5S82,227,55.5,210.6c20-30.6,16.28-56.63,13-76.1C65.87,118.91,63,90.5,82,84s25-2,25-2l10.5-13Z" transform="translate(-46.94 -69)"/><path class="cls-1" d="M444,90,432.5,77s6.5-5.5,38-3S509,98,502,143s7,63,20.5,64.5c-12.5,14.5-21,24.5-22,47.5s0,32.5,6.5,54-29.5,57.5-60,30c9-6,12-8.5,12-8.5s5,10,13,10,28-5,27.5-22-6.32-36.13-7-40c-1.83-10.45.5-58.3,18-67.9-9.5-7.1-17-21.6-19-40.1s9-43.5,4-62.5S478,83,465,83.5,444,90,444,90Z" transform="translate(-46.94 -69)"/></svg></figure>

SVG形式のファイルを開いて、コードをそのまま貼り付ければ表示されます。

こちらの方法でもimg要素と同様に、CSSやwidth属性とheight属性でサイズ指定ができます。
ファイル読み込みが無くなるので通信回数は抑えられますが、HTML自体のソースコードが長くなってしまうためメンテナンス性との兼ね合いで使用を検討してください。

svg要素でSVG形式の画像を表示
svg要素でSVG形式の画像を表示

object要素で表示

FlashのSWFファイルのようにobject要素でHTMLに埋め込む方法です。

コード例

<style>
object {
	width: 300px;
}
</style>
<object type="image/svg+xml" data="images/logo.svg"></object>

object要素はdata属性で指定したファイルを読み込んで展開を行います。
そのため、実際に表示すると下記のようなソースになります。

object要素で読み込まれたファイルがコードに展開されている例
object要素で読み込まれたファイルがコードに展開されている例

表示サイズの指定はobject要素にwidth属性とheight属性で指定するか、上記のコード例のようにCSSのwidthプロパティやheightプロパティで指定します。

object要素でSVG画像を表示した例
object要素でSVG画像を表示した例

背景画像として表示

SVG形式のファイルはbackground-imageプロパティやbackgroundプロパティで画像として読み込むこともできます。

コード例

<style>
ul {
	list-style: none;
	color: #fff;
}
ul li {
	padding-left: 20px;
	background: url(images/star.svg) left center no-repeat;
	background-size: 15px auto;
}
</style>
<ul>
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
</ul>
リストのアイコンにSVG画像を設定した例
リストのアイコンにSVG画像を設定した例

画像のサイズはbackground-sizeプロパティで指定します。

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。

前のページへ 一覧に戻る 次のページへ