Construyendo una imagen receptiva

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

Hay bastantes artículos en la web que tratan con logotipos receptivos. El ejemplo más popular podría ser el sitio web Responsive Logos que muestra algunos logotipos muy conocidos en diferentes variaciones para diferentes tamaños de pantalla. Cuando vi este ejemplo por primera vez, pensé que no era mucho más que un pequeño truco. Al final, es solo

con un sprite de imagen grande como fondo. No fue hasta que escuché una charla en Smashing Conference por @MikeRiethmuller titulada: Más allá de las consultas de los medios, que me interesé más en este tema. Además de la charla, recomiendo leer su artículo "SVG tiene más potencial".

Aprendí dos cosas que realmente me entusiasmaron.

  1. Al usar SVG, puede soltar el atributo viewBox y establecer un nuevo sistema de coordenadas en elementos de símbolo SVG anidados aplicando un nuevo viewBox. (Sí, lo sé. Suena confuso. A continuación, lo explicaré con más detalle).
  2. Cuando utiliza consultas de medios dentro de archivos SVG y luego inserta la imagen mediante img-tag o como una imagen de fondo CSS, las consultas de medios están vinculadas al ancho de la imagen. Prácticamente el mismo comportamiento que si utilizara consultas de contenedor.

La idea nació

Después de leer sobre todo esto, tuve la idea de crear un archivo de logotipo para nuestra empresa, que no solo reacciona al ancho del navegador, sino que se adapta respetando su relación de aspecto. Por lo tanto, puede usarlo en cualquier lugar, y el archivo en sí elige qué versión mostrar según el tamaño que se le dé.

El resultado final

Si ya está entusiasmado, descargue el ARCHIVO DE DEMOSTRACIÓN final o véalo en acción en este CodePen.

Paso a paso (... uuh Baby ♬)

A continuación, lo guiaré a través de cada paso que debe realizar para crear su propio logotipo receptivo. Al menos debe tener algunos conocimientos básicos sobre SVG y también CSS. Pero la buena noticia es: no habrá JavaScript en absoluto. En su mayor parte, solo tenemos que copiar el código de un archivo a otro.

1. Diseñando el logo

Comencemos diseñando cuatro versiones de nuestro logotipo. Mi herramienta de elección para eso es Sketch.

Variaciones del logotipo: 1. Rascacielos - 2. Retrato - 3. Cuadrado - 4. Paisaje

Siempre que haya elementos que se puedan encontrar en varias versiones, recomiendo usar símbolos en Sketch. Esto te lo facilitará en el futuro, y el SVG que vamos a construir usará los mismos símbolos. (Si no está familiarizado con los símbolos en Sketch, le recomiendo esta historia mediana de Jon Moore).

Como puede ver, el logotipo consta de un elemento visual y el nombre de la empresa. Solo en la versión cuadrada, elegí no mostrar el nombre. La razón de esto es que quería que fuera reconocible, incluso cuando se usaba como una miniatura pequeña por quizás solo unos 32px x 32px.

2. Configurando el archivo SVG

Antes de exportar cualquier imagen, tenemos que crear un nuevo archivo SVG. Tal vez sea un poco aterrador comenzar su SVG con la escritura de código, pero al final, no es demasiado complicado. Pinky promesa. Todo lo que necesitamos es una etiqueta de apertura y cierre como esta:

Si observa los atributos, notará que no hay ningún atributo viewBox. Solo establecemos el ancho y la altura al 100%.

(Nota: también hay dos atributos xmlns presentes. Para ser honesto, no sé exactamente por qué tienen que estar allí, probablemente debería buscarlo en Google ... de todos modos, si los elimina, no podrá usar ningún símbolo dentro SVG y obtener algunos mensajes de error feos en su lugar.)

3. Exportar símbolos SVG

Debido a que utilizaremos ambos elementos como símbolos en el SVG final, debemos colocar cada uno de ellos en una mesa de trabajo única y exportarlos como SVG.

Coloque todos los símbolos en mesas de trabajo separadas antes de exportarlos como SVG

Es crucial que no exporte los objetos sino que siempre cree una nueva mesa de trabajo. Si exporta elementos de una mesa de trabajo más grande, terminará con atributos de transformación de aspecto extraño adjuntos a sus grupos. También ayuda a separar todos los símbolos y eliminar todos los grupos no utilizados. Finalmente, haga un nombre apropiado y vea si hay alguna máscara aplicada, que no se usa.

Ahora veamos cómo se ve el código exportado:

Recomiendo usar algo como SVGOMG para reducir el tamaño del archivo y eliminar todas las cosas innecesarias. Pero no limpie las identificaciones. Si nombró sus capas en Sketch, puede identificarlas más fácilmente por ID en el archivo final. Así es como se verá su archivo optimizado:

Si todo es correcto, verá un grupo que tiene el nombre de su mesa de trabajo como ID. Dentro de este grupo está el contenido, que es de interés. En este caso, se trata de un rectángulo que sirve de fondo y una ruta compleja que construye el IX (roman 9 girado en sentido antihorario 90 grados ... por si acaso lo solicitabas).

