Sieb - ブラウザでSVGを表示できるブックマークレット

Text2SVG

SIEを使えば、普通の文章をSVG画像に変換して、表示することができます。このような機能をText2SVGと呼ぶことにします。Siebでは、このText2SVG機能を使って、たとえば、2ちゃんねるのような掲示板やブログやWIKIなどに書き込まれたSVGを簡単に表示できるようにしました。特徴は以下のとおりです。

インストール、プラグイン不要
ブックマークから呼び出せる
クロスブラウザ
ブログ、WIKIなどに書き込まれたSVGソースを、画像として表示できる

使い方

準備するもの

ブックマークする

Sieb2（ブックマークレット）

あらかじめ、上記のリンク先をブックマーク(IEでは、「右クリック->お気に入りに追加」。それ以外のブラウザではツールバーにドラッグでOK)してください。

ネットの公開のしかた

掲示板やブログにSVGのソースを必ず「整形テキスト」で書き込んでください。たとえば、以下のSVGのソースを使ってみましょう。<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preseveAspectRatio="none"> <g id="eo"> <circle cx="50" cy="40" r="40"/> <circle cx="40" cy="30" r="20" fill="red"/> </g> </svg>なお、整形テキストはpre要素を利用した文章です。
上記でブックマークしたものを呼び出してください。ブックマークを呼び出したら、すぐに、下記のデモで円が表示されるはずです。

デモ（4wd.svg）

: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preseveAspectRatio="none"> <g id="eo"> <circle cx="50" cy="40" r="40"/>
<circle cx="40" cy="30" r="20" fill="red"/> </g> </svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preseveAspectRatio="none">
  &lt;<g id="eo">
   <circle cx="50" cy="40" r="40"/>
   <circle cx="40" cy="30" r="20" fill="red"/>
  </g>
 </svg>

HTML文書のソースは以下のとおり。

<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>
<h1>SIE - プラグインなしでIEにSVGを表示する方法</h1>
<h2>デモ（ant.svg）</h2>

</body>
</html>

動作環境

WindowsXP SP2 IE7で確認

その他、Windows XPの、Firefox3、Opera9.51、Safari3.1.2

目標

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

課題

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

最後に、さんに謝意を述べたいと思います。