自适应svg背景

Question

我试图让svg根据屏幕尺寸显示不同的图像，因此较小的设备显示较小的图像。例如，如果我想要一个覆盖整个svg区域的背景图像，可以这样：

<svg viewBox="0 0 1000 700">
    <defs>
        <style type="text/css">
            #theImage { 
                fill: url('#bg-large');
            }
            @media screen and (min-width: 401px) and (max-width: 800px) {
                #theImage {
                    fill: url('#bg-small');
                }
            }
        </style>

        <pattern id="bg-large" width="100%" height="100%">
            <image xlink:href="large.jpg" width="100%" height="100%" />
        </pattern>

        <pattern id="bg-small" width="100%" height="100%">
            <image xlink:href="small.jpg" width="100%" height="100%" />
        </pattern>
    </defs>

    <rect id="theImage" width="100%" height="100%" />
</svg>

它可以工作，但浏览器会以任何屏幕大小下载两个图像。是否有另一个（mabye svg属性方式而不是css）使浏览器只加载活动屏幕大小所需的图像？