O segredo é o getBoundingClientRect()
. Ele retorna a informação desejada há algum tempo. Funciona em todos os navegadores que não são muito antigos.
document.body.innerHTML += document.getElementById('rect').getBoundingClientRect().width;
<svg width=100% height=100%>
<rect id=rect rx=0 ry=0 x=0 y=0 width=100% height=50px fill=HoneyDew />
</svg>