PNG vs SVG

SVG para todo lo dibujado; PNG para lo fotografiado o ya fijado.

¿Cuándo PNG?

PNG cuando la imagen es una fotografía o una captura, o cuando el destino no acepta SVG.

¿Cuándo SVG?

SVG para logotipos, iconos y diagramas. Se ve nítido a cualquier tamaño y suele ocupar menos que la misma imagen en píxeles.

Lo que casi siempre se pasa por alto

No se puede convertir una foto a SVG y esperar un dibujo vectorial. Lo que sale es un mosaico de miles de formas: más pesado que el original y peor de ver.

Pasar de PNG a SVG

Qué se conserva

No se descarta nada. PNG y SVG guardan su contenido sin pérdida, así que la conversión cambia el envoltorio y no la calidad, y puede repetirse sin que el daño se acumule.

La transparencia se conserva. PNG y SVG guardan canal alfa, así que un recorte sigue recortado y detrás no se rellena nada.

Qué añade el formato de destino

SVG es un formato de trabajo y PNG uno terminado. Vuelve texto editable en lugar de una imagen de la página, que suele ser el motivo de la conversión y también su límite.

SVG puede contener animación; un archivo PNG es un solo fotograma. Sale un archivo de una imagen en un formato que admitiría más.

SVG admite capas. Un archivo PNG llega ya aplanado, así que el resultado tiene una sola capa: la estructura habría que rehacerla a mano.

Abrir el resultado

Los programas de siempre no coinciden: PNG se abre en Adobe Photoshop, GIMP y Paint.NET, y SVG en Inkscape, Adobe Illustrator y Figma, así que quien reciba el resultado necesita alguno del segundo grupo.

Tamaño y calidad

SVG guarda las muestras en crudo, así que el archivo crece bastante sin ganar nada. Solo tiene sentido cuando un programa del otro lado no acepta PNG, que suele ser la razón para hacerlo.

Para qué sirve cada formato

PNG es el formato de PNG Development Group, publicado en 1996. Registra 16 bits por canal.

SVG viene de W3C y es de 2001, recogido en SVG 1.1. Inkscape, Adobe Illustrator y Figma lo leen.

Pasar de SVG a PNG

Qué se pierde

SVG describe formas y PNG guarda píxeles. El resultado es nítido al tamaño con que se generó y no más: ampliarlo después solo puede inventar los píxeles intermedios, por lo que aquí el tamaño de exportación importa más que en otras conversiones.

PNG guarda una sola imagen fija. De un archivo SVG animado queda el primer fotograma y se pierde el resto: la conversión sirve para extraer una imagen, no para llevarse el movimiento.

Las capas se fusionan. SVG las mantiene separadas y editables; PNG guarda el resultado combinado, así que todo lo que dependa de mover una capa tiene que hacerse antes.

Qué se conserva

No se descarta nada. SVG y PNG guardan su contenido sin pérdida, así que la conversión cambia el envoltorio y no la calidad, y puede repetirse sin que el daño se acumule.

La transparencia se conserva. SVG y PNG guardan canal alfa, así que un recorte sigue recortado y detrás no se rellena nada.

Abrir el resultado

Los programas de siempre no coinciden: SVG se abre en Inkscape, Adobe Illustrator y Figma, y PNG en Adobe Photoshop, GIMP y Paint.NET, así que quien reciba el resultado necesita alguno del segundo grupo.

Tamaño y calidad

PNG empaqueta las mismas muestras en aproximadamente la mitad de espacio. No se descarta nada — al descomprimirlo recuperas el SVG bit a bit — y por eso es el mejor sitio para lo que quieras conservar.

Para qué sirve cada formato

SVG es el formato de W3C, publicado en 2001. Está recogido en SVG 1.1, y conviene conocerlo si el archivo tiene que sobrevivir a la herramienta que lo escribió.

PNG viene de PNG Development Group y es de 1996, recogido en ISO/IEC 15948. Adobe Photoshop, GIMP y Paint.NET lo leen.

Lado a lado

PNG y SVG comparados fila a fila: qué guarda cada formato y qué cuesta.
PNGSVG
Full namePortable Network GraphicsScalable Vector Graphics
Extensión.png.svg
Tipo de medioimage/pngimage/svg+xml
CompresiónSin pérdida — no se descarta nadaSin comprimir
Esta página puede escribirlo

¿Ya lo tienes claro? Convierte aquí

De dónde salen estas cifras

Lo que esta página afirma sobre PNG and SVG se puede comprobar: aquí están los documentos que lo fijan.