如何强制SVG缩小到父容器

Question

通过在我的SVG上设置viewbox属性并删除width，我可以强制SVG适合其容器的大小：

<div id="chart">
    <svg viewbox="0 0 100 100">
        <circle cx="50" cy="50" r="50" />
    </svg>
</div>

这在页面首次加载时效果很好，这也意味着我可以在容器元素上使用CSS轻松调整SVG的大小：

#chart {
    width: 50%;
    overflow: hidden;
}

当我增加浏览器的大小时，SVG会扩展。不幸的是，当我减小浏览器的大小时，情况并非如此。如何确保SVG 缩小以适应？

JSFiddle