SVG vs PNG: cuándo usar cada formato para logos e iconos

Para un logo, un icono o una ilustración plana, usa SVG siempre que el destino lo acepte: el archivo es pequeño, se ve nítido en cualquier pantalla y se puede reutilizar a cualquier tamaño. Usa PNG cuando el destino no acepta SVG (correo electrónico, la mayoría de redes sociales, algunos programas de oficina) o cuando el gráfico ya tiene su tamaño final y no va a cambiar. Y para fotografías no uses ninguno de los dos: JPG o WebP. Una aclaración antes de seguir: DocuMixa no crea, edita ni convierte SVG, así que esta guía explica los formatos con honestidad y señala al final qué puedes hacer con las herramientas de imagen que sí existen cuando tu logo ya está en PNG.

Vectorial frente a raster: lo que hay dentro de cada archivo

Un SVG es un archivo de texto en formato XML. Si lo abres con un bloc de notas verás etiquetas que dicen “dibuja un círculo en este punto con este radio” o “traza esta curva con estos puntos de control”. El visor calcula en cada momento cómo pintar esas instrucciones al tamaño que necesite. Un PNG, en cambio, es una malla de píxeles: el archivo solo sabe de qué color es cada punto, no que haya una letra o un círculo. Por eso un SVG puede mostrarse a 16 píxeles o a 4 metros sin perder definición, mientras que un PNG tiene exactamente la resolución con la que se exportó; si lo estiras, el programa inventa píxeles intermedios por interpolación y el borde se ve blando o escalonado.

Este contraste explica otra diferencia que sorprende: el peso de un SVG depende de la complejidad del dibujo (cuántas formas y cuántos puntos tiene), no del tamaño al que se muestra. El peso de un PNG depende de cuántos píxeles tiene la imagen y de lo repetitivos que sean. Un logotipo sencillo suele ocupar muy poco como SVG y más como PNG de gran resolución. Pero si el dibujo es complejo, con miles de trazados, degradados y efectos, el SVG puede pesar más que un PNG y además tardar más en pintarse en un móvil modesto.

Dónde gana cada formato

SVG gana en estos casos:

• Escala sin pérdida: el mismo archivo sirve para un favicon, la cabecera de una web, una pantalla de alta densidad y un rótulo impreso. En pantallas con muchos píxeles por pulgada, un PNG necesita versiones al doble o al triple de tamaño; el SVG, no.
• Peso reducido en gráficos simples: iconos de interfaz, logotipos de pocas formas, ilustraciones planas, diagramas y gráficos con texto.
• Edición y reutilización: se abre en Inkscape, Figma, Illustrator o Affinity, y se puede cambiar un color o una forma sin rehacer el diseño. En una web, un SVG incrustado en el HTML se puede colorear con CSS, por ejemplo para que un icono cambie en modo oscuro.
• Animación e interacción con CSS o JavaScript cuando el SVG está incrustado en la página.

PNG gana en estos otros:

• Compatibilidad: abre en cualquier navegador, aplicación, sistema operativo y red social. Ante la duda sobre dónde va a terminar la imagen, PNG es la apuesta segura.
• Fotos y capturas con detalle: un SVG no es el formato para una captura de pantalla o una fotografía recortada; el PNG guarda cada píxel sin pérdida y permite fondo transparente de verdad, incluso con sombras suaves.
• Resultado idéntico en todas partes: un PNG se ve igual en cualquier dispositivo porque ya está pintado. Un SVG depende de que el programa que lo abre interprete bien cada función y encuentre las fuentes.
• Es el formato correcto cuando el gráfico ya está a su tamaño final de uso y no va a escalar, como una insignia de 200 por 200 píxeles en una presentación.

Comparativa rápida de formatos

El texto dentro de un SVG: la trampa de las fuentes

Un SVG puede contener texto real, escrito con una tipografía concreta. Eso introduce un problema: si el equipo que abre el archivo no tiene esa fuente instalada, el navegador la sustituye por otra y tu logo cambia de aspecto. Además, cuando un SVG se carga como imagen normal en una página (con la etiqueta de imagen), el navegador no descarga fuentes externas para él, así que solo se pueden usar las que ya estén en el sistema del visitante. La solución estándar para logotipos es convertir el texto en trazados antes de exportar: se llama “Crear contornos” en Illustrator, “Objeto a trazado” en Inkscape y tiene una función equivalente en los demás editores vectoriales. El texto deja de ser editable pero queda fijo, con la forma exacta de las letras. Hazlo en la copia que publicas y guarda el original editable.

Cuándo SVG es la elección equivocada

