Una guía para el formato de imagen de gráficos vectoriales escalables (SVG)

Hay un aspecto de Internet del que no puedes escapar: las imágenes. En los primeros días de la web, era un asunto estricto de solo texto. Sin embargo, ahora tenemos formatos de imagen dedicados para ayudarnos a mostrar imágenes nítidas. El formato Scalable Vector Graphics (SVG) es uno de los más nuevos y flexibles disponibles.

Explicaremos más adelante, pero un SVG es una colección de datos que se presenta como una imagen en la interfaz. Esto significa que puede usar hojas de estilo en cascada (CSS) para manipular la imagen. Además, puede cambiar su tamaño según sea necesario sin perder calidad.

Para esta publicación, hablaremos más sobre los gráficos vectoriales escalables y cómo pueden ayudarlo. También discutiremos cómo incluirlos en su sitio web de WordPress.

Una introducción rápida a los formatos de imagen web más comunes

Antes de pasar a los SVG y cómo usarlos, vale la pena hablar sobre los principales formatos de imagen que usamos para la web. Hay tres a tener en cuenta:

• Grupo Conjunto de Expertos Fotográficos (JPEG). Como su nombre indica, si desea mostrar fotografías tomadas con una cámara digital, este es el formato para usted.
• Gráficos de red portátiles (PNG). Deberá utilizar el formato PNG para mostrar los gráficos creados, como los de Adobe Illustrator.
• Formato de intercambio de gráficos (GIF). ¡Oye, a todos les gustan los clips divertidos de programas de televisión para usar como reacción en las redes sociales! GIF es el formato perfecto para gráficos animados que también son portátiles.

Si bien algunos elegirán el formato que deseen, este no será un enfoque óptimo. Por ejemplo, si elige hacer que cada imagen sea GIF, podría ver tamaños de archivo astronómicos e imágenes de baja calidad. Por el contrario, no querrá usar JPEGS para gráficos, porque PNG es un formato más óptimo.

Qué es el formato de gráficos vectoriales escalables

Querrá tener paciencia con nosotros en esta sección, porque nos pondremos técnicos en algunas áreas. Además, el concepto de SVG podría resultar confuso.

Los gráficos vectoriales escalables no existen (más o menos). De hecho, no son un gráfico o una imagen en absoluto, sino una forma de lenguaje de marcado extensible (XML). Para los que no lo saben, este es un hermano cercano de HTML pero sin algunos de los aspectos de ese lenguaje (como las etiquetas predefinidas).

Como comparación que quizás ya entienda, considere cómo puede crear formas usando CSS. Esto es algo de lo que hablaremos más en breve. Bueno, imagina este CSS integrado en un contenedor de documentos al que llamas usando un formato de archivo y una estructura estándar ( image.svg , por ejemplo).

Es más exacto decir que como HTML proporciona un marco para definir encabezados, párrafos, secciones, listas y más, SVG proporciona el marco para definir formas como círculos y rectángulos. Sin embargo, esto todavía no explica por qué tenemos (ya veces necesitamos) el formato SVG. Hablaremos de esto a continuación.

Por qué tenemos SVG

Antes de los SVG, usaba PNG para mostrar gráficos. Las primeras imágenes en la web pueden ser GIF, pero en general, los PNG son el formato de imagen dominante. La pregunta no es tanto: "¿Por qué tenemos SVG?", sino "¿Qué les falta a los formatos de imagen actuales que un SVG pueda resolver?" La respuesta es: dinamismo.

Si mira hacia atrás a los principales formatos de imagen web, dos realmente no se adaptan a los gráficos creados (JPEG y GIF). Esto deja a los PNG para soportar la tensión. Sin embargo, los PNG sufren algunos problemas que solo ahora son evidentes para la web moderna:

• Son estáticos, en el sentido de que crea la imagen sin conexión y la exporta como ese formato en particular. Esto significa que es algo inflexible.
• Por extensión, no puedes cambiar el 'maquillaje' de la imagen. Dado que tenemos una serie de dispositivos para crear y mostrar, a veces es necesario adaptarse a esas 'ventanas'. Haga el esfuerzo que necesita para crear todos los tamaños de logotipo solo para computadoras de escritorio y los principales dispositivos móviles usando PNG.
• Si bien los PNG pueden ser livianos, es responsabilidad del diseñador y del propietario del sitio asegurarse de que se lleve a cabo la optimización de la imagen. Un PNG puede ser pesado, a veces más de un megabyte, sin ninguna optimización.

Además, los PNG llenaron parte de un vacío en un momento en que había pocas opciones que pudieran proporcionar una calidad de imagen lo suficientemente alta. En ese momento, CSS estaba en su infancia y aún no teníamos el alcance de diseño y desarrollo que tenemos ahora.

Por ejemplo, solo hemos podido usar la propiedad border-radius desde 2010. Esto le permite definir bordes redondeados e incluso círculos. Lo verás en acción en los botones mucho:

Usará CSS para crear formas que se pueden escalar y adaptar a la pantalla, pero Scalable Vector Graphics puede hacer más. De hecho, ahora recurrirá a SVG en lugar de CSS para hacer esto, aunque tampoco son una bala mágica.

Las ventajas de los gráficos vectoriales escalables

