iPentec.com / Doc / HTML / SVG

SVG画像表示

SVG形式の画像表示

SVG画像のデータをCSS中に埋め込んで表示する

SVG画像のデータをCSS中に埋め込んで表示するコードを紹介します。

概要

こちらの記事では HTML内にSVG画像のデータを埋め込んでページ内に画像を表示するコードを紹介しました。
ページ内やページ間で画像を複数流用したい場合、CSSに画像データを集約したい場合あがあります。この記事では、CSSファイル内にSVG画像を埋め込んでページにSVG画像を表示するコードを紹介します。

SVG画像の作成

今回、下図のSVG画像を作成します。

background-image を利用する方法

作成したSVGファイルをテキストエディタで開き、svgタグ部分をコピーします。

svgタグ部分のテキストの置換を実行します。以下の2つの置換を実行します。

置換元の文字	置換先文字列
%	%25
#	%23

注意

置換処理は、%から先に置換します。#から置換すると、#が%23に置換されたのち%の置換が実行され、%2523 となってしまいます。

置換した文字列をCSSのbackground-image プロパティに設定します。以下の書式となります。

background-image: url('data:image/svg+xml;utf8,[svgタグの内容]');

実装例

コード

以下のCSS,HTMLファイルを作成します。

showsvg-css-background.css

.ImageElem {
  background-image: url('data:image/svg+xml;utf8,<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M199.6,87.16L77.72,16.8c-3.77-2.17-7.19-2.37-9.68-.94l-10.04,5.8c2.48-1.43,5.91-1.24,9.68.94l121.88,70.37c7.53,4.35,13.7,15.02,13.7,23.72v94.8c0,4.35-1.54,7.41-4.02,8.84l10.04-5.8c2.48-1.43,4.02-4.5,4.02-8.84v-94.8c0-8.7-6.17-19.38-13.7-23.72Z" style="fill:%23f8ab43;"/><path d="M203.26,211.49c0,4.35-1.54,7.41-4.02,8.84-2.48,1.43-5.91,1.24-9.68-.94l-121.88-70.37c-7.53-4.35-13.7-15.03-13.7-23.73V30.51c0-4.35,1.54-7.41,4.02-8.85,2.48-1.44,5.91-1.24,9.68.94l121.88,70.37c7.53,4.35,13.7,15.02,13.7,23.72v94.8Z" style="fill:%23f89b1e;"/><path d="M189.56,134.48l-53.5-30.89c-7.53-4.35-13.7-13.11-13.7-19.48s-6.16-15.13-13.7-19.48l-40.98-23.66c-4.53-2.61-8.57-3.06-11.06-1.62l-10.04,5.8c2.5-1.44,6.53-1,11.06,1.62l40.98,23.66c7.54,4.35,13.7,13.11,13.7,19.48s6.17,15.14,13.7,19.48l53.5,30.89c7.53,4.35,13.7,15.03,13.7,23.72v53.28c0,4.35-1.54,7.41-4.02,8.84l10.04-5.8c2.48-1.43,4.02-4.5,4.02-8.84v-53.28c0-8.69-6.17-19.38-13.7-23.72Z" style="fill:%23fdc626;"/><path d="M126.03,109.4c-7.53-4.35-13.7-13.11-13.7-19.48s-6.16-15.13-13.7-19.48l-40.98-23.66c-4.53-2.61-8.57-3.06-11.06-1.62-1.65.96-2.63,2.74-2.63,5.28v80.67c0,8.7,6.17,19.38,13.7,23.73l40.98,23.66c7.54,4.35,19.87,11.47,27.4,15.82l53.5,30.89c3.77,2.17,7.19,2.37,9.68.94,2.48-1.43,4.02-4.5,4.02-8.84v-53.28c0-8.69-6.17-19.38-13.7-23.72l-53.5-30.89Z" style="fill:%23fdc00f;"/></svg>');
  width: 4rem;
  height: 4rem;
}

