Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG
Webdesign

Cómo crear imágenes SVG responsivas

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

En este tutorial explicaré cómo crear imágenes SVG responsivas; más específicamente, explicaré cómo crear logotipos, iconos e imágenes SVG que cambien dependiendo de la pantalla en la que estén siendo mostrados.

Imágenes SVG responsivas

Comencemos con un ejemplo. Este es el objetivo de nuestro trabajo (consulta la versión en pantalla completa para ver el efecto a su máximo):

Si cambias el tamaño del contenedor (gracias a Rick Strahl por su complemento jQuery redimensionable) o el de la ventana del explorador, verás que el SVG responderá.

Lo que estamos haciendo

Sigue el video para aprender cómo:

  • Crear este logotipo en Adobe XD
  • Exportar los recursos SVG
  • Limpiar y optimizar el SVG usando SVGOMG.

Una vez que tengas tu SVG (descarga los recursos optimizados aquí si así lo deseas), los siguientes pasos describen cómo crear un logotipo responsivo.

1. Codifica manualmente el elemento SVG

Vamos a codificar de forma manual los fundamentos de este SVG, pegando fragmentos de nuestros recursos de tipo logotipo en donde sea necesario. Comienza abriendo un elemento SVG.

Nota: necesitamos incluir estas peculiares cadenas de espacios de nombres para poder usar los atributos href, etcétera, más adelante.

2. Define algunos symbols

Necesitamos definir algunos symbols anidados dentro de nuestro svg; cada uno de nuestros componentes tendrá su propio symbol. Esta es la manera en la que se ve un symbol, incluyendo, en este caso, un viewBox de 60x60 (que coincide con las dimensiones de nuestro icono).

Ahora pegamos el contenido de nuestro icono SVG dentro del elemento symbol, pero solamente los elementos path para la bandera y el castillo. Terminamos con lo siguiente:

Repite este procedimiento de crear un símbolo para el SVG "type" también.

3. Define symbols para las versiones de logotipo

Ahora necesitamos definir más symbols; uno para cada versión del logotipo que diseñamos anteriormente (la versión landscape (paisaje) y full (completa)).

logo versions in Adobe XD

Estos symbols se crean como lo hicimos anteriormente, asegurándonos de que el viewBox tenga el tamaño correcto en cada caso. Por ejemplo:

La diferencia principal aparece ahora: en vez de pegar los contenidos de path de svg directamente, vamos a colocar elementos use haciendo referencia a nuestras partes symbol anteriores a través de sus valores id, de esta manera:

Podemos obtener los valores x, y, width y height de Adobe XD (o en donde sea que hayas diseñado los iconos). Aquí puedes ver los valores de posición y dimensión para el icono de texto:

position and dimensions

Deberás terminar con algo como esto - las dos versiones como symbols:

4. Revela los symbols en tu navegador

Ahora tenemos una buena cantidad de código, pero si abres el SVG en tu navegador no verás nada. Hemos definido nuestros symbols, pero aún necesitamos usarlos de verdad. Vamos a colocar directamente tres elementos use en nuestro lienzo; uno para cada versión:

Si ahora abres tu SVG en un navegador, verás los tres logotipos posicionados en el mismo lugar, apilados uno encima del otro.

5. Muestra los iconos selectivamente usando consultas de medios

Usaremos consultas de medios para mostrar cada uno de nuestros iconos individualmente, dependiendo del tamaño de la pantalla, y podemos hacer eso directamente dentro de nuestro archivo SVG.

Después de la etiqueta svg de apertura, agrega algunas etiquetas style:

Dentro de ellas, agrega algunas consultas de medios para los iconos a través de los nombres de clases que acabamos de asignarles.

  • Aquí comenzamos ocultando las versiones ladscape (paisaje) y full (completa) de forma predeterminada.
  • Luego, en las pantallas de al menos 500px ocultamos la versión square (cuadrado) y mostramos la versión landscape (paisaje).
  • Después, en las pantallas de al menos 1200px mantenemos la versión square (cuadrado) oculta, ocultamos la versión landscape (paisaje) y mostramos la versión full (completa).

Conclusión

¡Y hemos terminado! guarda el archivo SVG y podrás usarlo como cualquier imagen normal (con un elemento img). No olvides que puedes revisar la versión en pantalla completa para obtener una impresión integral del efecto responsivo que hemos creado.

Aprende más

Enlaces relacionados

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.