Qué es el formato SVG

1¿Qué es un archivo SVG?

SVG significa Scalable Vector Graphics, gráficos vectoriales escalables. En lugar de guardar una cuadrícula de píxeles como un JPG o un PNG, un SVG describe la imagen con instrucciones: dibuja un círculo en esta posición, traza una curva entre estos puntos, rellena esta forma con este color. Son órdenes escritas en XML, un lenguaje de marcas parecido a HTML.

El formato está estandarizado por el W3C, y SVG 1.0 llegó como recomendación en 2001. Se diseñó para la web, por lo que los navegadores lo muestran de forma nativa, y por eso es el formato habitual de los logotipos, iconos y gráficos de interfaces. Al ser texto, un SVG se puede abrir con un editor de código y modificar a mano.

2¿Cómo funciona un gráfico vectorial?

Cuando se muestra un SVG, el programa recalcula la imagen a partir de sus instrucciones para el tamaño exacto que necesita. Si lo agrandas, no se pixela, porque no hay píxeles que estirar: se vuelve a dibujar con la misma nitidez, ya sea en un icono de 16 píxeles o en una valla publicitaria. Esa propiedad se llama independencia de resolución.

Otra ventaja es el peso. Un logotipo sencillo en SVG puede ocupar apenas unos cientos de bytes. En cambio, el vectorial no es útil cuando la imagen es una fotografía, porque describir millones de variaciones de color sería más pesado y menos preciso que un mapa de píxeles. Para ese tipo de imágenes se emplean formatos de trama.

3SVG frente a PNG, JPG y WebP

La decisión depende del contenido. Un logotipo, un icono, una gráfica o un diagrama con formas definidas se benefician del SVG: nitidez en cualquier tamaño y poco peso. Una fotografía, un degradado complejo o una textura realista se guardan mejor en JPG o WebP. Una captura de pantalla con texto pequeño suele ir mejor en PNG.

El SVG también tiene capacidades que los formatos de píxeles no ofrecen: puede cambiar de color con CSS, responder a pasar el ratón por encima, animarse y contener texto seleccionable y buscable. Pero esa flexibilidad exige más cuidado, porque un SVG complejo con miles de trazados puede ser más pesado y lento que un PNG equivalente.

• Usa SVG para logotipos, iconos, ilustraciones planas, mapas y gráficos.
• Usa JPG o WebP para fotografías.
• Usa PNG para capturas y gráficos de píxeles con transparencia.
• Para imprimir en grande, prefiere vectorial o una imagen de muy alta resolución.

4Problemas habituales con archivos SVG

El primero es la tipografía. Si un SVG usa una fuente que no está instalada en el equipo donde se abre, el texto cambia de aspecto. La solución es convertir el texto a trazados en el programa de diseño antes de guardar, o incrustar la fuente. El segundo es la compatibilidad con programas que no leen SVG, como muchos editores de documentos antiguos, plataformas de impresión o formularios, que solo aceptan JPG o PNG.

El tercero tiene que ver con la seguridad. Un SVG puede contener scripts, y abrirlo en un navegador puede ejecutarlos. Por eso muchos sitios web lo restringen al subirlo. Si recibes un SVG de una fuente que no conoces, ábrelo con un programa de edición o conviértelo a otro formato en lugar de abrirlo directamente en el navegador.

5Cómo pasar un SVG a PDF o a imagen

Como el PDF también puede contener gráficos vectoriales, convertir un SVG a PDF puede conservar la nitidez total. La forma más sencilla es abrir el SVG en un navegador o en un programa de diseño e imprimir o exportar a PDF. Si lo que necesitas es una imagen de píxeles para subirla a una web que no acepta SVG, exporta a PNG con el tamaño que necesites.

Una vez que tienes un PNG, la herramienta Imágenes a PDF de Rayo PDF GO permite colocarlo en un documento, y Redimensionar imagen ajusta sus dimensiones. Si el fondo es transparente, el PNG lo conserva, algo muy útil con logotipos para membretes y sellos.

6Consejos prácticos al trabajar con SVG

Optimiza los archivos: los programas de diseño suelen añadir metadatos, capas y comentarios que el navegador no necesita. Eliminarlos puede reducir mucho el tamaño. Define siempre el tamaño base de la imagen mediante el atributo de caja de visualización, para que se escale correctamente al insertarlo en una página o documento.

Si vas a usar logotipos en documentos impresos, comprueba cómo se comportan los colores: el SVG trabaja habitualmente en RGB, y una impresión profesional puede requerir CMYK. Y si el logotipo se va a incluir en un PDF para enviarlo por correo, rasterizarlo a un tamaño adecuado y después comprimir el PDF puede mantener el archivo ligero sin sacrificar legibilidad.

Una última precaución se refiere al uso legal y a la procedencia: muchos logotipos e iconos en SVG que circulan por internet tienen licencias que limitan su uso comercial. Antes de incorporar un SVG descargado a un documento, un sello o un sitio web, comprueba quién es su autor y bajo qué licencia se distribuye, y conserva el archivo original por si necesitas modificarlo más adelante.