SVG描画をHTMLページに持ってくる実装

SVG画像をHTMLページに持ってくる方法は3つしかなく、最初の2つは非常に似ていて、3つ目はよりシンプルです。ここでは、その方法がどのようなものかを説明します。

最初のタイプ

使用方法 <embed> タグを使用します。

これは公式の推奨使用法ですが、この公式はAdobeの公式であり、W3Cの公式ではなく、またこのタグはまだHTMLの標準にありません。

<embed src="example.svg" width="300" height="300" type="image/svg+xml" pluginspage=" http://www.adobe.com/svg/viewer/install/" />

プラグインページには、プラグインのダウンロード先が表示されます。

2枚目

使用方法 <object >タグを使用します。

W3Cの仕様で、HTMLの標準にあります。このタグの中では、jsは使用できません。

<object data="example.svg" width="300" height="300" type="image/svg+xml" codebase="http ://www.adobe.com/svg/viewer/imstall/" />

codebaseはプラグインのダウンロードアドレスでもあります。

また、Adobe SVG Viewerがインストールされている場合は動作しません（どういう理屈なのか、プラグインのダウンロードアドレスは同じなのですが...)。

第3回

使用方法 <iframe> タグ
<iframe> タグはほとんどのブラウザーで動作します。

<iframe src="rect.svg" width="300" height="100">
</iframe>

ここでオススメなのが、無料でダウンロードできるアイコンが満載のアイコンURLです：。

URL: http://www.iconfont.cn/plus/user/detail?uid=17211

以上、本記事の全内容をご紹介しましたが、皆様の学習のお役に立てれば幸いです。また、Script Houseをより一層応援していただければ幸いです。