showsvg-css-background.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet"href="showsvg-css-background.css" />
</head>
<body>
  <h1>CSS Background プロパティへのSVG画像埋め込み</h1>

  <div>画像が表示されます。</div>
  <div class="ImageElem"></div>
</body>
</html>

解説

background-image プロパティにSVGの画像データを設定しています。
ImageElemクラスの要素の背景にSVG画像が表示されます。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。 SVGの画像が表示できます。

content を利用する方法

CSSのcontentプロパティにSVG画像を設定する方法です。
background-imageプロパティと同様に作成したSVGのSVGタグ部分の置換を実行し、contentプロパティに設定します。書式は以下です。

content: url('data:image/svg+xml;utf8,[svgタグの内容]');

実装例

コード

以下のCSS,HTMLファイルを作成します。

showsvg-css-content.css

.ImageSVG {
  display:inline-block;
  content: url('data:image/svg+xml;utf8,<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M199.6,87.16L77.72,16.8c-3.77-2.17-7.19-2.37-9.68-.94l-10.04,5.8c2.48-1.43,5.91-1.24,9.68.94l121.88,70.37c7.53,4.35,13.7,15.02,13.7,23.72v94.8c0,4.35-1.54,7.41-4.02,8.84l10.04-5.8c2.48-1.43,4.02-4.5,4.02-8.84v-94.8c0-8.7-6.17-19.38-13.7-23.72Z" style="fill:%23f8ab43;"/><path d="M203.26,211.49c0,4.35-1.54,7.41-4.02,8.84-2.48,1.43-5.91,1.24-9.68-.94l-121.88-70.37c-7.53-4.35-13.7-15.03-13.7-23.73V30.51c0-4.35,1.54-7.41,4.02-8.85,2.48-1.44,5.91-1.24,9.68.94l121.88,70.37c7.53,4.35,13.7,15.02,13.7,23.72v94.8Z" style="fill:%23f89b1e;"/><path d="M189.56,134.48l-53.5-30.89c-7.53-4.35-13.7-13.11-13.7-19.48s-6.16-15.13-13.7-19.48l-40.98-23.66c-4.53-2.61-8.57-3.06-11.06-1.62l-10.04,5.8c2.5-1.44,6.53-1,11.06,1.62l40.98,23.66c7.54,4.35,13.7,13.11,13.7,19.48s6.17,15.14,13.7,19.48l53.5,30.89c7.53,4.35,13.7,15.03,13.7,23.72v53.28c0,4.35-1.54,7.41-4.02,8.84l10.04-5.8c2.48-1.43,4.02-4.5,4.02-8.84v-53.28c0-8.69-6.17-19.38-13.7-23.72Z" style="fill:%23fdc626;"/><path d="M126.03,109.4c-7.53-4.35-13.7-13.11-13.7-19.48s-6.16-15.13-13.7-19.48l-40.98-23.66c-4.53-2.61-8.57-3.06-11.06-1.62-1.65.96-2.63,2.74-2.63,5.28v80.67c0,8.7,6.17,19.38,13.7,23.73l40.98,23.66c7.54,4.35,19.87,11.47,27.4,15.82l53.5,30.89c3.77,2.17,7.19,2.37,9.68.94,2.48-1.43,4.02-4.5,4.02-8.84v-53.28c0-8.69-6.17-19.38-13.7-23.72l-53.5-30.89Z" style="fill:%23fdc00f;"/></svg>');
  width: 4rem;
  height: 4rem;
}

showsvg-css-content.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet"href="showsvg-css-content.css" />
</head>
<body>
  <h1>CSS Content プロパティへのSVG画像埋め込み</h1>

  <div>
    <div class="ImageSVG"></div><span>項目1です。</span>
  </div>
  <div>
    <div class="ImageSVG"></div><span>項目2です。</span>
  </div>
  <div>
    <div class="ImageSVG"></div><span>項目3です。</span>
  </div>

</body>
</html>