htmlでsvg画像を表示する

こんばんは。きわさです。

今回はhtmlでsvg画像を表示する方法です。

SVG

svgは、Scalable Vector Graphics (スケーラブル ベクター グラフィックス)というそうです。
ベクタ形式の画像で、テキストで編集でき、また、拡大してもぼやけたりせずに表示できます。
詳しいことは別途調べてみてください。

pngとsvgのイメージのサンプルを置いてみます。
+ボタンで拡大するとpngとsvgの違いが分かるかと思います。

ちなみに、このsvg画像はテキストエディタ等で見てみると以下のようになっています。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="star" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="105" height="105" viewBox="0 0 105 105">
    <polygon points="52 1 20 104 103 41 1 41 84 104" style="stroke:#ffff00;stroke-width:1;fill:#ffff00;"></polygon>
</svg>

svgの表示方法

さて、それでは本題のsvg表示方法について書いていきます。
いくつか方法があります。

svgタグを直接記述

html中にsvgタグとして直接記述する方法です。

<svg version="1.1" id="star" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="105" height="105" viewBox="0 0 105 105">
    <polygon points="52 1 20 104 103 41 1 41 84 104" style="stroke:#ffff00;stroke-width:1;fill:#ffff00;"></polygon>
</svg>

imgタグで表示

これは通常の画像と同じようにimgタグで表示する方法です。

<img src="star.svg" width="105" height="105" />

srcにsvgのurlを指定します。

styleでbackground画像として表示

styleのbackground-imageを使う方法です。

<div style="background-image: url('star.svg');width:105px;height:105px">
</div>

objectタグで表示

次はobjectタグで表示する方法です。

<object id="obj" type="image/svg+xml" data="star.svg" width="105" height="105"></object>

この方法は、これまでの方法と違って、svgの内容をjavascriptから参照できます。
今回のsvgはid=starとなっているので以下のように要素を取得することができます。

var obj = document.getElementById("obj");
var svg = obj.contentDocument.getElementById("star");

要素を取得してしまえば、色を変えたり形を変えたりもできます。