Hay un aspecto de Internet del que no puedes escapar: las imágenes. Al comienzo de la existencia de la red, era una cosa estricta, solo de texto. Sin embargo, ahora tenemos formatos de imagen dedicados para ayudarnos a mostrar imágenes claras. El formato Scalable Vector Graphics (SVG) es uno de los más nuevos y flexibles disponibles.
Explicaremos esto más adelante, pero SVG es una colección de datos que se presenta como una imagen en la interfaz de usuario. Esto significa que puede usar hojas de estilo en cascada (CSS) para manipular la imagen. Además, puede cambiar su tamaño libremente sin perder calidad.
En esta publicación, hablaremos más sobre los gráficos vectoriales escalables y cómo pueden ayudarlo. También discutiremos cómo incrustarlos en su sitio de WordPress.
Una base rápida para los formatos de imagen web más populares
Antes de entrar en SVG y cómo usarlos, vale la pena hablar sobre los formatos de imagen básicos que usamos en la web. Hay tres puntos a tener en cuenta:
- Grupo Conjunto de Expertos Fotográficos (JPEG). Como sugiere el nombre, si desea ver fotos tomadas con una cámara digital, este es el formato para usted.
- Gráficos de red portátiles (PNG). Querrá usar el formato PNG para mostrar cualquier gráfico que cree, como los de Adobe Illustrator.
- Formato de intercambio de gráficos (GIF). ¡Oye, a todos les gustan los clips divertidos de los programas de televisión para usarlos como reacción en las redes sociales! GIF es el formato perfecto para gráficos animados que también son portátiles.
Si bien algunas personas elegirán cualquier formato que les guste, este no será el enfoque óptimo. Por ejemplo, si elige crear cada imagen GIF, es posible que vea tamaños de archivo astronómicos y una calidad de gráficos deficiente. Por el contrario, no querrá utilizar JPEGS para gráficos, ya que PNG es un formato más óptimo.
¿Qué es el formato de gráficos vectoriales escalables?
Querrá trabajar con nosotros en esta sección, ya que cubriremos problemas técnicos en algunas áreas. Además, el concepto de SVG puede resultar confuso.
Los gráficos vectoriales escalables no existen (más o menos). De hecho, no son gráficos o imágenes en absoluto, sino una forma Lenguaje de marcado extensible (XML). Para los ignorantes, es el hermano cercano de HTML, pero sin algunos aspectos del lenguaje (como las etiquetas predefinidas).

Como comparación que quizás ya entiendas, considera cómo crear formas usando CSS. Esto es algo de lo que hablaremos pronto. Bueno, imagine que CSS se horneó en el envoltorio del documento que invocó utilizando el formato y la estructura de archivo estándar (imagen.svgpor ejemplo).
Es más exacto decir que, dado que HTML proporciona una estructura para definir encabezados, párrafos, secciones, listas y más, SVG proporciona una estructura para definir formas como círculos y rectángulos. Sin embargo, eso todavía no explica por qué tenemos (ya veces necesitamos) el formato SVG. Hablaremos de eso más tarde.
¿Por qué tenemos SVG?
Antes de SVG, usabas PNG para mostrar tus gráficos. Las primeras imágenes en la web pueden ser GIF, pero PNG es generalmente el formato de imagen dominante. La pregunta no es tanto: «¿Por qué tenemos SVG?», más «¿Qué falta en los formatos gráficos actuales y SVG lo resolverá?» La respuesta es el dinamismo.
Si mira hacia atrás en los formatos de imagen web básicos, dos no coinciden con los gráficos que se están creando (JPEG y GIF). Esto deja a PNG para aligerar la carga. Sin embargo, los archivos PNG tienen algunos problemas que ahora solo son visibles en la Internet moderna:
- Son estáticos porque crea una imagen sin conexión y la exporta en ese formato particular. Esto significa que es algo inflexible.
- Por lo tanto, el «maquillaje» de la imagen no se puede cambiar. Dado que tenemos muchos dispositivos de creación y visualización, a veces hay que ajustarse a estas «áreas de pantalla». Haga el esfuerzo que necesita para crear todos los tamaños de logotipos para computadoras de escritorio y dispositivos móviles principales solo con archivos PNG.
- Si bien los archivos PNG pueden ser livianos, es el diseñador y el propietario del sitio el responsable de garantizar que la imagen esté optimizada. PNG puede ser pesado, a veces superior a un megabyte, sin ninguna optimización.
Además, los archivos PNG llenaron parte del vacío en un momento en que había pocas opciones que proporcionaran una calidad de imagen 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 podríamos usar border-radius
propiedad de 2010. Esto le permite definir bordes redondeados e incluso círculos. A menudo verá esto en acción en los botones:

