Question

I have an SVG image which fits its parent <object> dimensions. The image is zoomed by changing its currentScale and currentTranslate properties. How can I scale the image to be shown at its intended size and center it in the viewport?

Example code:

<object width="500" height="300" data="pic.svg">
    <!-- The image will scale to be 300px heigh, 
         I need it to be shown at 32x32 and centered in the viewport,
         but could be zoomed to any size.
         Setting width and height attributes will crop the viewable area to 32x32,
         so we can't use this solution.
     -->
    <svg viewBox="0 0 32 32" ... >
</object>

Answer 1

Ok, I found the solution. To do this I got the intended size from width/height/viewbox (depending on which is available), made the viewBox equal the size of the available viewport (i.e. the containing <object> tag) and changed the x/y values of the viewBox attribute so that the image appears to be in the center of the viewport, and removed width and height attributes if they were present.

I use this in my Opera SVG Viewer widget, you can see my SVG zooming library here.