Media queries inside svg not working as expected

user_1824274 0
Viewed 324

Consider the following yellow_submarine.svg icon:

<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>

It embeds a 32-by-32 png icon of a submarine with three portholes.
It also embeds a 16-by-16 version of the submarine with two portholes when space is at a premium.

I use the following html code to display the icon:

<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>

When displayed at 100% zoom level in both Firefox and Edge, I get the following rendering:

Image at 100% zoom

When displayed at 200% zoom level, I get the following rendering:

enter image description here

And this is where I get confused. When zoomed at 200% the svg now has 32 device pixels available and should use the 32-by-32 version. But instead it is rescaling the 16-by-16 version.

What should I put in the media query to test the number of device pixels available?

media-queries svg css html
2 Answers

When we zoom in a browser it does not change the number of pixels available. It will just make a pixel two times bigger. That's the reason why when you zoom by 200% it will still use the 16×16 version of the SVG but two times bigger.

If you want to do this you should use any other approach.

user_158766340

I manage to do it with CSS only (please view the result full page for best results):

#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>

I've made an alternate solution here.

user_151062930
Related