PNG vs. SVG

Contenido

• ¿Qué es un archivo PNG?
  
• ¿Qué es un archivo SVG?
  
• ¿Cuál es la diferencia entre los archivos PNG y los archivos SVG?
  
• Archivos PNG vs. archivos SVG: preguntas frecuentes

¿Qué es un archivo PNG?

Los archivos PNG (gráficos de red portátiles) son archivos rasterizados. Cuentan con altas resoluciones, compresión sin pérdida de datos, transparencia y la capacidad de manejar 16 millones de colores. Esto los convierte en una excelente opción para gráficos, logotipos, gráficos e ilustraciones, así como fotografías muy detalladas. Debido a los grandes tamaños de archivo asociados a los archivos PNG, no son ideales para fotografías online.

Más información sobre los archivos PNG

¿Qué es un archivo SVG?

Los archivos SVG (gráficos vectoriales ampliables) funcionan bien para logotipos y gráficos, ya que puedes ampliarlos o reducirlos para distintos fines. Asimismo, son una opción popular en el diseño sitio web porque los motores de búsqueda como Google pueden leer su lenguaje de programación XML. Esto sirve de ayuda para las clasificaciones SEO y sitios web.

A diferencia de los archivos PNG, los SVG están basados en vectores. Esto quiere decir que emplean algoritmos matemáticos para mostrar imágenes, que puedes escalar a cualquier tamaño sin perjudicar su calidad.

Más información sobre los archivos SVG

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

Hay muchos cruces entre los archivos PNG y SVG. Descubre qué los diferencia.

Imágenes rasterizadas vs. vectoriales

Quizás la diferencia más importante entre los archivos PNG y SVG es que uno es un tipo de archivo rasterizado y el otro es vectorial.

Un archivo PNG es un formato de imagen rasterizado, es decir, basado en pixeles. Si amplías demasiado una imagen rasterizada, se granula o pixela. Del mismo modo, si la imagen es demasiado pequeña, puede volver borrosa. Si bien los archivos PNG pueden manejar resoluciones muy altas, no se pueden ampliar de forma infinita.

Por otro lado, los archivos SVG están basados en vectores, creados a partir de una compleja red matemática de líneas, puntos, formas y algoritmos. Pueden ampliar a cualquier tamaño sin perder su resolución.

Más información sobre las imágenes rasterizadas vs. vectoriales

Tamaños de archivo

Los tamaños de archivo PNG suelen ser grandes para que puedan manejar resoluciones altas. Su tamaño implica que pueden tardar más en procesar, compartir, almacenar y abrir. Asimismo, puede ralentizar los tiempos de carga de la página, motivo por el que los archivos JPEG son una opción más habitual para la fotografía online. Sin embargo, existe una variante de PNG de 8 bits más pequeña, pero solo admite 256 colores.

Los archivos SVG son mucho más pequeños que los PNG y probablemente no reduzcan la velocidad de tu computadora o sitio web. (Sin embargo, los diseños muy detallados pueden ralentizar un archivo SVG). Debido a que son un formato de archivo vectorial, puedes ampliar o reducir los archivos SVG sin perder calidad.

Compresión

Los archivos SVG ofrecen compresión sin pérdida de datos, lo que significa que se pueden comprimir a tamaños de archivo más pequeños sin costo alguno para su definición, detalle o calidad.

Los archivos PNG también se benefician de una compresión sin pérdida del 5 al 20 %, lo que puede ayudar a compensar su gran tamaño de archivo. Sin embargo, es probable que sean más grandes que un SVG.

Fotografía

Como se mencionó anteriormente, los archivos PNG no son una opción habitual para fotografías sitio web. Sin embargo, pueden manejar fotografías digitales muy detalladas y de gran calidad para su impresión y edición, entre otros fines. Son un formato de archivo común en Adobe Photoshop.

Por otro lado los archivos SVG no emplean pixeles, por lo que tienen dificultades a la hora de mostrar las fotografías en un nivel alto.

Uso en el sitio web

Tanto los archivos PNG como los SVG pueden mostrar niveles complejos de detalle para gráficos sitio web, ilustraciones, logotipos, infografías y tablas.

