Proof of Concept

SVG icon stack state changing based on size of container element

The icon being shown, from the three sizes available, automatically changes to maintain legibility as the size context in which it is displayed updates.

 

Adjust the slider to see the icon change.

 

HTML
<img src="images/mic-responsive.svg">
SVG (from mic-responsive.svg)
<svg id="mic" class="responsive" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">

    <style>
        svg#mic.responsive { width: 100%; }
    </style>

    <style id="embeded-media-queries">
        @media screen and (max-width: 64px) {
            svg#mic.responsive g#medium,
            svg#mic.responsive g#large {
               display: none;
            }
        }

        @media screen and (min-width: 65px) and (max-width: 128px) {
            svg#mic.responsive g#small,
            svg#mic.responsive g#large {
               display: none;
            }
        }

        @media screen and (min-width: 129px) {
            svg#mic.responsive g#small,
            svg#mic.responsive g#medium {
               display: none;
            }
        }
    </style>

    <g id="small" transform="translate(64,0)" width="384px" height="512px">
        (:SNIP: the small SVG shape paths)
    </g>

    <g id="medium" transform="translate(128,0)" width="256px" height="512px">
        (:SNIP: the medium SVG shape paths)
    </g>

    <g id="large" transform="translate(132,0)" width="248px" height="512px">
        (:SNIP: the large SVG shape paths)
    </g>

</svg>