• Fotografías: un SVG no comprime bien los fotogramas de una cámara. Si vectorizas una foto automáticamente, obtienes miles de trazados con un aspecto de ilustración; si incrustas la foto dentro del SVG, solo has envuelto un JPG en un archivo más grande.
• Correo electrónico: muchos clientes de correo no muestran SVG en el cuerpo del mensaje de forma fiable, entre ellos Gmail y varias versiones de Outlook de escritorio. Para la firma o el logo de un boletín, usa PNG, a doble resolución si quieres que se vea nítido en pantallas densas.
• Redes sociales y vistas previas: la mayoría de las plataformas piden JPG o PNG para fotos de perfil, portadas, publicaciones e imágenes de vista previa de enlaces (la imagen que aparece al compartir una página). Comprueba siempre los formatos aceptados por la red en la que vas a publicar.
• Programas de oficina antiguos: las versiones recientes de Microsoft 365 aceptan SVG en Word y PowerPoint, pero versiones anteriores y otros editores de documentos o presentaciones pueden rechazarlo o mostrarlo mal. En esos casos, un PNG grande es lo más seguro.
• Imprentas: muchos talleres piden PDF vectorial u otros formatos de diseño y no aceptan un SVG suelto. Exporta el logo a PDF desde tu editor vectorial.
• Iconos diminutos: a 16 por 16 píxeles, un SVG puede verse algo borroso si sus líneas no coinciden con la cuadrícula; un PNG retocado a mano puede verse más limpio.

Seguridad: no abras ni publiques un SVG que no sea tuyo

Como el SVG es código, puede incluir scripts, enlaces a recursos externos y controladores de eventos. Si un SVG se carga como imagen, los navegadores bloquean los scripts, pero si lo abres directamente como documento, o si una web lo inserta directamente en su HTML, el código puede ejecutarse. La regla práctica: no abras directamente en el navegador un SVG recibido de un desconocido, no lo incrustes en tu web sin revisarlo y, si tu sitio permite que otros suban SVG, límpialos con un saneador especializado o conviértelos a PNG en el servidor. Un PNG no puede contener código, y esa es otra razón por la que sigue siendo el formato por defecto para contenido de terceros.

Cómo elegir y exportar paso a paso

1. Define el destino: web propia, correo, redes sociales, presentación, impresión. Ahí se decide casi todo.
2. Si el destino es tu web y el logo es simple, sirve el SVG y deja como respaldo un PNG para el favicon y la imagen de vista previa (por ejemplo, 1200 por 630 píxeles para compartir enlaces; el favicon en 32 y 180 píxeles).
3. Antes de exportar, convierte el texto del logo en contornos para que ninguna fuente ausente lo deforme.
4. Para PNG, exporta desde tu editor vectorial al doble o al triple del tamaño visible: si el logo se mostrará a 200 píxeles de ancho, genera 400 o 600, y deja que el navegador lo encoja.
5. Guarda siempre el SVG original. Es tu archivo maestro: de él puedes generar PNG de cualquier tamaño en el futuro, y de un PNG no puedes recuperar el vectorial.
6. Con el PNG ya exportado, ajusta el resultado: redimensiona con cuidado (reducir es seguro; ampliar no añade detalle), comprime si pesa demasiado y verifica el resultado sobre fondo claro y oscuro.

Qué puedes hacer en DocuMixa cuando tu logo ya es un PNG

DocuMixa no tiene herramienta de SVG, pero sí cubre el tramo raster. Redimensionar imagen respeta el formato: un PNG con fondo transparente sigue siendo PNG transparente, y el tope es de 10 000 píxeles por lado. Comprimir imagen ofrece tres niveles; en un PNG reduce la paleta de colores, algo casi invisible en un logo plano pero que puede notarse en degradados. PNG a JPG rellena las zonas transparentes con blanco o negro, a tu elección, y no permite otro color: un logo de letras negras sobre fondo negro desaparece, así que elige el contrario al de tus letras. JPG a PNG no devuelve la transparencia, y WEBP a PNG sirve cuando descargas un logo en WEBP y tu programa no lo abre. Con Imagen a PDF puedes colocar el PNG en una página A4, Carta o del tamaño de la imagen. El plan gratuito acepta hasta 5 imágenes a la vez (si subes varias, recibes un ZIP) y las conversiones se hacen en el servidor de forma temporal.

Errores frecuentes y lista de comprobación

• Subir un PNG de 100 píxeles a un sitio que lo muestra a 400: se verá borroso. Exporta siempre a un tamaño mayor que el de uso.
• Entregar solo el PNG a la imprenta o al diseñador: pide el vectorial original o vuelve a exportarlo desde el editor.
• Confiar en una conversión automática de PNG a SVG: funciona razonablemente con logotipos de pocos colores y falla con fotos, sombras y degradados.
• Pasar un logo transparente a JPG con el fondo equivocado, y no comprobarlo sobre fondo claro y oscuro.
• Antes de enviar: comprueba que el archivo abre en el destino real, revisa la transparencia sobre un fondo oscuro, confirma que el texto se ve con la fuente correcta y guarda una copia del original vectorial en tu archivo de marca.