Question

考虑以下 yellow_submarine.svg 图标：

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <style type="text/css">
            @media(max-height:16px){
                #icon16{display:inline;}
                #icon32{display:none;}
            }
        </style>
    </defs>
    <image id="icon16" display="none"   width="100%" height="100%" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABj0lEQVR42s2OA6xcQRSGz3pu7di1hXhjSzWixtazbYS1bZtRLc082/YKf+fena3Nd5LvWDR8RSQylEjoN2QJj9d+bQGP0w41HbCgdR+hItUMkeg48uOvJ7D9nZfN6L9LaD9I6Lm+GSLBhm8PxVsP8xgCjw7xJpLwOkISGfKfR1KL7FnzycyhkkQHpGNLqduzAvBdAdynJMeVPa/sCQRat6DxsFNf3ikHV8pje3qfRUPEWUA81gx33Va4H03F6Zcd2P8MhvXdG/8uPvtmCOg8AHfDHjQccKJhvxP+zi3QZ4nHWTHwbAP6jhOS7gKZd4YM6/kk7jtF6H+wEr7mE/C1nEL3xdEQcXaQSHCg49BkdO4gRJx8jg3n/Ibt2/5xrNebthKq8hiqi6egWdZFAgM9jWa8Mt2KxlxCaw6hPTtkmyThuEXaqnQLXsdpvdvW26O3rbdFv05gvSVJDDTCTnOexjAuEhlEovZFXsez7l2b7HFEtEAyXrFQsoSUzDIChWyO1beHUYMT6Cdkglqm+IvyFjQwP4YCb6vbAAAAAElFTkSuQmCC"/>
    <image id="icon32" display="inline" width="100%" height="100%" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAECklEQVR4AWIgEYyCUQDgrR6gHEuiMADfOGN7bdu2bds22j22bdtsjW0nmbat2Pn3Vl68Guec76Rc/7PakKJFkKif7QBtYgK0OesB2E3siUCAjmf9EgRCXH62AygOxasX6OIJurgI8RJ9AuFwgnohESnPyOY7f9P0LxpL8JlXwVO/Au7qlXCVr4SzZCUcBSvgyF/FIWQgohane3PZrA9V1+viVbAeuhuOvB9Qv4JQs4BQNZVQPppQ3I9g3JIaDND+tF/zQ38qC0qmtICz4CWYt7ZGw2pC7WJC9UxCxXhCyWCuL3oRugT58d4TioPxmnH/+Bgv+kzd5WCcYr64voYkLXKHXY2cwdfAeqA5rHs1MK4l6QzMD5yBUdIZKB3cnsdew49mM8+BP+TzNv2kukKcvX/YXJ7xrfLlgtGXQ5+kinqMZSu/Ul2t+5NQnfYWvMaFgH0NfIItDV5LOrzmDP5n1gz4BFuAXUhnPK5xARp3/Ii8oefjaBzV7/ld+XPW9+pOwU1GvKbsYkht5nOWT4QuPuKMTX1P1U0ctaNwDDz1U2DX3QXboctg2UHHzczs+nvgqujDIdPgrJiKisXPwpDaBAf/lKVv/lH53sE/KLdhxy9wl3/CAZShAKpdvymXVK95l6/zDzBtJJg2SCzMtl6QyuaNx9G2jtu2NINN/yo/LVPgNaWhcU8iiifdguJpN8NdNRbmzQRdQvg90kKcDmfJeDSmyxj5mdMIu7emYvYR+Imy9TjbxNxG1rCG19l2I+yGb+FpSIO7ZgnfRy1gzBIBmoQCtNclKGHZ8yLqlhDqlkpMXB6wAxi+zeknyvbFx9dmCq8jrbmYLZOjflUbrks3sj4xHKCjPlGDuuUdUTOXQoxzCD9lAnEZRj9Rts8+vjaeG1jnn9UuiA3Aj1zVFIpSN5kwe84feH2Jx0+UjcfZJubGrlc9VQiUpxE/hhGXYP0PmsyCgUqUjyWUj5FUsGpWN1qQypXH2VYRWEOsV8GKhiiQ20eN3N5qae1xHCA5HKDFQ5fLH9Qna1EySM4vFTplZaxkoBx5vVT8cmqCrb9qsvu+oOo/4wP1LANvXDRADt4v/Biybq/fonhTpMrrqURxLxlKehOKT1Ahz8vn+YYUDQ4laE2zPlLPuek8+UtEdDu7ht348o2K9/bFaStjP+dadsEdF8qfTf9Ws1HPnXpOfixFHZL9H4JjxLw132g2fH2/8nsiupddy85hbVgz1lLsw24TYaJexYEQ3QId97OHIzwmFhap/wkRPSHGBebdxC5iHQKbKljkPmrWOkBNMT8Va8Has44RzmU3Z/y1PExH7Ctg3w+UUwWpg+rjgxrMSNVGCdRwPeTQgbK1wY6mA2BGDx0om5eSptgoGAUA5/MdcoMAeGkAAAAASUVORK5CYII"/>
</svg>

它嵌入了一个带有三个舷窗的潜艇的 32 x 32 png 图标。
当空间有限时，它还嵌入了一个 16 x 16 版本的潜艇，带有两个舷窗。

我使用以下html代码来显示图标：

<html>
    <body>
        Small:<span style="width:16px;height:16px;display:inline-block;background:url(yellow_submarine.svg)no-repeat;background-size:100%;"></span>
        Large:<span style="width:32px;height:32px;display:inline-block;background:url(yellow_submarine.svg)no-repeat;background-size:100%;"></span>
    </body>
</html>

在 Firefox 和 Edge 中以 100% 缩放级别显示时，我得到以下渲染：

