SVG almacena una imagen como formas matemáticas que se escala a cualquier tamaño sin desenfoque, mientras que PNG almacena una cuadrícula fija de píxeles. Esa única diferencia decide la elección: SVG para logotipos, iconos y gráficos planos que deben escalarse, PNG para fotografías y detalles complejos. SVG (Scalable Vector Graphics) es un formato basado en XML estandarizado por el W3C en 2001; PNG (Portable Network Graphics) es un formato ráster de 1996. Esta comparación explica vector versus ráster, cómo cada uno maneja la escala y el tamaño del archivo, la transparencia, la edición, la compatibilidad con el navegador y una regla clara sobre cuál usar y dónde.

Ninguno de los formatos es mejor en general, porque resuelven problemas diferentes. SVG es inmejorable para gráficos que aparecen en muchos tamaños; PNG es la única opción sensata para fotografías e imágenes detalladas. Saber a qué familia pertenece tu imagen responde a la pregunta incluso antes de abrir un convertidor.

Vector versus ráster

Los dos formatos describen imágenes de maneras opuestas. SVG enumera instrucciones como dibujar un círculo aquí, llenar este camino con ese color, para que el navegador lo muestre nuevo en cualquier tamaño. PNG almacena el color real de cada píxel en una cuadrícula, como un mosaico. El vector se adapta a formas con bordes limpios; raster se adapta a las fotografías, donde millones de píxeles únicos no tienen formas que describir. Ésta es la raíz de cada diferencia práctica entre ellos.

Una analogía ayuda. Un vector es una receta: síguelo a cualquier escala y obtendrás el mismo plato. Una trama es una fotografía del plato terminado: amplíela y verá píxeles más grandes y borrosos. La receta queda perfecta en cualquier tamaño; la fotografía no.

Escalado: SVG gana

El escalado es la ventaja decisiva de SVG. Se queda un logo SVG nítido desde un favicon de 16 píxeles hasta una valla publicitaria, porque las matemáticas se recalculan en cada tamaño. Un PNG se vuelve borroso en el momento en que lo amplías más allá de su resolución, ya que el software debe inventar píxeles que nunca fueron capturados. Para cualquier cosa que se muestre en varios tamaños, SVG sirve un archivo mientras que PNG necesita varias exportaciones en diferentes resoluciones.

Esto importa más de lo que parece. Las pantallas modernas varían desde teléfonos pequeños hasta grandes monitores 4K, y el diseño debe verse nítido en todas ellas. Un SVG maneja cada pantalla desde un solo archivo. Un PNG necesita una versión pequeña, una versión grande y, a menudo, una versión retina, lo que multiplica los activos que administra.

Tamaño del archivo

El tamaño del archivo depende de la complejidad, no de las dimensiones, que es lo opuesto a PNG. Un logotipo simple de dos colores como puede pesar SVG unos pocos kilobytes y mantener ese tamaño en cualquier escala, a menudo más pequeña que el PNG. Pero el tamaño del SVG crece con el número de formas, por lo que una fotografía calcada se vuelve muchas veces más grande que el PNG y se procesa lentamente. El tamaño PNG crece con el número de píxeles, por lo que una foto grande pesa pase lo que pase.

La lección es hacer coincidir el formato con el contenido. Para un ícono plano, SVG es más pequeño e infinitamente escalable. Para una foto detallada, SVG se expande en miles de caminos, mientras que PNG mantiene un tamaño predecible. La complejidad, no el nombre del formato, es lo que determina el peso.

Transparencia

Ambos formatos admiten la transparencia, por lo que ninguno gana aquí. SVG lo maneja de forma nativa, ya que una forma simplemente no puede tener relleno detrás y PNG lleva un canal alfa completo para una transparencia suave y parcial. Un logotipo permanece transparente sobre cualquier fondo en cualquier formato. La única diferencia es que la transparencia de SVG es parte de la descripción de su forma, mientras que PNG almacena un valor de opacidad para cada píxel.

Edición y flexibilidad

La edición favorece SVG para gráficos. Porque un SVG es texto que describe formas, sus rutas cambiar el color y animar con CSS, y cualquier texto dentro permanece como texto real que un lector de pantalla puede leer y un motor de búsqueda puede indexar. Un PNG tiene píxeles fijos, por lo que cambiar un color significa volver a exportarlo desde la fuente. Para un logotipo al que le cambiarás el estilo, el tema o lo animarás, SVG es mucho más flexible.

Soporte del navegador

El apoyo es universal para ambos, por lo que no decide la elección. Todos los navegadores leen SVG y PNG sin complementos, y ambos lo han hecho durante muchos años. La diferencia práctica es el contexto: SVG pertenece a páginas web e interfaces de aplicaciones, mientras que PNG también funciona en correos electrónicos, documentos y software antiguo que puede no aceptar SVG. Para un sitio web, cualquiera de los dos es seguro; Para un logotipo de correo electrónico, PNG es la elección más confiable.

