One of the cool things about
is that it’s literally its own document, so
@media queries in CSS inside the SVG are based on its viewport rather than the HTML document that likely contains it.
This unique feature has let people play around for years. Tim Kadlec experimented with SVG formats and which ones respect the media queries most reliably. Sara Soueidan experimented with that a bunch more. Jake Archibald embedded a canvas inside and tested cross-browser compatibility that way. Estelle Weyl used that ability to do responsive images before responsive images .
Another thing that has really tripped people’s triggers is using that local media query stuff to make responsive logos. Most famously Joe Harrison’s site , but Tyler Sticka , Jeremy Frank , and Chris Austin all had a go as well.
For the record, we still very much need container queries for HTML elements. I get that it’s hard, but the difficulty of implementation and usefulness are different things. I much prefer interesting modern solutions over trying to be talked out of it .
The post How to create a logo that responds to its own aspect ratio appeared first on CSS-Tricks .