I had been using nested `<svg/>` and `<g/>` elements to center an SVG graphic within my browser frame. The outer svg element had width and height of 100%, the inner had x and y set to 50%. An inner g element had negative offset of half image size. This was working fine but I now want to add pan and zoom functionality.

The nested SVG approach seems to be incompatible with [SVGPan](http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/) which gets confused. 

SVGPan will only work if I start with the graphic at top-left. I think I'll have to write a script that runs when SCG is loading/loaded to add a transform to center the top-level g in a way that is compatible with SVGPan.

How can I initialize my `<g />` with a matrix transformation that translates it thusly?

```
((viewport.width - g.width)/2, (viewport.width - g.width)/2)

```

The size of the viewport is not known when the SVG is created but I can drop some script in there to create the transform or translation. Where should the script live and what should it do? It needs to be compatible with SVGPan.