document/sieb.html

   1 <!xml version="1.0" encoding="utf-8"!>\r
   2 <html xmlns="http://www.w3.org/1999/xhtml">\r
   3 <head>\r
   4 <title>Sieb:SIEのブックマークレット</title>\r
   5 <meta http-equiv="Content-Type" content="text/html; charset=urf-8">\r
   6 <link rel="stylesheet" type="text/css" href="instyle.css"></link>\r
   7 </head>\r
   8 <body>\r
   9 <h1>Sieb - ブラウザでSVGを表示できるブックマークレット</h1>\r
  10 <h2>Text2SVG</h2>\r
  11 <p>SIEを使えば、普通の文章をSVG画像に変換して、表示することができます。このような機能をText2SVGと呼ぶことにします。Siebでは、このText2SVG機能を使って、たとえば、2ちゃんねるのような掲示板やブログやWIKIなどに書き込まれたSVGを簡単に表示できるようにしました。特徴は以下のとおりです。</p>\r
  12 <ul>\r
  13  <li>インストール、プラグイン不要</li>\r
  14  <li>ブックマークから呼び出せる</li>\r
  15  <li>クロスブラウザ</li>\r
  16  <li>ブログ、WIKIなどに書き込まれたSVGソースを、画像として表示できる</li>\r
  17 </ul>\r
  18 <h2>使い方</h2>\r
  19 <h3>準備するもの</h3>\r
  20 <h4>ブックマークする</h4>\r
  21 <p><a href="javascript:void(function(){var ss=function(tag){var pr=document.getElementsByTagName(tag);for(var i=0;i<pr.length;i++){var prr=pr[i].innerHTML;prr=prr.replace(/(&amp;lt;svg(?:\s|&amp;gt;|>))/g,'&amp;nbsp;<script type=image/svg+xml width=300 height=300>$1').replace(/(\/svg(?:&amp;gt;|>))/g,'$1</script>');pr[i].innerHTML=prr;}};ss('pre');ss('dd');sieb_s=true;var src=document.createElement('script');src.setAttribute('src','http://sie.sourceforge.jp/sie-mini.js');document.body.appendChild(src);})();">Sieb2</a>（ブックマークレット）</p>\r
  22 <p>あらかじめ、上記のリンク先をブックマーク(IEでは、「右クリック-&gt;お気に入りに追加」。それ以外のブラウザではツールバーにドラッグでOK)してください。</p>\r
  23 <h3>ネットの公開のしかた</h3>\r
  24 <ol>\r
  25  <li>掲示板やブログにSVGのソースを必ず「整形テキスト」で書き込んでください。たとえば、以下のSVGのソースを使ってみましょう。<textarea rows="3" cols="70">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preseveAspectRatio="none"&gt;\r
  26   &lt;g id="eo"&gt;\r
  27    &lt;circle cx="50" cy="40" r="40"/&gt;\r
  28    &lt;circle cx="40" cy="30" r="20" fill="red"/&gt;\r
  29   &lt;/g&gt;\r
  30  &lt;/svg&gt;</textarea>なお、整形テキストはpre要素を利用した文章です。</li>\r
  31  <li>上記でブックマークしたものを呼び出してください。ブックマークを呼び出したら、すぐに、下記のデモで円が表示されるはずです。</li>\r
  32 </ol>\r
  33 <h2>デモ（4wd.svg）</h2>\r
  34 <dl>\r
  35 <dt>\r
  36 <dd>&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preseveAspectRatio="none"&gt;\r
  37   &lt;g id="eo"&gt;\r
  38    &lt;circle cx="50" cy="40" r="40"/&gt;<BR>\r
  39    &lt;circle cx="40" cy="30" r="20" fill="red"/&gt;\r
  40   &lt;/g&gt;\r
  41  &lt;/svg&gt;\r
  42 </dl>\r
  43 <pre>\r
  44 &lt;svg xmlns="<a href="http://www.w3.org/2000/svg" target="_blank">http://www.w3.org/2000/svg</a>" viewBox="0 0 100 100" preseveAspectRatio="none"&gt;\r
  45   &amp;lt;&lt;g id="eo"&gt;\r
  46    &lt;circle cx="50" cy="40" r="40"/&gt;\r
  47    &lt;circle cx="40" cy="30" r="20" fill="red"/&gt;\r
  48   &lt;/g&gt;\r
  49  &lt;/svg&gt;\r
  50 </pre>\r
  51 <p>HTML文書のソースは以下のとおり。</p>\r
  52 <pre>&lt;html  xmlns="http://www.w3.org/1999/xhtml"&gt;\r
  53 &lt;head&gt;\r
  54 &lt;title&gt;SIE&lt;/title&gt;\r
  55 &lt;script defer="defer" type="text/javascript" src="sie.js"&gt;&lt;/script&gt;\r
  56 &lt;link rel="stylesheet" type="text/css" href="instyle.css"&gt;&lt;/link&gt;\r
  57 &lt;/head&gt;\r
  58 &lt;body&gt;\r
  59 &lt;h1&gt;SIE - プラグインなしでIEにSVGを表示する方法&lt;/h1&gt;\r
  60 &lt;h2&gt;デモ（ant.svg）&lt;/h2&gt;\r
  61 </pre>\r
  62 <p>&lt;pre&gt;&amp;lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preseveAspectRatio="none"&amp;gt;\r
  63   &amp;lt;g id="eo"&amp;gt;\r
  64    &amp;lt;circle cx="50" cy="40" r="40"/&amp;gt;\r
  65    &amp;lt;circle cx="40" cy="30" r="20" fill="red"/&amp;gt;\r
  66   &amp;lt;/g&amp;gt;\r
  67  &amp;lt;/svg&amp;gt;&lt;/pre&gt;</p>\r
  68 <pre>\r
  69 &lt;/body&gt;\r
  70 &lt;/html&gt;</pre>\r
  71 <script type="image/svg+xml" width="200" height="200"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preseveAspectRatio="none">\r
  72   <g id="eo">\r
  73    <circle cx="50" cy="40" r="40"/>\r
  74    <circle cx="40" cy="30" r="20" fill="red"/>\r
  75   </g>\r
  76  </svg></script>\r
  77 <h2>動作環境</h2>\r
  78 <p>WindowsXP SP2 IE7で確認</p>\r
  79 <p>その他、Windows XPの、Firefox3、Opera9.51、Safari3.1.2</p>\r
  80 <h2>目標</h2>\r
  81 <p>Inkscapeで作成されたSVGを表示できるようにする。</p>\r
  82 <h2>課題</h2>\r
  83 <p>バージョンや、問題等につきましては、ブログで公開しています。「<a href="http://d.hatena.ne.jp/dhrname/">dhrnameのウェブ日誌</a>」をご覧ください。</p>\r
  84 <p>最後に、<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
  85 <address>&copy; Copyright 2003 dhr（Eメールで<a href="mailto:dhrname@mail.goo.ne.jp">dhrname@mail.goo.ne.jp</a>）コードの著作権の許諾に関しては、次の文章に書かれています。(英文<a href="http://dhr.at.infoseek.co.jp/LICENCE.txt">LICENCE.txt</a>）。このページの許諾に関しても、同様のライセンスが適用されるものとします。</address>\r
  86 <!--/*SIE-SVGtoVML LGPL2.1 & GPL1.1 & Mozilla Public Lisence*/\r
  87 /* ***** BEGIN LICENSE BLOCK *****\r
  88  * Version: MPL 1.1/GPL 2.0/LGPL 2.1\r
  89  *\r
  90  * The contents of this file are subject to the Mozilla Public License Version\r
  91  * 1.1 (the "License"); you may not use this file except in compliance with\r
  92  * the License. You may obtain a copy of the License at\r
  93  * http://www.mozilla.org/MPL/\r
  94  *\r
  95  * Software distributed under the License is distributed on an "AS IS" basis,\r
  96  * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License\r
  97  * for the specific language governing rights and limitations under the\r
  98  * License.\r
  99  *\r
 100  * Contributor(s):DHRNAME\r
 101  *\r
 102  * Alternatively, the contents of this file may be used under the terms of\r
 103  * either of the GNU General Public License Version 2 or later (the "GPL"),\r
 104  * or the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),\r
 105  * in which case the provisions of the GPL or the LGPL are applicable instead\r
 106  * of those above. If you wish to allow use of your version of this file only\r
 107  * under the terms of either the GPL or the LGPL, and not to allow others to\r
 108  * use your version of this file under the terms of the MPL, indicate your\r
 109  * decision by deleting the provisions above and replace them with the notice\r
 110  * and other provisions required by the GPL or the LGPL. If you do not delete\r
 111  * the provisions above, a recipient may use your version of this file under\r
 112  * the terms of any one of the MPL, the GPL or the LGPL.\r
 113  *\r
 114  * ***** END LICENSE BLOCK ***** */-->\r
 115     </body>\r
 116 </html>