Eine der coolen Sachen an <svg> ist, dass es buchstäblich ein eigenes Dokument ist, daher basieren @media-Abfragen in CSS innerhalb des SVG auf seinem Viewport und nicht auf dem HTML-Dokument, das es wahrscheinlich enthält.
Diese einzigartige Funktion hat es den Leuten jahrelang ermöglicht, herumzuspielen. Tim Kadlec experimentierte mit SVG-Formaten und welche davon Medienabfragen am zuverlässigsten respektieren. Sara Soueidan experimentierte damit noch viel mehr. Jake Archibald bettete eine Canvas ein und testete auf diese Weise die Cross-Browser-Kompatibilität. Estelle Weyl nutzte diese Fähigkeit, um responsive Bilder vor responsive Bilder zu machen.
Eine weitere Sache, die die Leute sehr aufgeregt hat, ist die Verwendung dieser lokalen Medienabfragen, um responsive Logos zu erstellen. Am bekanntesten ist die Seite von Joe Harrison, aber auch Tyler Sticka, Jeremy Frank und Chris Austin haben sich daran versucht.
Nils Binder hat den neuesten Ansatz. Nils Ansatz ist besonders raffiniert darin, wie er <symbol>s verwendet, die andere <symbol>s referenzieren, um zusätzliche Effizienz zu erzielen, und min-aspect-ratio Medienabfragen anstelle von magischen Zahlen für Breiten verwendet.
Zur Klarstellung: Wir brauchen immer noch dringend Container-Abfragen für HTML-Elemente. Ich verstehe, dass es schwierig ist, aber die Schwierigkeit der Implementierung und der Nutzen sind unterschiedliche Dinge. Ich bevorzuge interessante moderne Lösungen, anstatt zu versuchen, davon abzubringen.