如何在javascript中正确设置SVG的宽度和高度？

我在javascript中设置了SVG图片的宽度和高度，因此无法正常工作。我的代码是这样的：

var url = "https://dl.dropboxusercontent.com/u/74728667/left_arrow.svg";
var main = document.getElementById("main");
var xhr = new XMLHttpRequest();
        xhr.open('get', url, true);
        xhr.onreadystatechange = function(ev)
        {
            if (xhr.readyState === 4)
            {
                if (xhr.status === 200)
                {
                     var e = xhr.responseXML.documentElement;
                var svg = document.importNode(e, true); 
                svg.setAttribute("width", "28px");
                svg.setAttribute("height", "28px");
            svg.style.border="1px solid black";
            svg.style.position="absolute";
            svg.style.left="50px";
            svg.style.top="50px";
            main.appendChild(svg);
                }
                else
                {
                    alert("request failed");
                }
            }           
        };
        xhr.send(); 

上面的代码产生如下结果：

请注意，SVG不会调整为指定的宽度和高度。我怎样才能解决这个问题？。我尝试使用svg.setAttributeNS(null, "width", "28px");

我检查了上面的代码生成的结果html，如果我将其复制粘贴到单独的小提琴中，则会得到以下信息：

HTML：

<div id="main" style="position:relative"><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 18 18" width="28px" height="28px" style="border: 1px solid black; position: absolute; left: 50px; top: 50px;">
    <path fill="#a00" fill-opacity="1" stroke="none" d="M 0,9 l 17,9 -6,-9 6,-9 Z" onmouseover="evt.target.setAttribute('fill', '#ac0');" onmouseout="evt.target.setAttribute('fill','#a00');"></path>
</svg></div>

输出：

如何使我的js代码产生与上述相同的结果？