1 <!xml version="1.0" encoding="utf-8"!>
\r
2 <html xmlns="http://www.w3.org/1999/xhtml">
\r
4 <title>SIE - 標準的な2Dベクタ画像のSVGを表示するJavaScriptライブラリ</title>
\r
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
\r
6 <script defer="defer" type="text/javascript" src="sie-mini.js"></script>
\r
7 <link rel="stylesheet" type="text/css" href="http://sie.sourceforge.jp/instyle.css"></link>
\r
10 <h1>SIE - 標準的な2Dベクタ画像のSVGを表示するJavaScriptライブラリ</h1>
\r
12 <p>SIEとは、標準的な2Dベクタ画像のSVGを表示するためのライブラリです。JavaScript言語で設計されています。プラグインは不要です。例えば、インターネットエクスプローラー(Internet Explorer、以下、IE)やその他のブラウザで、SVGを表示できます。</p>
\r
15 <li>クロスブラウザ(IEとFirefoxとOperaとSafari)</li>
\r
17 <li>SVG画像を表示できる</li>
\r
20 <p>無償のオープンソースとして公開しているので、どうぞご自由にお使いください。</p>
\r
21 <p>ライセンスはオープンソースのMozilla Public Licence(MPL1.1)で提供しています。</p>
\r
32 <p>中身を確認してください。以下のとおりです。SIEの本体は、sie.js です。</p>
\r
34 <p>HTML文書のページと、SVG画像を作って、用意してください。(今回は、Inkscapeで作られたSVG画像の「zeimusu_sakura_.svg」を用います)</p>
\r
37 <li>HTML文書を、「メモ帳」など、テキスト編集ソフトで開いて、「<script defer="defer" type="text/javascript" src="sie.js"></script>」をhead要素の中に追加してください。たとえば、<blockquote><head>
\r
38 <title>IESVG</title>
\r
39 <script defer="defer" type="text/javascript" src="sie.js"></script></head></blockquote>というように。<textarea rows="2" cols="40"><script defer="defer" type="text/javascript" src="sie.js"></script></textarea>
\r
41 <li>さらに、body要素の中に、「<object data="zeimusu_sakura_.svg" type="image/svg+xml" width="1000" height="1000"></object>」とコピーして入れます。以下のサンプルのようになります。</li>
\r
42 <li>編集したHTML文書とSVG画像、それに、sie.jsをネット上にアップロードすればOKです。<strong>必ず、アップロードしてください</strong>。</li>
\r
44 <h2>デモ(zeimusu_sakura_.svg)</h2>
\r
45 <pre><html xmlns="http://www.w3.org/1999/xhtml">
\r
47 <title>SIE</title>
\r
48 <script defer="defer" type="text/javascript" src="sie.js"></script>
\r
49 <link rel="stylesheet" type="text/css" href="instyle.css"></link>
\r
51 <body onLoad="svgtovml()">
\r
52 <h1>SIE - プラグインなしでIEにSVGを表示する方法</h1>
\r
54 <h2>デモ(ant.svg)</h2>
\r
55 <object data="<strong>zeimusu_sakura_.svg</strong>" type="image/svg+xml" width="180" height="200"></object>
\r
59 <textarea rows="10" cols="40"><html xmlns="http://www.w3.org/1999/xhtml">
\r
61 <title>SIE</title>
\r
62 <script defer="defer" type="text/javascript" src="sie.js"></script>
\r
63 <link rel="stylesheet" type="text/css" href="instyle.css"></link>
\r
66 <h1>SIE - プラグインなしでIEにSVGを表示する方法</h1>
\r
68 <h2>サンプル(ant.svg)</h2>
\r
69 <object data="zeimusu_sakura_.svg" type="image/svg+xml" width="180" height="200"></object>
\r
71 </html></textarea>
\r
73 <object data="zeimusu_sakura_.svg" type="image/svg+xml" width="180" height="200"></object>
\r
75 <p>ActiveXが有効なIE6、7、8で確認</p>
\r
76 <p>その他、Firefox12、Opera12、Safari3.1.2 (以上、環境はWindowsXP SP3)</p>
\r
78 <p>必ず、サーバにアップロードしてください。IEのセキュリティ上、ローカルでは動きません。また、IE6-8をお使いの方はActiveXは有効にしておいてください。</p>
\r
79 <p>極力、object要素をお使いください。embed要素は、IE6において、警告の窓がポップアップします。IE7では異常はありません。</p>
\r
82 <p><a href="sie-developers@lists.sourceforge.jp">sie-developers@lists.sourceforge.jp</a>。ログインページは<a href="http://lists.sourceforge.jp/mailman/listinfo/sie-developers">SIEの公式メーリングリスト</a>。</p>
\r
84 <p><a href="http://sourceforge.jp/projects/sie/ticket/">チケット</a>。バグを追跡できるシステム。</p>
\r
85 <p><a href="http://d.hatena.ne.jp/dhrname/">dhrnameの開発日誌</a>。開発ブログです。</p>
\r
86 <p><a href="http://twitter.com/dhrname">http://twitter.com/dhrname</a>。英語で開発のつぶやきを提供しています。</p>
\r
87 <h2>SIEのパッケージ一覧</h2>
\r
89 <li>sie.js (本体)</li>
\r
90 <li>Readme.html (解説のページ)</li>
\r
91 <li><a href="README_EN.txt">README_EN.txt (解説の英語版)</a></li>
\r
92 <li><a href="ChangeLog.txt">ChangeLog.txt (SIEの変更履歴)</a></li>
\r
93 <li>tool (補助ツール)<ul>
\r
94 <li>sie_php (SVGファイルを直接ブラウザに表示できるPHP。revulo氏が作成)</li>
\r
95 <li>svg-in-html (インラインSVGを実現するスクリプト)</li>
\r
96 <li>SieReader (URLで?の後に指定されたファイル名のSVGを読みとることができるHTML文書)</li>
\r
98 <li>sie.js.gz (sie.jsをgzipで圧縮したもの)</li>
\r
99 <li>zeimusu_sakra_.svg (SVG形式のサンプル画像)</li>
\r
100 <li>org (ソースコード)<ul>
\r
101 <li>sie-uncompressed.js (sie.jsのオリジナルソース)</li>
\r
102 <li>build.php (SIEのモジュールを一つのファイルにして、オリジナルソースを作成するプログラム)</li>
\r
103 <li>w3c (SIEのモジュールを収納したディレクトリ)</li>
\r
106 <p>最後に、revulo氏, bellbind氏と、<a href="http://sourceforge.jp/"><img src="http://sourceforge.jp/sflogo.php?group_id=3313" width="96" height="31" border="0" alt="SourceForge.jp"></a>さんに謝意を述べたいと思います。</p>
\r
107 <address>© Copyright 2003 dhrname(Eメールで<a href="mailto:sie-developers@lists.sourceforge.jp">sie-developers@lists.sourceforge.jp</a>))。このページの許諾に関しても、SIEと同様のライセンスが適用されるものとします。</address>
\r
108 <!--/*SIE-SVGtoVML LGPL2.1 & GPL1.1 & Mozilla Public Lisence*/
\r
109 /* ***** BEGIN LICENSE BLOCK *****
\r
110 * Version: MPL 1.1/GPL 2.0/LGPL 2.1
\r
112 * The contents of this file are subject to the Mozilla Public License Version
\r
113 * 1.1 (the "License"); you may not use this file except in compliance with
\r
114 * the License. You may obtain a copy of the License at
\r
115 * http://www.mozilla.org/MPL/
\r
117 * Software distributed under the License is distributed on an "AS IS" basis,
\r
118 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
\r
119 * for the specific language governing rights and limitations under the
\r
122 * Contributor(s):DHRNAME
\r
124 * Alternatively, the contents of this file may be used under the terms of
\r
125 * either of the GNU General Public License Version 2 or later (the "GPL"),
\r
126 * or the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
\r
127 * in which case the provisions of the GPL or the LGPL are applicable instead
\r
128 * of those above. If you wish to allow use of your version of this file only
\r
129 * under the terms of either the GPL or the LGPL, and not to allow others to
\r
130 * use your version of this file under the terms of the MPL, indicate your
\r
131 * decision by deleting the provisions above and replace them with the notice
\r
132 * and other provisions required by the GPL or the LGPL. If you do not delete
\r
133 * the provisions above, a recipient may use your version of this file under
\r
134 * the terms of any one of the MPL, the GPL or the LGPL.
\r
136 * ***** END LICENSE BLOCK ***** */-->
\r