Cómo crear un logotipo que responda a su propia relación de aspecto

Una de las cosas interesantes svges que es literalmente su propio documento, por lo que @medialas consultas en CSS dentro del SVG se basan en su ventana gráfica en lugar del documento HTML que probablemente lo contiene.

Esta característica única ha permitido que la gente juegue con ella durante años. Tim Kadlec experimentó con formatos SVG y cuáles respetan las consultas de medios de manera más confiable. Sara Soueidan experimentó con eso un poco más. Jake Archibald incorporó un lienzo en el interior y probó la compatibilidad entre navegadores de esa manera. Estelle Weyl utilizó esa capacidad para hacer imágenes responsivas antes de las imágenes responsivas.

Otra cosa que realmente ha disparado los factores desencadenantes de la gente es el uso de consultas en los medios locales para crear logotipos responsivos. El más famoso es el sitio de Joe Harrison, pero Tyler Sticka, Jeremy Frank y Chris Austin también lo intentaron.

Nils Binder tiene la última versión. Nils Take es especialmente inteligente en la forma en que utiliza symbols para hacer referencia a otros symbols para mayor eficiencia y min-aspect-ratioconsultas de medios en lugar de anchos de números mágicos.

Para que conste, todavía necesitamos muchas las consultas de contenedores para elementos HTML. Entiendo que es difícil, pero la dificultad de implementación y la utilidad son cosas diferentes. Prefiero las soluciones modernas interesantes a que me intenten convencer de lo contrario.