4. Construyendo los símbolos

Todos nuestros archivos están listos y se pueden armar. Comience escribiendo algunas etiquetas de símbolos en su archivo final y dele a cada uno un ID único, así como un atributo viewBox que coincida con el viewBox de los archivos exportados.


  
    
  
  
    
  

Finalmente, pegue el contenido de sus archivos exportados (todo dentro del grupo que se nombra como su mesa de trabajo) dentro de las etiquetas de símbolos. Una vez que haya terminado con eso, su archivo debería verse así:

5. Usando nuestros símbolos

Hasta aquí todo bien. Lamentablemente, si abre el archivo en un navegador, no verá nada. Por ahora, definimos nuestros símbolos, pero nunca los colocamos en ningún lado. Para insertar un símbolo, necesita una etiqueta de uso en su archivo:

Ahora veamos qué está sucediendo exactamente aquí.

Primero, xlink: href apunta a un símbolo con una ID única y mostrará su contenido ... bueno, en realidad no está renderizado, sino que está clonado y de repente aparece una cosa extraña llamada Shadow DOM. Puede sonar como algo de Stranger Things, pero no debes tener miedo. Mientras no desee cambiar nada dentro de la instancia de símbolo a través de CSS, no hay nada de qué preocuparse.

A continuación tenemos los atributos x, y, ancho y alto. Es posible que ya haya adivinado que estos atributos definen la posición y las dimensiones del símbolo representado. Pero no hay una unidad dada, entonces, ¿qué tan grande será nuestro símbolo? Dentro de un SVG, las unidades están definidas por el atributo viewBox establecido en la etiqueta SVG. Como no establecimos un viewBox y solo definimos el ancho y la altura (100%), una unidad coincide con un píxel y nuestro símbolo tendrá un ancho de 100px. Y no importa si cambia el ancho del SVG. Siempre permanecerá a 100px de ancho.

Intente cambiar los atributos de ancho y alto dentro de este CodePen. Notará que el símbolo siempre mantendrá su relación de aspecto. Afortunadamente, esto es exactamente lo que necesitamos para nuestro logotipo. Si desea cambiar el comportamiento de cambio de tamaño, necesita un atributo llamado preserveAspectRatio. Consulte el artículo de @ SaraSoueidan sobre la comprensión de los sistemas de coordenadas SVG y la transformación si desea obtener más información al respecto.

Además de los valores sin unidades, también puede usar porcentajes para definir la posición y las dimensiones a través de los atributos. Entonces, para hacer que este símbolo se vea como la versión cuadrada, simplemente use un ancho del 90% y coloque su esquina superior izquierda un 5% desde el cuadro delimitador de la imagen:

(Tal vez piense que establecer el ancho o la altura en "automático" es una buena idea ... bueno, no lo es. Safari y Firefox simplemente lo ignoran mientras Chrome no renderiza nada).

6. Combinando símbolos dentro de un nuevo símbolo

Para la versión vertical, necesitaremos ambos símbolos. Para asegurarnos de que escalen proporcionalmente y siempre tengan la misma distancia al borde y entre sí, simplemente creamos otro símbolo. Este símbolo nuevamente tiene su propio atributo viewBox que nos permite colocar nuestros símbolos dentro del nuevo sistema de coordenadas. Para ver exactamente dónde se debe colocar todo, simplemente puede volver a su archivo de boceto e inspeccionar los tamaños y las distancias.

Versión vertical: púrpura: viewBox - rojo: posición - turquesa: ancho y alto

Ahora, solo tenemos que traducir todos los números a nuestro nuevo símbolo SVG, que luego se verá así:


  
   

Cuando usamos este símbolo, no lo queremos al 100% de ancho, así que reduzcamos la escala como nuestro símbolo cuadrado.

7. Ocultar y mostrar

Hasta este punto, creamos tres símbolos y tenemos dos etiquetas de uso en nuestro SVG.

Finalmente, comienza la parte divertida, y podemos hacer que responda. En este momento, ambos símbolos se representan uno encima del otro. Para ocultar las partes que no queremos mostrar, necesitamos agregar algunas clases a las etiquetas de uso.


Ahora, lo único que falta es algo de CSS para mostrar solo una versión de logotipo a la vez. Puede agregar una etiqueta

Si crea otro símbolo para la versión horizontal, probablemente desee mostrarlo cuando el ancho de la imagen sea al menos dos veces su altura. Veamos cómo cambia el estilo:

Y eso es. Hemos terminado de crear nuestro propio logotipo svg receptivo. Aquí puede ver el código completo con tres versiones que van del modo vertical al horizontal:

8. Un poco de transformación

OK, OK ... Sé que falta la versión de rascacielos en el ejemplo anterior. La razón aquí es que necesita realizar alguna transformación para crear el símbolo necesario. No lo explicaré en detalle, pero puede encontrar el código que necesitará a continuación:

  
  
Para ti: espero que este tutorial haya sido útil y ciertamente me encantaría ver algunos de tus resultados.
Si le ha gustado esta pieza y desea ver más, puede visitar nuestro sitio web, seguirnos en Twitter o suscribirse a nuestro boletín.