当以 200% 缩放级别显示时，我得到以下渲染：

这就是我感到困惑的地方。当缩放到 200% 时，svg 现在有 32 个设备像素可用，并且应该使用 32×32 版本。但它正在重新调整 16 x 16 版本。

我应该在媒体查询中输入什么来测试可用的设备像素数？

Answer 1

当我们放大浏览器时，它不会改变可用像素的数量。它只会使像素大两倍。这就是为什么当你放大 200% 时，它仍然会使用 16×16 版本的 SVG，但会大两倍。

如果您想这样做，您应该使用任何其他方法。

Answer 2

我设法仅使用 CSS（请查看结果整页以获得最佳结果）：

#icon {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABj0lEQVR42s2OA6xcQRSGz3pu7di1hXhjSzWixtazbYS1bZtRLc082/YKf+fena3Nd5LvWDR8RSQylEjoN2QJj9d+bQGP0w41HbCgdR+hItUMkeg48uOvJ7D9nZfN6L9LaD9I6Lm+GSLBhm8PxVsP8xgCjw7xJpLwOkISGfKfR1KL7FnzycyhkkQHpGNLqduzAvBdAdynJMeVPa/sCQRat6DxsFNf3ikHV8pje3qfRUPEWUA81gx33Va4H03F6Zcd2P8MhvXdG/8uPvtmCOg8AHfDHjQccKJhvxP+zi3QZ4nHWTHwbAP6jhOS7gKZd4YM6/kk7jtF6H+wEr7mE/C1nEL3xdEQcXaQSHCg49BkdO4gRJx8jg3n/Ibt2/5xrNebthKq8hiqi6egWdZFAgM9jWa8Mt2KxlxCaw6hPTtkmyThuEXaqnQLXsdpvdvW26O3rbdFv05gvSVJDDTCTnOexjAuEhlEovZFXsez7l2b7HFEtEAyXrFQsoSUzDIChWyO1beHUYMT6Cdkglqm+IvyFjQwP4YCb6vbAAAAAElFTkSuQmCC);
}

@media screen and (max-width: 1500px) {
  #icon {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAECklEQVR4AWIgEYyCUQDgrR6gHEuiMADfOGN7bdu2bds22j22bdtsjW0nmbat2Pn3Vl68Guec76Rc/7PakKJFkKif7QBtYgK0OesB2E3siUCAjmf9EgRCXH62AygOxasX6OIJurgI8RJ9AuFwgnohESnPyOY7f9P0LxpL8JlXwVO/Au7qlXCVr4SzZCUcBSvgyF/FIWQgohane3PZrA9V1+viVbAeuhuOvB9Qv4JQs4BQNZVQPppQ3I9g3JIaDND+tF/zQ38qC0qmtICz4CWYt7ZGw2pC7WJC9UxCxXhCyWCuL3oRugT58d4TioPxmnH/+Bgv+kzd5WCcYr64voYkLXKHXY2cwdfAeqA5rHs1MK4l6QzMD5yBUdIZKB3cnsdew49mM8+BP+TzNv2kukKcvX/YXJ7xrfLlgtGXQ5+kinqMZSu/Ul2t+5NQnfYWvMaFgH0NfIItDV5LOrzmDP5n1gz4BFuAXUhnPK5xARp3/Ii8oefjaBzV7/ld+XPW9+pOwU1GvKbsYkht5nOWT4QuPuKMTX1P1U0ctaNwDDz1U2DX3QXboctg2UHHzczs+nvgqujDIdPgrJiKisXPwpDaBAf/lKVv/lH53sE/KLdhxy9wl3/CAZShAKpdvymXVK95l6/zDzBtJJg2SCzMtl6QyuaNx9G2jtu2NINN/yo/LVPgNaWhcU8iiifdguJpN8NdNRbmzQRdQvg90kKcDmfJeDSmyxj5mdMIu7emYvYR+Imy9TjbxNxG1rCG19l2I+yGb+FpSIO7ZgnfRy1gzBIBmoQCtNclKGHZ8yLqlhDqlkpMXB6wAxi+zeknyvbFx9dmCq8jrbmYLZOjflUbrks3sj4xHKCjPlGDuuUdUTOXQoxzCD9lAnEZRj9Rts8+vjaeG1jnn9UuiA3Aj1zVFIpSN5kwe84feH2Jx0+UjcfZJubGrlc9VQiUpxE/hhGXYP0PmsyCgUqUjyWUj5FUsGpWN1qQypXH2VYRWEOsV8GKhiiQ20eN3N5qae1xHCA5HKDFQ5fLH9Qna1EySM4vFTplZaxkoBx5vVT8cmqCrb9qsvu+oOo/4wP1LANvXDRADt4v/Biybq/fonhTpMrrqURxLxlKehOKT1Ahz8vn+YYUDQ4laE2zPlLPuek8+UtEdDu7ht348o2K9/bFaStjP+dadsEdF8qfTf9Ws1HPnXpOfixFHZL9H4JjxLw132g2fH2/8nsiupddy85hbVgz1lLsw24TYaJexYEQ3QId97OHIzwmFhap/wkRPSHGBebdxC5iHQKbKljkPmrWOkBNMT8Va8Has44RzmU3Z/y1PExH7Ctg3w+UUwWpg+rjgxrMSNVGCdRwPeTQgbK1wY6mA2BGDx0om5eSptgoGAUA5/MdcoMAeGkAAAAASUVORK5CYII);
  }
}

<p>
    Icon: <image id="icon" style="width:16px;height:16px" />
</p>

我已经做了一个替代解决方案 here。

svg 中的媒体查询未按预期工作

2 个答案: