Štěpán Roh

Fighting The SVG Beast

Whole yesterday's night I was fighting this beast. It's nice technology, but it's not big win on Linux. Either there is a beta and sometimes crashing plugin for Mozilla from Adobe or standalone Squiggle the SVG browser that comes with Batik which supports only a subset of SVG (e.g. EcmaScript support is not complete).

But tools are not the biggest problem. I wanted very easy (or I thought that) thing: to have selection rectangle. User should be able to use mouse to select a portion of a screen and I want to zoom it or clip it or something. I used onmousemove event, but found out that it returns mouse position in pixels and not in current viewport coordinates. After couple of hours I finally came with the code which is able to translate mouse position to relative coordinates within the current viewport.

// Batik does not yet support viewbox property of SVGSVGElement
var viewbox_width = 1200;
var viewbox_height = 800;
function torel_x(elem, x) {
  var svgelem = elem;
  var dx = 0;
  while (svgelem.ownerSVGElement != null) {
    svgelem = svgelem.ownerSVGElement;
    dx -= svgelem.getAttribute("x");
  }
  return x / svgelem.viewport.width * viewbox_width + dx;
}

function torel_y(elem, y) {
  var svgelem = elem;
  var dy = 0;
  while (svgelem.ownerSVGElement != null) {
    svgelem = svgelem.ownerSVGElement;
    dy -= svgelem.getAttribute("y");
  }
  return y / svgelem.viewport.height * viewbox_height + dy;
}

Simple, you say? Well, it is not complete: it ignores viewboxes for inner SVGSVGElements and scaling for all. But it works and that makes me happy. Yay!