Convertir SVG a PNG

Los archivos vectoriales son lo correcto para guardar y lo incorrecto para enviar. Un SVG se amplía a cualquier tamaño sin volverse borroso nunca, y por eso los logotipos y los iconos viven así. Y por eso mismo hay bastantes sitios que lo rechazan: versiones antiguas de Office, muchos formularios de subida, las cadenas de iconos de aplicación, casi cualquier flujo de imprenta.

El PNG es el mínimo común denominador. Se lee en todas partes, se ve igual en todas partes, y es el formato con el que un vector sale del mundo vectorial.

Esta es la única decisión que hay que tomar, porque un SVG de verdad no tiene tamaño. Describe formas, no píxeles, así que la conversión tiene que elegir una resolución. El ajuste de escala la controla, y un número más grande no cuesta calidad: el dibujo se vuelve a dibujar en lugar de ampliarse, así que queda nítido en cualquier tamaño que pidas.

Una costumbre útil es pensar en el sitio más grande donde va a aparecer la imagen y doblarlo, que cubre las pantallas de alta densidad. Para un icono de aplicación, ajusta la escala para aterrizar exactamente en el número de píxeles que pide la plataforma.

El SVG guarda el texto como texto y se refiere a una tipografía por su nombre, así que si la fuente no va incrustada en el archivo, quien dibuja la sustituye por otra y tu logotipo cuidadosamente espaciado sale mal. Es, con diferencia, el motivo más común de que una conversión de SVG a PNG parezca rota.

La solución permanente está en el programa de diseño: convierte el texto a trazados antes de exportar y las letras pasan a ser formas que no se pueden sustituir. De paso, deja el archivo seguro para dárselo a cualquiera.

Las zonas transparentes siguen transparentes, así que un logotipo cae sobre cualquier fondo sin arrastrar un recuadro blanco detrás.

El dibujado lo hace resvg y no tu navegador, lo que significa que la salida es idéntica en cualquier máquina. Un conversor que dibuja a través de un canvas da resultados algo distintos en Chrome y en Safari, que es exactamente la clase de diferencia que solo aparece cuando el archivo ya está aprobado.

Las formas simples, los trazos y los rellenos se convierten exactamente. Donde los motores empiezan a separarse es en el extremo elaborado de la especificación: desenfoques gaussianos, filtros de sombra, modos de fusión y máscaras construidas a partir de otras máscaras.

resvg implementa las partes de la especificación que usan los archivos reales y es deliberadamente honesto con el resto: un filtro no admitido se omite en lugar de aproximarse a algo que casi parece correcto. Si un efecto importa, mira el PNG en vez de darlo por hecho, y si falta, apláchalo en el programa de diseño antes de exportar.

Un SVG suele ocupar unos pocos kilobytes porque es una descripción y no una imagen. El PNG es una rejilla de píxeles, y esa rejilla crece con el cuadrado de la escala: doblar la escala cuadruplica el archivo.

Un logotipo de 4 KB como SVG puede pesar varios megabytes como PNG de 4000 píxeles. No es un fallo, es la aritmética del formato — pero sí es una buena razón para elegir la resolución que necesitas de verdad y no la más alta que se ofrece.

Es uno de los motivos más frecuentes para esta conversión, y tiene una respuesta firme: las plataformas piden medidas exactas en píxeles, así que ajusta la escala para caer justo en ellas y no cerca. Redimensionar el PNG después tira por la borda la razón de haber partido de un vector.

Para un favicon, ten en cuenta además que lo que normalmente se quiere es un ICO y no un PNG, porque un ICO guarda varios tamaños en un solo archivo. Convierte a PNG en el tamaño más grande que necesites y usa la página de PNG a ICO para el resto.

Un SVG puede referirse a una imagen externa, a una tipografía externa o a una hoja de estilos que está en otro archivo. Esas referencias no forman parte del SVG, así que cuando el archivo llega aquí solo, aquello a lo que apuntaban no llega con él.

El resultado es un PNG con una fotografía que falta o una tipografía sustituida. Si el dibujo se veía completo en el programa de diseño e incompleto aquí, casi siempre es por esto: vuelve a exportar con los recursos incrustados en lugar de enlazados.

Suelta la carpeta entera. Cada archivo se dibuja con la misma escala y vuelve dentro de un ZIP, que suele ser lo que un juego de iconos quiere: la coherencia del conjunto pesa más que el acierto individual de cada pieza.

Como el dibujado ocurre en tu máquina no hay límite por archivo ni cola de espera, y como es resvg y no un canvas de navegador, el icono número doscientos se dibuja exactamente igual que el primero.