動的に生成したSVG形式画像データを、IMGタグに埋め込んで表示する方法！

クライアントサイドにあるsvgデータを、ユーザが右クリック保存でダウンロードできるように、imgタグに埋め込む方法を紹介します。データをajax + phpなどで取得したり、javascript(D3.js)などで生成した場合に使います。

svgは、ベクター形式の画像データ形式のひとつです。ベクターデータなので、拡大縮小などによる劣化がなく、最近流行りのレスポンシブデザインに向いています。また、その実体はテキストデータであり、javascriptやphpなどで用意に扱うことが出来ます。ユーザが、gifやpngなどへ変換したい場合も、inkscapeやillustratorを使ってで簡単に変換することができます。

svgデータをWebページに表示する方法には、データをhtmlにインラインで埋め込む方法と、imgタグを使う方法があります。ブラウザにimgタグで読み込ませると、 javascriptでsvgを加工することができなくなるという欠点がある一方で、ユーザは右クリック保存ができるという利点があります。

サーバーサイドにある場合は、単純にそのまま読めば良いですが、クライアントサイドの場合はsrc=”data:~~”を使って埋め込みます。

サーバーサイドにある場合

単純ににsvgイメージファイルがサーバーにある場合は、imgタグを使って次のように読み込めます。

<img src="./sample.svg">

また、phpでsvgを生成している場合でも、サーバーへ直接ブラウザが読みにいっても問題がない場合は、次のように読み込むことができます。

<img src="./sample.php?x=320&y=480">

getで良いなら、phpに値を渡すこともできます。

クライアントサイドにある場合

ajaxを使ってsvgデータを取得した場合や、D3.jsなどでjavascriptでsvgデータを生成した場合、データがクライアントサイドにあります。このようなデータをimgタグで表示するには、次のようにsrc属性に、data URIスキームを指定します。

<img src='data:image/svg+xml,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;320&quot; height=&quot;320&quot; viewBox=&quot;0 0 320 320&quot;&gt;&lt;circle cx=&quot;150&quot; cy=&quot;150&quot; r=&quot;100&quot; fill=&quot;#c39&quot;&gt;&lt;/circle&gt;&lt;/svg&gt;'>

つまり、持っているデータをjavascriptなどで、data:image/svg+xml,の後に足してやって、src属性にしてやればよいです。

データは文字参照(エスケープ)してください。一方、document.getElementsByTagName(“img”)[0].src = src;などとして代入する場合は、自動でエスケープされますので、エスケープしないでください。

IE8,9では制限がありますので注意が必要です。詳しくは参考文献のwikipediaを御覧ください。

例

参考文献

• Data_URI_scheme – wikipedia
• 文字参照 – wikipedia