Convertir SVG a PNG

No hay control de calidad, porque PNG no tiene pérdida: no descarta nada sea cual sea el ajuste. La única decisión que influye en el aspecto del resultado es el ancho de salida.

Tamaños sensatos para los usos habituales:

• Favicons e iconos pequeños: de 32 a 256 px. Los tamaños muy pequeños a menudo necesitan una versión dibujada a propósito en lugar de una reducida, porque el detalle fino se convierte en papilla por debajo de unos 32 px.
• Imágenes web y logotipos: de 512 a 1024 px. Más o menos el doble del tamaño al que se mostrará, para que se vea nítido en pantallas de alta densidad.
• Presentaciones y documentos: de 1024 a 2048 px.
• Impresión: tan grande como sea práctico. El objetivo habitual son 300 píxeles por pulgada impresa, así que un gráfico de 15 cm de ancho pide unos 1800 px.

Vale la pena revisar las fuentes. Si tu SVG hace referencia a una fuente por su nombre en lugar de convertir el texto en contornos, el renderizador tiene que sustituirla por la que tenga disponible, y el resultado puede no coincidir con lo que veías en tu herramienta de diseño. Si el texto importa, conviértelo en trazados antes de exportar el SVG: la mayoría de las herramientas de diseño tienen un comando «convertir en contornos» u «objeto a trazado».

Si el PNG resultante pesa más de lo que quisieras, la compresión de PNG funciona especialmente bien con imágenes que vienen de vectores, que suelen tener pocos colores distintos. Convertir a WebP suele ser todavía mejor para uso web.

Cuándo necesitas un PNG en lugar del SVG

• Una plataforma rechaza SVG. Muchas redes sociales, marketplaces, clientes de correo y gestores de contenido antiguos solo aceptan PNG, a menudo por los mismos motivos de seguridad que se explican más abajo.
• Iconos de aplicaciones, favicons y fichas de tiendas de apps, que casi siempre especifican dimensiones exactas en píxeles.
• Correo electrónico. La compatibilidad con SVG en los clientes de correo es pobre e irregular; PNG es universal.
• Insertar en un documento o una presentación, donde algunos programas renderizan SVG de forma impredecible o no lo renderizan.
• Flujos de impresión que esperan un archivo de mapa de bits a una resolución conocida.
• El SVG usa fuentes o efectos que se renderizan distinto en otros sitios. Convertirlo en mapa de bits fija el aspecto para que todo el mundo vea lo mismo.

Cuándo seguir usando el SVG

Para cualquier cosa en un sitio web que controlas, el SVG suele ser mejor: a menudo pesa menos que el PNG y se mantiene nítido en cualquier densidad de pantalla sin que tengas que generar varios tamaños. Todos los navegadores actuales muestran SVG.

Convierte cuando necesites un mapa de bits de tamaño fijo para un sitio que no acepte el vector.

Cómo manejamos SVG de forma segura

SVG es poco habitual entre los formatos de imagen: es un documento con estructura, no un bloque de píxeles, y uno escrito con malas intenciones puede intentar cosas que un JPG nunca podría: leer archivos del servidor, hacer peticiones de red salientes o incrustar scripts.

Dos cosas hacen que aquí eso no sea un problema.

Primero, recibes un PNG, nunca el SVG. Nada de lo incrustado en el archivo puede ejecutarse en tu navegador, porque tu navegador nunca ve el archivo.

Segundo, cada SVG subido se revisa antes de que nada lo analice. Los archivos que contienen declaraciones de tipo de documento, definiciones de entidades, scripts, controladores de eventos o referencias a recursos externos se rechazan directamente en lugar de repararse: reescribir un archivo hostil y luego fiarse del resultado es un problema mucho más difícil que rechazarlo. Las imágenes incrustadas como URI de datos y las referencias internas, como los degradados, no se ven afectadas, así que los SVG normales exportados desde herramientas de diseño se convierten sin problemas.

Renderizar un juego completo de iconos

Agrega todos los SVG que quieras; cada uno se renderiza por separado al tamaño que elegiste, con su propia descarga. Si necesitas el mismo icono a varios tamaños, ejecuta el lote una vez por tamaño: el vector se vuelve a renderizar cada vez en lugar de escalarse, así que todos los tamaños son igual de nítidos.