Al igual que cualquier otro formato de imagen, los gráficos vectoriales escalables no son perfectos. Hay muchos aspectos positivos, por supuesto:

• Un SVG se ajusta a las dimensiones de un dispositivo, a menudo sin ninguna intervención adicional de su parte. Esto reduce el tiempo de desarrollo o creación.
• El archivo asociado a una imagen es pequeño, porque solo necesita un SVG. Por el contrario, un logotipo PNG debe ofrecer algunos tamaños y dimensiones diferentes. Esto ocupa espacio en el servidor.
• Además, los SVG tienen un mejor rendimiento que los PNG, porque solo necesita cargar un archivo a un costo de kilobytes. Ese paquete de archivos PNG podría estar en los megas dependiendo de la calidad, cantidad y optimización de los mismos.

En general, puede hacer más con SVG que con cualquier otro formato de imagen. Tanto un desarrollador como un diseñador gráfico pueden crear SVG, ya sea mediante código o exportando una creación típica desde una aplicación de dibujo dedicada. Debido a que se relacionan más estrechamente con el desarrollo de la web, la adopción está aumentando.

Los inconvenientes de los gráficos vectoriales escalables

Sin embargo, no todo es color de rosa. Los SVG todavía tienen algunos problemas que querrá tener en cuenta:

• La tecnología se está desarrollando, a diferencia de la mayoría de los otros aspectos centrales de la web. Debido a que mucha gente espera mucho de los gráficos vectoriales escalables, existe una "brecha" entre lo que puede hacer y lo que quiere hacer.
• Si bien la compatibilidad básica con SVG está disponible en la mayoría de los navegadores, el conjunto completo de funciones aún no está disponible según el navegador que utilice. Nuevamente, los SVG tienen más potencial que aún no es evidente: necesitamos un mejor soporte del navegador para una funcionalidad más avanzada para ver de qué es capaz el formato.
• En algunos casos, es posible que encuentre que las imágenes SVG son menos precisas o simplemente tienen un aspecto incorrecto. Esto se debe a que debe confiar en que un sitio se cargue como cabría esperar. Si puede recordar un momento en el que tuvo que volver a cargar una página web debido a errores, imagine que esto sucede solo con sus imágenes SVG.

También diríamos que es más difícil crear SVG sin conocimientos de codificación en algunos casos también. Hay mucho mejor soporte en programas gráficos como Affinity Designer y Adobe Illustrator. También hay soporte para exportar SVG en aplicaciones como Google Drawing:

Esta es un área de mejora, pero todavía está un poco atrasada en comparación con otros formatos de imagen.

A pesar de estos inconvenientes, puede mitigarlos. Ciertamente, para un uso básico, puede implementarlos casi de inmediato. De hecho, WordPress incluso ofrece este soporte siguiendo unos pocos pasos, y lo discutiremos a continuación.

Cómo usar SVG en su sitio web de WordPress

La mala noticia es que si desea cargar un SVG a WordPress sin ningún trabajo, no podrá hacerlo. Un problema adicional con el soporte actual de gráficos vectoriales escalables es que WordPress no le permite cargar estas imágenes como estándar por razones de seguridad:

Las razones están más allá del alcance de este artículo. En resumen, debido a que el formato SVG es un documento en lugar de una imagen real, un usuario malintencionado podría generar posibles ataques de secuencias de comandos. Lo que esto significa es que necesitará encontrar una alternativa más segura.

En otra parte de la web, encontrará instrucciones para agregar código a su archivo functions.php para habilitar las cargas SVG. Sin embargo, no vamos a realizar este paso porque no podemos garantizar que sea seguro. En cambio, puede hacer lo que haría a menudo con WordPress: recurrir a un complemento. Recomendamos compatibilidad con SVG:

Una vez que instale y active el complemento, diríjase a la pantalla Configuración> Soporte SVG dentro de WordPress. Esto le mostrará algunas pantallas, pero solo necesita marcar la opción ¿Restringir a los administradores? casilla de verificación en el panel Configuración.

De forma predeterminada, el complemento permitirá que todos los usuarios carguen archivos SVG. Esto podría ser una mala noticia debido a los problemas de seguridad inherentes, y es exactamente por eso que WordPress no le permite cargar esos archivos en primer lugar. Sin embargo, si marca esta casilla, el complemento restringirá la carga solo a los administradores del sitio, además de hacer que el uso de SVG sea más seguro como estándar.

En resumen

Hay muchas maneras de mostrar imágenes en la web, y la mayoría de las personas no piensan dos veces sobre el formato que usan. Sin embargo, si se toma el tiempo para adaptar el formato a la necesidad, obtendrá imágenes detalladas y nítidas que se ven impresionantes en todas las pantallas.

En esta publicación, hemos ofrecido mucha información sobre gráficos vectoriales escalables. Utilizará CSS para adaptar la imagen a sus necesidades, y el alcance de la manipulación es mucho mayor que los PNG y JPEG. Además, son livianos, por lo que son perfectos para pantallas pequeñas y conexiones de Internet deficientes.

¿Desea utilizar gráficos vectoriales escalables en su sitio web? De ser así, ¿le ayudará este artículo? ¡Háganos saber en la sección de comentarios!

Crédito de la imagen: GDJ.