Cuando usar cada

La regla es simple y vale la pena memorizarla:

Usar SVG para logotipos, iconos, gráficos, diagramas y dibujos lineales que deben escalarse y mantenerse nítidos.
Usar PNG para capturas de pantalla, gráficos detallados y cualquier imagen con bordes suaves o muchos colores.
No usar ninguno para fotos. a largo plazo: JPG o WebP comprimen fotografías mucho más pequeñas que PNG.

Mantenga un archivo vectorial maestro para los activos de la marca y exporte copias PNG cuando no se acepte SVG, como el correo electrónico o algunas cargas de aplicaciones.

SVG y diseño responsivo

El diseño responsivo es donde SVG se gana la vida. Un sitio moderno debe verse nítido en un teléfono, una computadora portátil y un monitor 4K, y un SVG maneja los tres desde un archivo con cualquier densidad de píxeles. No hay necesidad de realizar exportaciones pequeñas, grandes y retina por separado, ni desenfoque cuando el navegador amplía la imagen para una pantalla de alta resolución. El vector simplemente se vuelve a dibujar nítido en cualquier tamaño que requiera el diseño.

PNG no puede igualar esto. Para mantenerse nítido en una pantalla retina, un PNG debe exportarse con el doble de resolución, lo que duplica el tamaño del archivo, e incluso entonces se vuelve borroso si se extiende más allá de esa resolución. Administrar múltiples tamaños PNG para diseños responsivos es un costo de mantenimiento real que un solo SVG elimina.

Cuando PNG supera a SVG en la práctica

PNG gana en más casos de los que sugiere su reputación. Cualquier imagen con detalles fotográficos, degradados, texturas o sombras suaves pertenece a PNG, porque rastrearlo hasta SVG produce un desastre feo y abultado. Las capturas de pantalla son territorio PNG, ya que mezclan texto con detalles de la interfaz que no se vectorizan. Y una ilustración compleja con cientos de colores es más pequeña y limpia como PNG que como un SVG gigante de miles de trazados.

El error que comete la gente es asumir que SVG es siempre la opción moderna y superior. Es superior sólo para gráficos planos y con bordes duros. Inserte una imagen detallada en SVG y obtendrá un archivo más grande que se procesa lentamente, lo contrario de lo que deseaba.

Una nota sobre SVG y la seguridad

SVG conlleva una consideración que PNG no: debido a que es código, un archivo SVG puede contener guiones. Un SVG malicioso subido a un sitio podría, en teoría, ejecutar JavaScript cuando se muestre. Esta es la razón por la que muchas plataformas desinfectan o rechazan los SVG subidos por los usuarios, y por qué solo debes confiar en los SVG de una fuente conocida. PNG, al ser datos de píxeles puros, no conlleva tal riesgo. Para sus propios logotipos e íconos, esto no es un problema, pero explica por qué algunos formularios de carga aceptan PNG y no SVG.

Errores comunes al convertir a SVG

Dos errores arruinan la mayoría de las conversiones de PNG a SVG. El primero es intentando vectorizar una fotografía, que produce miles de rutas y un archivo más grande que el original. El segundo es dejar el mapa de bits original incrustado dentro del SVG después de un seguimiento automático, por lo que el archivo es realmente un PNG en un contenedor SVG, sin obtener nada. Traza solo gráficos planos y, para el logotipo de una marca, vuelve a dibujarlo en un editor de vectores en lugar de confiar en un trazo automático, que proporciona una geometría limpia y el archivo más pequeño.

Cómo convertir PNG a SVG

Convertir un PNG a SVG significa vectorizar: trazar los píxeles en rutas. Esto funciona para logotipos planos, íconos y arte lineal, y falla con las fotografías, que no tienen formas claras que trazar. Nuestro Convertidor de PNG a SVG rastrea gráficos simples en su navegador, por lo que no se carga nada. Para el logotipo de una marca de su propiedad, volver a dibujarlo en un editor vectorial produce un resultado más limpio que cualquier trazo automático. Para fotos, use nuestro Convertidor de PNG a JPG en cambio.

Preguntas frecuentes

¿SVG es bueno para el diseño responsivo?

Sí, ideal. Un SVG se mantiene nítido en cada pantalla y densidad de píxeles, eliminando la necesidad de realizar exportaciones PNG pequeñas, grandes y retina por separado.

¿Por qué algunos sitios rechazan las cargas SVG?

porque un SVG puede contener scripts, a diferencia de un PNG. Las plataformas desinfectan o bloquean los SVG de los usuarios por motivos de seguridad, razón por la cual algunos formularios solo aceptan PNG.

¿Por qué mi SVG convertido es más grande que el PNG?

