SVG画像表示

SVG形式の画像表示

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

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

概要

HTML内にSVG画像のデータを埋め込んでページ内に画像を表示できます。この記事では、HTMLページ内にSVG画像を埋め込んでページにSVG画像を表示するコードを紹介します。

SVG画像の作成

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

SVG形式で保存した画像のデータは以下になります。

<?xml version="1.0" encoding="UTF-8"?>
<svg id="_レイヤー_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
	<path d="M14.06,19.06v224.12h224.12V19.06H14.06ZM126.12,213.92c-45.73,0-82.8-37.07-82.8-82.8S80.39,48.32,126.12,48.32s82.8,37.07,82.8,82.8-37.07,82.8-82.8,82.8Z"
				style="fill:#488eff; stroke:#003670; stroke-miterlimit:10; stroke-width:4px;"/>
</svg>

実装例

コード

下記のHTMLファイルを作成します。
先のSVGファイルのsvgタグの部分をHTMLファイル内に記述します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <p>SVG画像を埋め込みで表示します。</p>

  <svg id="_レイヤー_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
    <path d="M14.06,19.06v224.12h224.12V19.06H14.06ZM126.12,213.92c-45.73,0-82.8-37.07-82.8-82.8S80.39,48.32,126.12,48.32s82.8,37.07,82.8,82.8-37.07,82.8-82.8,82.8Z"
          style="fill:#488eff; stroke:#003670; stroke-miterlimit:10; stroke-width:4px;" />
  </svg>
</body>
</html>

解説

svgタグで記述した部分が画像としページに表示されます。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。HTML中に埋め込まれたSVG形式のベクタ画像が表示できていることが確認できます。

実装例:画像の幅を指定する

先の例で、デフォルトでは、画像は領域いっぱいに表示される動作であることが確認できました。この例では、画像の大きさを指定します。今回はSVG画像の外側に枠を用意し、その枠の横幅を指定したサイズにします。 SVG画像は領域いっぱいに表示されますが、親の枠の大きさを指定しているため、親の枠よりは大きくならない動作となります。

コード

下記のHTMLファイルを作成します。
先のSVGファイルのsvgタグの部分をHTMLファイル内に記述します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <p>SVG画像を埋め込みで表示します。</p>

  <div style="width:16rem">
    <svg id="_レイヤー_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
      <path d="M14.06,19.06v224.12h224.12V19.06H14.06ZM126.12,213.92c-45.73,0-82.8-37.07-82.8-82.8S80.39,48.32,126.12,48.32s82.8,37.07,82.8,82.8-37.07,82.8-82.8,82.8Z"
            style="fill:#488eff; stroke:#003670; stroke-miterlimit:10; stroke-width:4px;" />
    </svg>
  </div>
</body>
</html>