SIEを使ってみた&&graphviz生成のSVGおよびツールチップ表示に対応させてみる

IEでSVGを表示させるSIEを使ってみました。感想は

  • 小さい画像向けか。大きいと固まったように重たい
  • objectのサイズやSVGのサイズviewboxのサイズを合わせる必要がある?
    • (拡大縮小がへん？各shapeがfirefox等でのにくらべ1.3倍くらいあるのに、同じビューポートサイズしか表示してないため、途中で途切れかつ、空白部分がはみだしている)
    • graphviz生成のsvgはwidthとheightがptで指定されている。これをpxに変えればとりあえず同じ大きさになった(1pt=1.25pxになってるぽいけどこのきめうちはまずいような。IEでも普通windowsは72DPIで、1pt=1pxなはず)。
    • もうひとつのバグの状態としては、width,heightのpt指定でviewbox領域全体が拡大されるべきなのに、shapeだけが拡大されている、というもの。(最外のgroup要素のスタイルにそのまま入れてるだけのようなので、pt計算をIE側と一致させれば直るかも)
    • OperaやChromeでは1pt=1.25pxだった。どうもSVGでのDPIは96らしい。
  • IE8ではエラー。ただし互換モードではOK。64bit版IEでも同じ動き
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

graphvizのsvg生成ではURLでリンクが埋め込めるのでリンク対応はうれしい。
不満はgraphvizではさらにtooltipでツールチップ(a xlink:title="...")も使えるのですが、そちらには対応してないのが残念でした。

そこでクイックハックでSIEにツールチップ表示させるようにしてみました。該当部分だけ(2箇所追加)

//XLink言語を処理
NAIBU.XLink = function( /*element*/ ele) {
  this.tar = ele;
  this.title = ele.getAttribute("xlink:title"); // 追加行: 約1719行目
  var href = ele.getAttribute("xlink:href");
  ...

NAIBU.XLink.prototype.set = function() {
  if (this.title) { // 追加開始: 約1764行目
    var node = this.tar.firstChild;
    while (node) {
      if (node.nodeType == 1) node.title = this.title;
      node = node.nextSibiling;
    }
  } // 追加終了
  try {
  ...

(子のshape elementのtitle属性をつける)

graphvizの生成オプションでDPIを54(72 * 3/4)にし、objectのwidthとheightをviewBoxのサイズにすると、とりあえずOperaやChromeでもそこそこサイズがそろう(余白が大きいので、できれば生成svgのwithやheightのptをpxに入れ替えたほうがいい)

neato mygraph.svg -Tsvg -Gdpi=54 -o mygraph.svg

grazphviz生成のsvgが表示でき、いい感じにツールチップも出てくれます(互換モードのVista IE8(32bit 64bit)のみで検証)。

例

SIE(IE8)
firefox3.1b3
chrome
Opera9.6
Safari3.2
mygraph.dot
strict graph {
  "SVG" [URL="http://www.w3.org/Graphics/SVG/",
         tooltip="Scalable Vector Graphics",
         color=blue];
  "SIE" [URL="http://sie.sourceforge.jp/",
         tooltip="SIE - SVG形式の画像を表示するオープンソースのJavaScriptライブラリ",
         color=red,
         shape=box];
  "IE8" [URL="http://www.microsoft.com/japan/windows/products/winfamily/ie/function/default.mspx",
         tooltip="Windows Internet Explorer 8",
         color=green];
  "VML" [URL="http://www.w3.org/TR/1998/NOTE-VML-19980513",
         tooltip="Vector Markup Language",
         color=blue];
  "firefox" [URL="http://www.mozilla.com/en-US/firefox/personal.html",
         tooltip="Mozilla Firefox",
         color=green];
  "chrome" [URL="http://www.google.com/chrome/",
         tooltip="Google Chrome",
         color=green];
  "Opera" [URL="http://jp.opera.com/",
         tooltip="Operaブラウザ",
         color=green];
  "SVG" -- "SIE";
  "VML" -- "SIE";
  "IE8" -- "VML";
  "firefox" -- "SVG";
  "chrome" -- "SVG";
  "Opera" -- "SVG";
}

neato mygraph.dot -Gdpi=54 -Tsvg -o mygraph.svg
mygraph.html
<?xml version="1.0"?><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script defer="defer" src="sie.js"></script>
</head>
<body><object
  data="mygraph.svg" type="image/svg+xml"
  width="372" height="199"
></object></body>
</html>