probablemente trazó una foto o dejó el mapa de bits incrustado. Vectorice solo gráficos planos y elimine la imagen original después del calco para que el SVG contenga rutas, no píxeles.

¿Es SVG mejor que PNG?

Para gráficos, sí. SVG escala sin desenfoque en un tamaño pequeño. Para las fotografías, gana PNG, porque las fotos no tienen formas limpias para almacenar como vectores.

¿Cuál es la diferencia entre SVG y PNG?

SVG es matemáticas escalables; PNG es una cuadrícula fija de píxeles.. SVG se mantiene nítido en cualquier tamaño, mientras que PNG se vuelve borroso cuando se amplía más allá de su resolución.

¿Puedo usar SVG para fotos?

No, no es útil. Las fotos tienen millones de colores y bordes suaves. sin formas que trazar, por lo que una foto SVG es grande y desordenada. Utilice PNG o JPG.

¿Cuál es más pequeño, SVG o PNG?

Para gráficos simples, SVG. Un logotipo de dos colores ocupa unos pocos kilobytes como SVG en cualquier tamaño. Para las fotos, PNG es más pequeño, ya que una foto calcada se expande.

¿SVG mantiene la transparencia?

Sí. SVG admite transparencia de forma nativa, como el canal alfa de PNG, por lo que el logotipo permanece transparente sobre cualquier fondo.

¿Todos los navegadores admiten SVG?

Sí. Todos los navegadores modernos leen SVG y PNG sin complementos. SVG se adapta a páginas web, mientras que PNG también funciona en correo electrónico y software antiguo.

¿Cómo convierto PNG a SVG?

Rastrearlo. Un vectorizador traza un PNG plano en rutas SVG, que funciona para logotipos e íconos pero no para fotografías.

¿Puedo editar un SVG después de crearlo?

Sí. Las rutas SVG se abren en cualquier editor de vectores y volver a colorear o animar con CSS, ya que el archivo es texto que describe formas, no píxeles fijos.

¿Qué formato debo utilizar para el logotipo de un sitio web?

SVG. Se escala nítidamente en cada pantalla desde un archivoy su texto sigue siendo legible para los motores de búsqueda. Mantenga un PNG para el correo electrónico donde no se acepta SVG.

¿Es mejor PNG o SVG para un icono?

SVG, para escalar. Un icono SVG se mantiene nítido en cualquier tamaño, mientras que un ícono PNG necesita múltiples exportaciones y se difumina cuando se amplía.

SVG y PNG resuelven diferentes problemas: SVG almacena matemáticas escalables que se mantienen nítidas en cualquier tamaño, mientras que PNG almacena una cuadrícula fija de píxeles que se vuelve borrosa cuando se amplía. SVG gana para logotipos, íconos y diseños lineales que deben escalarse, editarse y animarse con CSS, y servir cada pantalla desde un solo archivo. PNG gana para fotografías, capturas de pantalla e imágenes detalladas, y funciona donde no se acepta SVG. Haga coincidir el formato con el contenido y utilice nuestros convertidores anteriores para vectorizar un gráfico simple o manejar una foto rasterizada, todo en su navegador.

Referencia rápida: SVG o PNG

Alcanzar SVG cuando la imagen es un logotipo, icono, gráfico o dibujo lineal que debe escalarse, cuando desea cambiarle el color o animarla con CSS, o cuando un archivo debe servir para cada tamaño de pantalla. Alcanzar PNG cuando la imagen es una captura de pantalla, un gráfico detallado o cualquier cosa con degradados, texturas o bordes suaves, y cuando necesita que funcione en el correo electrónico o en un software anterior que rechace SVG. La línea divisoria es simple: los gráficos planos y con bordes definidos se vuelven vectoriales, todo lo detallado se vuelve rasterizado.

Mantener un vector maestro

Para cualquier activo de marca, conserve el original como vector maestro y exporte copias rasterizadas según sea necesario. Un solo logotipo SVG puede generar un favicon, un avatar social y un archivo de impresión, cada uno de los cuales se exporta al formato y tamaño correctos según sea necesario. Trabajar al revés, desde un PNG rasterizado a un vector, significa calcar, que nunca recupera completamente la geometría limpia. Por lo tanto, almacene el archivo maestro como SVG cuando pueda y trate las exportaciones PNG como copias desechables que puede regenerar en cualquier momento.

El resultado final

SVG y PNG no son tanto rivales como especialistas. Los vectores describen formas y escalas para siempre, por lo que los logotipos e íconos pertenecen a SVG. Los píxeles capturan detalles, por lo que las fotografías y capturas de pantalla pertenecen a PNG. Elija haciendo una pregunta: ¿esta imagen tiene formas limpias y planas o detalles fotográficos finos? Esa respuesta decide el formato cada vez, y mantener un vector maestro significa que siempre puedes exportar la copia rasterizada que necesitas.