Sin embargo, los SVG cuentan con un beneficio clave gracias a su lenguaje de programación XML. Esto significa que cada archivo SVG que se muestra está escrito en texto, en lugar de código. Como resultado, los lectores de pantalla y los motores de búsqueda pueden analizarlos, por lo que son excelentes para fines de accesibilidad y SEO.

Los archivos SVG también suelen ser más pequeños, lo que los hace más rápidos a la hora de cargar una página. Los tiempos de carga de páginas son otro elemento fundamental de las clasificaciones de los motores de búsqueda.

Los archivos PNG también admiten algunos gráficos basados en texto, pero no en la misma medida.

Compatibilidad y complejidad

Los archivos SVG se consideran un tipo de archivo más avanzado que los PNG, pero en realidad no son compatibles con todos los navegadores y sistemas operativos. Además, su lenguaje de programación y su composición basada en vectores pueden resultar desconocidos e intimidantes para los nuevos usuarios.

Los archivos PNG, por otro lado, son un formato online estándar que recibe un gran apoyo por parte de los navegadores sitio web y los sistemas operativos.

Animación

Los archivos PNG no se pueden animar, a diferencia de un archivo de imagen similar basado en archivos rasterizados: el GIF.

Los archivos SVG sí se pueden animar, pero no tan fácilmente como otros tipos de archivos, como el formato nativo AI de Adobe Illustrator.

Más información sobre los archivos AI

Transparencia

Los archivos PNG y SVG admiten la transparencia, por lo que son excelentes opciones para logotipos y gráficos online.

Cabe destacar que los archivos PNG son una de las mejores opciones para un archivo transparente rasterizado. Si trabajas con pixeles y transparencia, este tipo de formato es mejor elección que los archivos SVG.

Archivos PNG vs. archivos SVG: preguntas frecuentes

¿Cómo se convierte una imagen rasterizada a SVG?

Sigue estos sencillos pasos para convertir un archivo de imagen rasterizado estándar como JPEG o PNG en un archivo SVG basado en vectores:

1. Abre Adobe Illustrator.
   
2. Haz clic en Archivo > Abrir y selecciona tu imagen desde la computadora.
   
3. Haz clic en Abrir.
   
4. Haz clic en la opción Calco en el menú superior y selecciona Calco de imagen.
   
5. Ajusta la conversión a tus especificaciones; esto podría incluir alterar el color.
   
6. Tras completar el proceso, selecciona tu imagen de calco y haz clic en Desagrupar. Esta acción separará las formas de color.
   
7. Haz clic en Archivo > Exportar.
   
8. Almacena tu archivo en formato SVG.

¿Cómo se convierte un SVG a PNG?

Sigue estos sencillos pasos para convertir un archivo SVG a PNG con Adobe Photoshop:

1. Abre Adobe Photoshop.
   
   
2. Haz clic en Archivo > Abrir.
   
3. Selecciona el archivo SVG de tu computadora.
   
4. Haz clic en Exportar > Exportar como > PNG.
   
5. Almacena tu archivo en formato PNG.

¿Cuál es el mejor archivo vectorial para imprimir?

Hay varios archivos vectoriales excelentes para imprimir, por lo que la elección depende del documento. Los archivos PDF son el formato vectorial más versátil para la impresión diaria. En el caso de trabajos de impresión a gran escala, puedes elegir el formato SVG o AI.

¿Debería usar el formato PNG o JPEG

La compresión con pérdida de datos y el color de 24 bits del formato JPEG lo distinguen como el archivo de imagen de referencia para las fotografías sitio web. Sin embargo, este tipo de archivo no es tan detallado como los PNG cuando se trata de imprimir. Además, los archivos JPEG no tienen la misma escalabilidad ni definición, por lo que no son la mejor opción para logotipos y gráficos.

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

Aunque ambos son formatos de archivo rasterizados estándar en el sitio web, un PNG es básicamente la versión de última generación de un GIF. Sin embargo, todavía existen varias diferencias entre ellos. Por ejemplo, los PNG no se pueden animar.

¿Los límites de tamaño se aplican a los archivos PNG y SVG?

Los archivos PNG tienen un límite de 2500 megapíxeles. En el caso de los archivos vectoriales, incluido los SVG, no hay límites de tamaño.