Usará CSS para crear formas que se pueden escalar y adaptar a la pantalla, pero los gráficos vectoriales escalables pueden hacer más. De hecho, para hacer esto ahora recurrirás a SVG y no a CSS, aunque tampoco son una varita mágica.
Ventajas de los gráficos vectoriales escalables
Como cualquier otro formato de imagen, los gráficos vectoriales escalables no son perfectos. Por supuesto, hay muchos aspectos positivos:
- El SVG se adapta a las dimensiones del dispositivo, a menudo sin más intervención por su parte. Esto acorta el tiempo de desarrollo o creación.
- El archivo de imagen asociado es pequeño ya que solo necesita un SVG. Por otro lado, el logotipo de PNG debe ofrecer varios tamaños y dimensiones diferentes. Esto ocupa espacio en el servidor.
- Además, los archivos SVG son más eficientes que los archivos PNG porque solo necesita cargar un archivo a un costo de kilobytes. Este paquete de archivos PNG puede ser de megas dependiendo de su calidad, cantidad y optimización.
En general, puede hacer más con SVG que con cualquier otro formato de imagen. Tanto el programador como el artista gráfico pueden crear archivos SVG, ya sea con código o exportando un trabajo típico desde una aplicación de dibujo dedicada. A medida que se relacionan más estrechamente con el desarrollo de la web, crece la adopción.
Desventajas de los gráficos vectoriales escalables
Sin embargo, no todo es rosa. Los archivos SVG todavía tienen algunos problemas a tener en cuenta:
- La tecnología evoluciona, a diferencia de la mayoría de los otros aspectos fundamentales de las redes. Dado que muchas personas esperan mucho de los gráficos vectoriales escalables, existe una «brecha» entre lo que usted está Energía hacer y que eres? querer que hacer.
- Si bien la compatibilidad básica con SVG está disponible en la mayoría de los navegadores, conjunto completo de funciones todavía no está disponible dependiendo del navegador utilizado. Nuevamente, los archivos SVG tienen más potencial que aún está por verse: necesitamos un mejor soporte del navegador para obtener funciones más avanzadas, para ver de qué es capaz el formato.
- En algunos casos, puede encontrar que las imágenes SVG son menos precisas o simplemente se ven mal. Esto se debe a que debe confiar en que su sitio se cargue como se espera. Si recuerdas el tiempo que tuviste que recargar un sitio web debido a errores, visualízalo solo con imágenes SVG.
También diríamos que en algunos casos es más difícil crear SVG sin saber codificar. Mucho mejor soporte para programas gráficos como diseñador de afinidad y Ilustrador Adobe. También hay soporte para exportar SVG en aplicaciones como dibujo de google:

Esta es un área de mejora, pero todavía está un poco por detrás en comparación con otros formatos de imagen.
A pesar de estas desventajas, puedes paliarlas. Ciertamente, para aplicaciones básicas, se pueden implementar casi de inmediato. De hecho, WordPress incluso ofrece este soporte en solo unos pocos pasos y lo discutiremos más adelante.
¿Cómo usar SVG en su sitio de WordPress?
La mala noticia es que si desea cargar SVG a WordPress sin ningún trabajo, no podrá hacerlo. Un problema adicional con el soporte actual para gráficos vectoriales escalables es que WordPress no permite la carga estándar de estas imágenes por razones de seguridad:

las razones son fuera del ámbito de este artículo. En resumen, dado que el formato SVG es un documento y no una imagen real, un usuario malintencionado puede llevar a cabo posibles ataques de secuencias de comandos. Esto significa que necesita encontrar una alternativa más segura.
En otra parte de la web, encontrará instrucciones sobre cómo agregar código a su archivo functions.php para habilitar la carga de SVG. Sin embargo, no realizaremos este paso ya que no podemos garantizar que sea seguro. En su lugar, puede hacer lo que suele hacer con WordPress: ir al complemento. Nosotros recomendamos Soporte SVG:

Después de instalar y activar el complemento, vaya a Configuración> Soporte SVG en WordPress. Aparecerán varias pantallas, pero solo seleccione ¿Límite a los administradores? en el panel de 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 por eso que WordPress no le permite cargar estos archivos en primer lugar. Sin embargo, si marca esta casilla, el complemento restringirá la transferencia de datos solo a los administradores del sitio y también aumentará la seguridad del uso de archivos SVG como estándar.
En resumen
Hay muchas maneras de ver imágenes en Internet, y la mayoría de las personas no piensan dos veces sobre el formato que utilizan. Sin embargo, si se toma el tiempo de ajustar el formato según sea necesario, obtendrá imágenes claras y detalladas que se verán asombrosas en todas las pantallas.
Hemos cubierto mucha información sobre gráficos vectoriales escalables en esta publicación. Utilizará CSS para modificar la imagen a su gusto, y el alcance de la manipulación es mucho mayor que el de los archivos PNG y JPEG. Además, son livianos, lo que los hace perfectos para pantallas pequeñas y conexiones de Internet deficientes.
¿Desea utilizar gráficos vectoriales escalables en su sitio web? Si es así, ¿le ayudará este artículo? ¡Háganos saber en la sección de comentarios!
Credito de imagen: GDJ.