admin
En el proceso de diseño de un sitio web fácil de usar, es posible que encuentre algunas dificultades con las imágenes, especialmente con la resolución de la imagen. Es importante que la calidad de la imagen sea correcta: pocas cosas se ven menos profesionales en una página que un logotipo, icono o foto distorsionados y con una escala deficiente.
Este problema solo se ve agravado por el diseño receptivo. Los visitantes ven su contenido tanto en computadoras de escritorio como en teléfonos inteligentes, por lo que, junto con el resto de su contenido, sus imágenes deben optimizarse sin importar el dispositivo. ¿No sería genial si hubiera un formato digital que hiciera que las imágenes se vieran geniales, sin importar su tamaño?
Resulta que lo hay. se llama el formato SVGy es perfecto para imágenes no fotográficas en sitios web.
Los SVG son una especie de truco mágico en el diseño de sitios web: no solo generan gráficos nítidos a cualquier escala, sino que también están optimizados para motores de búsqueda, son programables, a menudo más pequeños que otros formatos y capaces de animaciones dinámicas. Hay mucho que desempaquetar y aprender sobre los SVG.
En esta guía, cubriré todos los aspectos básicos que necesitará saber para comenzar a trabajar con SVG. Lo explicaré que son estos archivos, cuando usarlosy cómo empezar a crear archivos SVG tú mismo.
¿Qué es un archivo SVG?
Un archivo SVG, abreviatura de archivo gráfico vectorial escalable, es un tipo de archivo de gráficos estándar que se utiliza para representar imágenes bidimensionales en Internet.
Un archivo SVG, abreviatura de archivo gráfico vectorial escalable, es un tipo de archivo de gráficos estándar que se utiliza para representar imágenes bidimensionales en Internet. A diferencia de otros formatos de archivo de imagen populares, el formato SVG almacena imágenes como vectores, que es un tipo de gráfico formado por puntos, líneas, curvas y formas basadas en fórmulas matemáticas.
Esto genera la pregunta: ¿Qué es exactamente un gráfico vectorial?
Ráster vs Vector
Hay más de unos pocos formatos de archivo de imagen en uso en la web hoy en día, que podemos dividir en dos categorías: gráficos de trama y gráficos vectoriales.
Probablemente esté familiarizado con los formatos comunes PNG y JPEG. Estos son formatos de gráficos de trama, lo que significa que almacenan información de imagen en una cuadrícula de cuadrados de colores, también llamada mapa de bits. Los cuadrados de este mapa de bits se combinan para formar una imagen coherente, muy parecida a los píxeles de una pantalla de ordenador.
Los gráficos de trama funcionan bien para imágenes muy detalladas, como fotografías, en las que es necesario especificar el color exacto de cada píxel. Las imágenes rasterizadas tienen una resolución fija, por lo que aumentar su tamaño reduce la calidad de la imagen.
Los formatos de gráficos vectoriales, como SVG y PDF, funcionan de manera diferente. Estos formatos almacenan imágenes como un conjunto de puntos y líneas entre puntos. Las fórmulas matemáticas dictan la ubicación y la forma de estos puntos y líneas, y mantienen sus relaciones espaciales cuando la imagen se amplía o se reduce. Los archivos de gráficos vectoriales también almacenan información de color e incluso pueden mostrar texto.
Cómo funcionan los archivos SVG
Los archivos SVG están escritos en XML, un lenguaje de marcas utilizado para almacenar y transferir información digital. El código XML en un archivo SVG especifica todas las formas, colores y texto que componen la imagen.
Veamos algunos ejemplos. Comenzaré dibujando un círculo simple SVG:
Cuando abro el archivo de este círculo en un editor de texto, aparece este código XML:
Como puede ver, no hay mucho código aquí. Solo necesitamos una línea de código para dibujar un círculo. Eso es porque XML hace la mayor parte del trabajo por nosotros con etiquetas. En el código anterior, las etiquetas se muestran en rosa entre paréntesis angulares.
Para dibujar el círculo, el código XML especifica la forma con un
Cuando se proporciona un archivo SVG como este, un navegador web (u otra aplicación) toma esta información XML, la procesa y la muestra en pantalla como una imagen vectorial. Todos los navegadores modernos representan SVG de esta manera, al igual que el software de edición de gráficos especializado.
También notará que este archivo XML está escrito en inglés. Los SVG son básicamente archivos de texto, lo que los hace legibles por humanos. Esto permite a los desarrolladores realizar ediciones en archivos XML directamente. Por ejemplo, podría reemplazar el llenar valor para cambiar el color del círculo:
Por supuesto, podemos lograr mucho más con vectores que con círculos básicos. Veamos una imagen más compleja, el logotipo de la rueda dentada de HubSpot:
Aunque es un ícono simple, este gráfico consta de 30 líneas conectadas por 30 puntos:
Abramos este archivo SVG en un editor de texto:
Bien, hay un poco más pasando aquí. Pero, el concepto es el mismo. Todavía tenemos nuestro
Ventajas de los archivos SVG
El código XML no solo es agradable a la vista, sino que hace que los archivos SVG sean muy potentes y prácticos para sitios web y aplicaciones web, como exploraremos en esta sección.
1. Escalabilidad infinita
Está justo ahí en el nombre: los SVG se pueden expandir o reducir a cualquier tamaño sin pérdida de calidad. El tamaño de la imagen y el tipo de visualización no importan con los SVG: siempre tienen el mismo aspecto.
Esto es importante porque el tamaño de las imágenes web difiere según el espectador, según las dimensiones de la ventana del navegador, el dispositivo, el zoom, el diseño del sitio y el diseño receptivo. Tus imágenes deben aparecer completamente renderizadas para todos los espectadores, y los SVG hacen que esto sea mucho más fácil.
Considere la rueda dentada de HubSpot nuevamente. Aquí está el logotipo como SVG, de 100 píxeles de ancho:
Y aquí está el mismo logo en formato PNG, también de 100 píxeles de ancho:
Se ven bastante indistinguibles ahora, pero la diferencia en calidad es obvia cuando escalo cada uno hasta cinco veces el tamaño:
Si es necesario expandir o reducir un SVG, el programa que lee el archivo reajusta los puntos y las líneas para conservar los límites claros y los colores sólidos.
Las imágenes rasterizadas, por el contrario, aparecen pixeladas cuando se amplían en nuestras pantallas. Si bien existen soluciones para este problema para mantener la fórmula ráster, como usar diferentes archivos de tamaño creciente para la misma imagen, requieren más trabajo y son más propensos a eros. En última instancia, las imágenes de trama no se diseñaron para escalar.
Sin embargo, hay una compensación para una mejor escalabilidad: por diseño, los SVG carecen de los detalles de las imágenes rasterizadas. Solo puede transmitir tanta información visual desde un sistema vectorial, mientras que un formato ráster puede mostrar imágenes tan detalladas como lo permita el mapa de bits. Cualquier intento de representar perfectamente un PNG detallado (es decir, una fotografía) como un vector dará como resultado un archivo SVG masivo y poco práctico.
Entonces, ambos tipos de archivos tienen su lugar en el diseño web. Usa PNG, JPEG y otros formatos rasterizados para fotos, y prueba SVG para cualquier cosa menos detallada.
2. Personalización
Los SVG dan a los diseñadores y desarrolladores mucho control sobre su apariencia. En lugar de modificar los archivos directamente en un editor de texto, puede emplear uno de los muchos programas de edición compatibles con SVG para cambiar sus formas vectoriales, colores, texto e incluso otros efectos visuales como degradados de color y sombras.
3. Compatibilidad con secuencias de comandos
El formato de archivo SVG fue desarrollado por el Consorcio Mundial de la red como un formato estandarizado para gráficos web, diseñado para trabajar con otras convenciones web como HTML, CSS, JavaScript y el modelo de objeto de documento.
Gracias a esta compatibilidad, las imágenes SVG se pueden controlar con scripts. Esto abre la puerta a una amplia gama de posibilidades de visualización dinámica, desde animaciones hasta gráficos dinámicos e imágenes adaptables a dispositivos móviles. Este nivel de control sobre la apariencia no es posible con los formatos JPEG y PNG.
4. Accesibilidad y optimización de motores de búsqueda
Los archivos SVG son archivos de texto, y esto en sí mismo ofrece algunas ventajas sobre los formatos rasterizados. Primero, como hemos cubierto, los programadores pueden mirar el código XML y entenderlo rápidamente.
Además, si un gráfico SVG contiene texto, la información del texto se almacena en el archivo como texto literal (no como formas). Esto permite que los lectores de pantalla interpreten SVG, lo que ayuda a quienes tienen dificultades para interactuar con el contenido digital.
Por último, los motores de búsqueda pueden indexar los archivos SVG como google. Si desea colocar una infografía con mucho texto u otra visualización SVG en su página, incluir texto de palabras clave en la imagen puede ayudar a clasificar su página y mejorar su SEO. Los PNG y JPEG se limitan a metadatos y texto alternativo a este respecto.
5. Tamaños de archivo más pequeños
Los archivos SVG tienden a almacenar imágenes de manera más eficiente que los formatos de trama comunes, siempre que la imagen no sea demasiado detallada. Los archivos SVG contienen suficiente información para mostrar vectores a cualquier escala, mientras que los mapas de bits requieren archivos más grandes para las versiones ampliadas de las imágenes: más píxeles ocupan más espacio de archivo.
Esto es bueno para los sitios web porque los archivos más pequeños se cargan más rápido en los navegadores, por lo que los SVG pueden aumentar el rendimiento general de la página.
Sin embargo, esto no significa que deba convertir todas las imágenes a SVG. Veamos ahora cómo los sitios web tienden a aplicar SVG.
¿Para qué se utilizan los archivos SVG?
Como mencioné, los archivos SVG funcionan mejor para imágenes que contienen menos detalles que una fotografía. Eso sigue siendo bastante amplio, así que analicemos algunos de los usos más comunes de los SVG en línea.
Iconos
La mayoría de los íconos se traducen bien en vectores, dada su simplicidad y bordes claramente definidos. Los íconos para los elementos de la página, como los botones, deberán responder a los diferentes tamaños de pantalla, lo que significa que deben ser perfectamente escalables.
logotipos
El formato SVG es particularmente adecuado para logotipos, que aparecen en encabezados de sitios web, correos electrónicos e impresos en cualquier cosa, desde folletos hasta sudaderas con capucha y vallas publicitarias. Una vez más, los logotipos tienden a tener un diseño más simple, lo que se adapta muy bien al formato SVG.
Ilustraciones
Los vectores también se adaptan muy bien al arte visual no fotográfico. Los dibujos decorativos en páginas web se pueden escalar fácilmente y conservar espacio de archivo si se agregan como archivos SVG. Las ilustraciones a continuación, incluso las texturas en algunas formas, se pueden lograr con SVG.
Animaciones y elementos de la interfaz
Al aprovechar las capacidades de CSS y JavaScript, puede configurar los SVG para que cambien su apariencia dinámicamente y se activen automáticamente o después de algún evento. Los SVG animados pueden servir para agregar un estilo visual a sus páginas, o pueden usarse para interactuar con las animaciones de la interfaz de usuario:
Infografías y visualizaciones de datos
¿Su sitio web se beneficiaría de pantallas informativas, como una infografía o un gráfico ilustrado? Esta es otra aplicación útil para SVG. Sus diseños se escalarán sin problemas y el texto dentro del archivo SVG es indexable.
Incluso puede diseñar gráficos como SVG que se actualizan…
