SIE - IEにSVGを表示するツール

SIEとは

SIEとは、JavaScript言語で設計されたベクター画像ブラウザです。例えば、インターネットエクスプローラー(Internet Explorer、以下、IE)やその他のブラウザで、SVGを表示できます。

特徴

  1. クロスブラウザ(IEとFirefoxとOperaとSafari)
  2. プラグインが必要ない
  3. SVG画像を表示できる

ライセンス

フリーソフト(オープンソース)として公開しているので、どうぞご自由にお使いください。

Mozilla Public Licence(MPL1.1)です。

使い方

準備するもの

ダウンロード

公開しているページ(一覧)(41kb)

あらかじめ、sie.jsをお使いのパソコンに、保存してください。

HTML文書のページと、SVG画像を作って、用意してください。(今回は、Inkscapeで作られたSVG画像の「4wd.svg」を用います)

ネットの公開のしかた

  1. HTML文書を、「メモ帳」など、テキスト編集ソフトで開いて、「<script defer="defer" type="text/javascript" src="sie.js"></script>」をhead要素の中に追加してください。たとえば、
    <head> <title>IESVG</title> <script defer="defer" type="text/javascript" src="sie.js"></script></head>
    というように。
  2. さらに、body要素の中に、「<object data="4wd.svg" type="image/svg+xml" width="1000" height="1000"></object>」とコピーして入れます。以下のサンプルのようになります。
  3. 編集したHTML文書とSVG画像、それに、sie.jsをネット上にアップロードすればOKです。

デモ(4wd.svg)

<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SIE</title>
<script defer="defer" type="text/javascript" src="sie.js"></script>
<link rel="stylesheet" type="text/css" href="instyle.css"></link>
</head>
<body onLoad="svgtovml()">
<h1>SIE - プラグインなしでIEにSVGを表示する方法</h1>

<h2>デモ(ant.svg)</h2>
<object data="4wd.svg" type="image/svg+xml" width="180" height="200"></object>
    </body>
</html>

動作環境

WindowsXP SP2 IE6で確認

その他、Windows98 IE5.5でも表示される。Firefox1.5+、Opera8.5+、WindowsXP SP2のSafari+

目標

Inkscapeで作成されたSVGを表示できるようにする。

課題

バージョンや、問題等につきましては、ブログで公開しています。「dhrnameのウェブ日誌」をご覧ください。

© Copyright 2003 dhr(Eメールでdhrname@mail.goo.ne.jp)コードの著作権の許諾に関しては、次の文章に書かれています。(英文LICENCE.txt)。また、このページの許諾に関しては、ヘルプのページをご覧下さい。