Repensar el SVG responsivo

 

 

 

  • Planificación y proceso del sistema de diseño, con Nathan Curtis
  • Implemente rápidamente. Implementar inteligentemente

  • Índice
    1. SVG responsivo: el método del vagabundo
    2. SVG responsivo: el método del pobre
    3. SVG responsivo: el método del hombre con una pistola
      1. Adaptar el icono al tamaño del contenedor principal
      2. Agregar JavaScript a SVG
      3. Soporte del navegador
    4. Conclusión
      1. Otras lecturas

    Los íconos SVG responsivos se pueden usar de muchas maneras. En este artículo, Ilya Pukhalski profundiza en la técnica de iconos responsivos de Joe Harrison y explora lo que se puede hacer con los SVG.

     

    Si aún no has visto la técnica de iconos responsivos de Joe Harrison, probablemente quedarás tan impresionado como yo cuando la descubrí por primera vez. En este artículo, me gustaría explorar lo que podemos hacer con SVG más allá de los gráficos vectoriales escalables "tradicionales" que se utilizan para reemplazar los PNG de mapa de bits.

    De hecho, podemos ver SVG como un módulo independiente que encapsula CSS para la personalización de vistas, así como el comportamiento responsivo que también encapsula JavaScript para la lógica de interacción.

    Ahora, profundicemos un poco más en esta técnica.

    SVG responsivo: el método del vagabundo

    El sitio web Responsive Icons de Harrison se implementa de manera bastante simple. Sigue una técnica muy conocida: sprites de imágenes. Si no estás familiarizado con los sprites, déjame explicarte. Image spriting es una técnica que anteriormente se usaba solo para imágenes rasterizadas para combatir el bajo rendimiento de la red. La idea es combinar muchas imágenes pequeñas en un solo archivo , de modo que el cliente tenga que descargar solo una imagen del servidor.

     

    También usaría CSS para cambiar la imagen y mostrar solo la parte que necesita para un elemento en particular, ahorrándole al usuario la sobrecarga de tener que descargar cada imagen individualmente. (Lea más sobre sprites en CSS-Tricks ).

    La técnica de Harrison hace lo mismo, excepto que con SVG en lugar de PNG. Así es como se verían todos sus íconos combinados en un solo archivo:

    Todos los iconos combinados en un solo archivo SVG. Vista grande .

    Este archivo, entonces, se establecería como fondo de un contenedor en el que se debería mostrar uno de estos iconos:

    .icon { width: 300px; height: 300px; background: url(../images/home_sprite.svg); background-position: center top;}

    El ejemplo anterior es bastante simple pero tiene algunos problemas. La solución no es lo suficientemente portátil. De hecho, se necesitan dos partes para que el método funcione: CSS externo y un objeto SVG.

    SVG responsivo: el método del pobre

    Debido a que CSS se puede definir dentro del propio SVG, revisemos el ejemplo anterior para encapsular el ícono y hacerlo portátil.

    Primero, eliminemos todos los cambios espaciales de los íconos en el objeto. Por supuesto, eso nos deja con un lío de íconos en capas:

    Véase Pen inxym de Ilya Pukhalski .

    Luego, reorganicemos todas las formas y agrupémoslas por ícono, agregando una .iconclase a cada grupo, así como números para poder identificar cada una que queramos (así, #home_icon_0y #home_icon_1hasta #home_icon_8):

    svg g !-- paths and shapes -- /g !-- ... -- g !-- paths and shapes -- /g/svg

    Ahora estamos listos para agregar consultas de medios, de modo que podamos seleccionar el ícono en el archivo SVG que queremos mostrar. Para ello svges posible escribir el CSS directamente en la etiqueta mediante defsetiquetas.

    svg defs style /* Hide all of the icons first. */ .icon { display: none; } /* Display the first one. */ #home_icon_0 { display: block; } /* Display the desired icon and hide the others according to the viewport's size. */ @media screen and (min-width: 25em) { #home_icon_0 { display: none; } #home_icon_1 { display: block; } } @media screen and (min-width: 30em) { #home_icon_1 { display: none; } #home_icon_2 { display: block; } } /* And so on */ /style /defs!-- Icon groups go here --/svg

    Como resultado, el mismo icono ahora se adapta al tamaño de la ventana gráfica, excepto que ahora las reglas CSS, las consultas de medios y las formas SVG están encapsuladas en el propio archivo SVG. Cambie el tamaño de su navegador para ver cómo funciona el siguiente ejemplo:

    Véase el bolígrafo LaMWvX de Ilya Pukhalski .

    SVG responsivo: el método del hombre con una pistola

    El ejemplo anterior parece mejor que el primero, pero quedan preguntas:

    • ¿Podría entregarse el SVG responsivo de una mejor manera?
    • ¿Es posible seguir un enfoque responsivo para diseñar los iconos y personalizar elementos, en lugar de simplemente ocultar y mostrar partes del archivo?

    Si observamos la coreografía del contenido y los trucos de reestructuración del diseño en los que confiamos diariamente para el diseño web responsivo, podemos mejorar nuestro prototipo aún más. Usaremos diseño responsivo, reestructuración de formas y transformaciones para adaptar los íconos a diferentes tamaños de ventana gráfica. Oye Quotes Lifestyle

     

    Primero, volvamos a dibujar el ícono de la casa más grande y detallado en nuestro archivo de sprites SVG, dividiendo todos los caminos y formas unidas en formas elementales. El resultado es mucho más legible y ahora es posible aplicar cualquier transformación a cualquier parte del icono:

    Véase el Pen Azqyn de Ilya Pukhalski .

    Nuestro ícono rediseñado tiene el mismo aspecto que el más grande del objeto, pero contiene muchas más formas y ocupa un poco más de espacio. La magia es que agregaremos consultas de medios y transformaciones a la nueva variante, transformando las formas del ícono para obtener el mismo resultado que el objeto SVG:

    svg defs style @media screen and (max-width: 65em) { #door-shadow, #tube-shadow, .backyard { display: none; } #door-body { fill: white; } #door-handle { fill: #E55C3C; } #door-body, #door-handle { -ms-transform: translate(0,0); -webkit-transform: translate(0,0); transform: translate(0,0); } #window { -ms-transform: translate(0,0) scale(1); -webkit-transform: translate(0,0) scale(1); transform: translate(0,0) scale(1); } #house-body { -ms-transform: scaleX(1) translate(0, 0); -webkit-transform: scaleX(1) translate(0, 0); transform: scaleX(1) translate(0, 0); } #tube-body { -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } #tube-upper { -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } } /* And so on */ /style /defs!-- Icon groups go here --/svg

    Una vez que hayamos agregado un poco de magia de transformación, el ícono se comportará igual que el objeto SVG de Joe Harrison, pero contendrá toda la lógica dentro de sí mismo. Abra el siguiente ejemplo en una nueva ventana y cambie su tamaño para ver todas las variantes de iconos.

    Véase el Pen hFLDG de Ilya Pukhalski .

    Adaptar el icono al tamaño del contenedor principal

    Una cosa más. También es posible hacer que el icono responda a los cambios en su contenedor principal (al menos el ancho y el alto).

    Para hacer esto, primero intenté cargar el archivo SVG en un imgelemento, envuelto en un archivo div. Pero ni siquiera una consulta de medios en el archivo SVG pareció funcionar.

    Mi segundo intento fue cargar el ícono en el objectelemento flexible, envuelto en un archivo div. Hacer eso hizo que todas las consultas de los medios funcionaran. Y ahora también es posible hacer que un objeto llene el espacio de su padre. (No olvide establecer los atributos de ancho y alto del svgelemento al 100% o eliminarlos por completo).

    div object embed src="responsive3.svg" / /object/div

    En cuanto a otras formas de incrustar SVG con transformaciones y consultas de medios, puede usar SVG como imagen de fondo para cualquier elemento de bloque. También se permite SVG en línea, pero las consultas de medios responderían a la ventana gráfica.

     

    El siguiente ejemplo demuestra cómo responde el icono a diferentes tamaños de contenedores. Las consultas de medios en el SVG manejan cómo se dibuja el icono, de acuerdo con las dimensiones en las que se va a representar el SVG. Aquí hay ocho bloques con diferentes tamaños, incrustados con un mismo archivo SVG.

    Véase el Pen hszLl de Ilya Pukhalski .

    Agregar JavaScript a SVG

    ¡Más buenas noticias! El archivo SVG puede encapsular no sólo CSS, sino también JavaScript. En esencia, podemos considerar un archivo SVG incluido como un módulo independiente al que se puede aplicar cualquier lenguaje de marcado antiguo.

    JavaScript en SVG funcionará perfectamente cuando esté incrustado en línea en el objectelemento. Qué mundo tan maravilloso, ¿eh?

    Soporte del navegador

    Este último y más complejo método de utilizar SVG con consultas de medios y transformaciones se comporta perfectamente en las siguientes versiones de navegador:

    • Explorador de Internet 9+
    • Firefox 17+
    • Cromo 17+
    • Ópera 15+
    • Safari 6.0+
    • Safari en iOS 6.0+
    • Navegador de Android en Android 3.0+

    La técnica podría funcionar en versiones antiguas de navegadores, pero algunas transformaciones, como el escalado, no se aplicarían.

    Conclusión

    Los íconos SVG responsivos se pueden usar de muchas maneras, incluidas las siguientes:

    • anuncios responsivos (el contenido del anuncio ocuparía el espacio que le otorga el documento y, considerando que CSS y JavaScript están permitidos, la mayor parte de la acción estaría contenida en un único archivo SVG por anuncio);
    • logotipos;
    • iconos de aplicaciones.

    Debo decir que no hay nada de malo en la técnica de los sprites propuesta por Joe Harrison. ¡Funciona y es necesario para algunos propósitos!

    ¿Pensamientos? ¿Comentario? Espero sus comentarios en la sección de comentarios a continuación.

    ¡Saludos y diviértete!

    Otras lecturas

    • Aventuras en la tercera dimensión: transformaciones CSS 3D
    • Animar elementos recortados en SVG
    • Diseño de una exposición interactiva con rutas de clip CSS
    • La ilusión de la vida: un estudio de caso de animación SVG

    (al, ml, il, mrn)Explora más en

    • Codificación
    • CSS
    • javascript
    • Diseño de respuesta
    • SVG





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Repensar el SVG responsivo

    Repensar el SVG responsivo

    Planificación y proceso del sistema de diseño, con Nathan Curtis Implemente rápidamente. Implementar inteligentemente Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-repensar-el-svg-responsivo-841-0.jpg

    2024-05-20

     

    Repensar el SVG responsivo
    Repensar el SVG responsivo

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20