How to align an object in SVG document?

I had the same question and initially liked kulpae's answer. The problem for me, though, was that I'm trying to make a scroller-type interface in SVG with a left-aligned button for scrolling left and a right-aligned button for scrolling right, and the inner (viewBoxed) svg in kulpae's example would take the entire width of the scroller, therefore obscuring the content of the scroller from receiving click events.

My solution used a 100% x-positioned nested svg element with a negative x-positioned element for the button:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="mainSvg" xmlns="http://www.w3.org/2000/svg" version="1.1"
    width="100%" height="100%"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <svg id="rightAlign" x="100%" y="0" width="0" height="200" style="overflow: visible;">
        <rect id="rightBtn" width="50" height="200" x="-50" y="0" fill="#ff0000"></rect>
    </svg>
    <svg id="leftAlign" x="0" y="0" width="0" height="200" style="overflow: visible;">
        <rect id="leftBtn" width="50" height="200" x="0" y="0" fill="#ff0000"></rect>
    </svg>
</svg>

Necromancing.
The various aligns for preserveAspectRatio:

top-left

preserveAspectRatio="xMinYMin meet"

top-right:

preserveAspectRatio="xMaxYMin meet"

bottom-left

preserveAspectRatio="xMinYMax meet"

bottom-right

preserveAspectRatio="xMaxYMax meet"

centered

preserveAspectRatio="xMidYMid meet"

Example:

<svg xmlns="http://www.w3.org/2000/svg" 
     viewBox="0 0 2560 1600" preserveAspectRatio="xMaxYMin meet">

I was looking for a way to float a < g> element to the right of a svg file with width=100%. So one could scale the image and my < g> element would stick to the right without beeing scaled.

Here is what I found out:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
    version="1.1" 
    baseProfile="full" 
    width="100%" 
    height="100%"> 

    <svg viewBox="0 0 300 300" width="100%" height="300px" 
        preserveAspectRatio="xMaxYMin meet"> 
        <g transform="skewX(45)" style="fill:red;">
            <rect x="0" y="0" height="100%" width="20px" /> 
            <rect x="270" y="0" height="100%" width="20px" /> 
        </g> 
    </svg> 
</svg> 

The trick is to use a < svg> tag, where you place your element, that you want to stick to the right border. Then you tell the < svg>-tag not to scale the inner elements and to move them so, that the x values are at their maximum and y at minimum (xMaxYMin)

preserveAspectRatio="xMaxYMin meet"

In the same way you can center it...

source: http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute