{"id":46355,"date":"2022-01-24T09:22:30","date_gmt":"2022-01-24T08:22:30","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=46355&#038;preview=true&#038;preview_id=46355"},"modified":"2023-08-21T14:36:53","modified_gmt":"2023-08-21T12:36:53","slug":"svg-vs-png","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/","title":{"rendered":"SVG vs PNG: \u00bfCu\u00e1les Son las Diferencias y Cu\u00e1ndo Utilizarlas?"},"content":{"rendered":"<p>Existen docenas de <a href=\"https:\/\/kinsta.com\/es\/blog\/tipos-de-archivos-de-imagen\/\">tipos de archivos de imagen<\/a>, cada uno de los cuales var\u00eda en funci\u00f3n del tipo de compresi\u00f3n, el formato y la compatibilidad con el navegador. Pero dos de los m\u00e1s utilizados son los formatos SVG y PNG.<\/p>\n<p>Estos dos tipos de archivo no podr\u00edan ser m\u00e1s diferentes: cada uno de ellos es m\u00e1s adecuado para situaciones espec\u00edficas. Ciertamente, no son intercambiables en todos los aspectos, pero puedes encontrar que los SVG pueden realizar tareas espec\u00edficas mejor que la imagen PNG est\u00e1ndar.<\/p>\n<p>Aprende la diferencia entre SVG y PNG y d\u00f3nde se aplican mejor en tu sitio web.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h3>Mira nuestro <a href=\"https:\/\/www.youtube.com\/watch?v=VEi_BU2FqQw\">Videotutorial<\/a> de SVG vs PNG<\/h3>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=VEi_BU2FqQw\"><\/kinsta-video>\n<h2>\u00bfQu\u00e9 es el SVG?<\/h2>\n<p>SVG significa <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-svg\/\" rel=\"noopener\">Scalable Vector Graphics (gr\u00e1ficos vectoriales escalables)<\/a>, y es el formato de archivo vectorial m\u00e1s utilizado en la web. Vamos a desglosarlo:<\/p>\n<ul>\n<li><strong>Escalable:<\/strong> Los SVG se pueden redimensionar hacia arriba o hacia abajo sin da\u00f1ar la calidad de la imagen. Ser\u00e1 perfectamente n\u00edtida y clara, independientemente de su tama\u00f1o.<\/li>\n<li><strong>Vectorial:<\/strong> La mayor\u00eda de los tipos de archivos de imagen contienen p\u00edxeles. Los vectores son esencialmente trozos de c\u00f3digo que representan una imagen en tiempo real, convirti\u00e9ndola en los p\u00edxeles que ves en tu pantalla. Aunque muestran la misma imagen, lo que ocurre en el fondo es muy diferente.<\/li>\n<li><strong>Los gr\u00e1ficos:<\/strong> Aunque no sea tan conocido, SVG es un tipo de archivo de imagen como PNG, JPEG o GIF. S\u00f3lo que hace las cosas de forma un poco diferente.<\/li>\n<\/ul>\n<p>Los vectores son piezas de c\u00f3digo escritas en XML que representan formas, l\u00edneas y colores para explicar su funcionamiento.<\/p>\n<p>Aunque crear una imagen con nada m\u00e1s que c\u00f3digo es totalmente posible, la mayor\u00eda de la gente utiliza un editor de gr\u00e1ficos vectoriales como Inkscape o Adobe Illustrator. Tambi\u00e9n puedes <a href=\"https:\/\/convertio.co\/png-svg\/\" target=\"_blank\" rel=\"noopener noreferrer\">convertir PNG<\/a> u otras im\u00e1genes de trama en SVG, pero los resultados no siempre son buenos.<\/p>\n<figure id=\"attachment_108839\" aria-describedby=\"caption-attachment-108839\" style=\"width: 1341px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-108839\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/convert-png-to-svg.jpg\" alt=\"convert png to svg\" width=\"1341\" height=\"465\"><figcaption id=\"caption-attachment-108839\" class=\"wp-caption-text\">Convertio es un conversor de PNG a SVG.<\/figcaption><\/figure>\n<p>Cuando se carga la p\u00e1gina, este c\u00f3digo se convierte en gr\u00e1fico, por lo que no puedes distinguir inmediatamente un SVG de un PNG. Pero como los SVG son simplemente l\u00edneas de c\u00f3digo convertidas en p\u00edxeles, eso significa que pueden escalar a cualquier resoluci\u00f3n -grande o peque\u00f1a- <a href=\"https:\/\/kinsta.com\/es\/blog\/compresion-con-perdida\/\">sin perder calidad<\/a>.<\/p>\n<figure id=\"attachment_108840\" aria-describedby=\"caption-attachment-108840\" style=\"width: 1215px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-108840\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/zoomed-in-svg.jpg\" alt=\"enlarged svg \" width=\"1215\" height=\"527\"><figcaption id=\"caption-attachment-108840\" class=\"wp-caption-text\">Ejemplo de un SVG ampliado.<\/figcaption><\/figure>\n<p>El SVG tambi\u00e9n admite animaci\u00f3n y transparencia, lo que lo convierte en un formato de archivo vers\u00e1til.<\/p>\n<p>El \u00fanico problema es que no se utiliza tanto como los formatos m\u00e1s est\u00e1ndar, como el PNG, por lo que es menos compatible con los navegadores y dispositivos m\u00e1s antiguos, y no siempre es f\u00e1cil subirlo a tu sitio y conseguir que se muestre correctamente.<\/p>\n\n<h3>Ventajas y desventajas de SVG<\/h3>\n<p>Aunque todav\u00eda no se utilizan tanto como los tipos de archivos de trama como PNG, los gr\u00e1ficos vectoriales est\u00e1n ganando popularidad r\u00e1pidamente. Hacen algunas tareas esenciales que las im\u00e1genes de trama no pueden hacer. He aqu\u00ed por qu\u00e9 la gente adora los SVG.<\/p>\n<ul>\n<li>Las im\u00e1genes SVG son escalables. Puedes dise\u00f1arlas a cualquier resoluci\u00f3n, y su tama\u00f1o aumentar\u00e1 o disminuir\u00e1 sin da\u00f1ar la calidad ni pixelarse. Con las im\u00e1genes de trama, tienes que saber qu\u00e9 tama\u00f1o quieres desde el principio, o podr\u00edas arriesgarte a hacer la imagen demasiado grande o demasiado peque\u00f1a.<\/li>\n<li>Los SVG siempre tienen un aspecto n\u00edtido y bello, ya que nunca experimentan p\u00e9rdida de calidad. Las im\u00e1genes rasterizadas pueden empezar a verse borrosas incluso cuando se redimensionan ligeramente.<\/li>\n<li>Como los SVG son s\u00f3lo c\u00f3digo, su tama\u00f1o de archivo es <a href=\"https:\/\/kinsta.com\/es\/blog\/optimizar-imagenes-para-la-web\/\">m\u00ednimo y est\u00e1 bien optimizado<\/a>. Tambi\u00e9n existen optimizadores de SVG para hacerlos a\u00fan m\u00e1s manejables. Es probable que tu sitio se cargue un poco m\u00e1s r\u00e1pido si los utilizas.<\/li>\n<li>A diferencia de los PNG, los SVG son compatibles con la animaci\u00f3n.<\/li>\n<\/ul>\n<p>El SVG tiene bastantes ventajas sobre el PNG, desde ser escalable hasta tener un tama\u00f1o m\u00e1s peque\u00f1o, pero no es mejor en todas las situaciones. Esto es lo malo de los tipos de archivos vectoriales.<\/p>\n<ul>\n<li>Aunque los SVG son compatibles con los principales navegadores modernos, puedes encontrarte con problemas de compatibilidad al renderizarlos en navegadores y dispositivos m\u00e1s antiguos. Si una parte importante de tus visitantes los utiliza, el cambio podr\u00eda ser una mala idea.<\/li>\n<li>Los SVG son m\u00e1s dif\u00edciles de trabajar, ya que requieren programas especiales para su creaci\u00f3n y edici\u00f3n. Aunque puedes dise\u00f1arlos s\u00f3lo con XML, esto no siempre es factible. Las herramientas premium como Adobe Illustrator pueden ser caras.<\/li>\n<li>Los SVG no son tan f\u00e1ciles de incrustar como los PNG. Si utilizas WordPress, la <a href=\"https:\/\/kinsta.com\/es\/blog\/biblioteca-multimedia-wordpress\/\">biblioteca multimedia<\/a> por defecto no los admite, por lo que necesitar\u00e1s un plugin para poder subirlos.<\/li>\n<li>Los SVG deben ser renderizados por el navegador cuando se carga la p\u00e1gina, por lo que utilizar un exceso de ellos o un archivo grande con muchos vectores puede poner a prueba el dispositivo.<\/li>\n<\/ul>\n<h3>Cu\u00e1ndo usar SVG en lugar de PNG<\/h3>\n<p>Aunque definitivamente no deber\u00edas convertir todos tus PNG en SVG, los gr\u00e1ficos vectoriales pueden ser un excelente sustituto de algunas im\u00e1genes.<\/p>\n<p>Las im\u00e1genes SVG funcionan excepcionalmente para gr\u00e1ficos decorativos de sitios web, logotipos, iconos, gr\u00e1ficos y diagramas, y otras im\u00e1genes sencillas. Consulta <a href=\"https:\/\/kinsta.com\/es\/\" rel=\"noopener\">nuestra p\u00e1gina de inicio<\/a> para ver un excelente ejemplo de arte vectorial en acci\u00f3n.<\/p>\n<figure id=\"attachment_108841\" aria-describedby=\"caption-attachment-108841\" style=\"width: 1347px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-108841 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/svg-animation.png\" alt=\"svg animation on the Kinsta homepage\" width=\"1347\" height=\"490\"><figcaption id=\"caption-attachment-108841\" class=\"wp-caption-text\">La p\u00e1gina de inicio de Kinsta.<\/figcaption><\/figure>\n<p>Sin embargo, no funcionan tan bien con im\u00e1genes complejas que implican muchos colores y formas, como capturas de pantalla, <a href=\"https:\/\/kinsta.com\/es\/blog\/sitios-web-fotografia\/\">fotograf\u00edas<\/a> e incluso obras de arte detalladas. Aunque es posible convertir cualquier imagen en SVG, los navegadores no siempre manejan bien los vectores complejos con cientos de colores, ya que tienen que renderizarse cuando se carga la p\u00e1gina.<\/p>\n<p>Adem\u00e1s, las ilustraciones SVG pueden ser hermosas, pero el dise\u00f1o de im\u00e1genes complejas requiere mucho tiempo, esfuerzo y dominio de herramientas de edici\u00f3n avanzadas. Mant\u00e9n la sencillez si quieres crear tus im\u00e1genes vectoriales.<\/p>\n<p>Si tienes im\u00e1genes detalladas, qu\u00e9date definitivamente con PNG.<\/p>\n<p>Sin embargo, los SVG son mejores para el dise\u00f1o web responsive y retina-ready debido a su escalabilidad y falta de degradaci\u00f3n de la calidad. Adem\u00e1s, admiten la animaci\u00f3n mientras que el PNG no, y los tipos de archivos de trama que admiten la animaci\u00f3n como el GIF, el APNG y el <a href=\"https:\/\/kinsta.com\/es\/blog\/webp\/\">WebP<\/a> tienen todos sus problemas.<\/p>\n<p>Para gr\u00e1ficos sencillos que puedan requerir animaci\u00f3n y que tengan la garant\u00eda de escalar bien en cualquier tama\u00f1o de pantalla, utiliza SVG.<\/p>\n<h2>\u00bfQu\u00e9 es PNG?<\/h2>\n<p>PNG son las siglas de Portable Network Graphics, y este nombre se refleja en lo extendido que est\u00e1 este tipo de archivo. Cualquiera que haya utilizado alguna vez un ordenador probablemente haya trabajado con PNG, ya que es el tipo de archivo m\u00e1s com\u00fan en Internet junto al <a href=\"https:\/\/kinsta.com\/es\/blog\/jpg-vs-jpeg\/\" rel=\"noopener\">JPEG<\/a>.<\/p>\n<p>El PNG es un tipo de archivo de imagen de trama, similar a los formatos de imagen m\u00e1s comunes. Eso significa que est\u00e1 formado por p\u00edxeles, los mismos peque\u00f1os puntos que se muestran en tu monitor o pantalla. Aunque esto facilita su visualizaci\u00f3n, tambi\u00e9n significa que la calidad de la imagen depende de la resoluci\u00f3n, es decir, de cu\u00e1ntos p\u00edxeles tenga la imagen.<\/p>\n<p>As\u00ed que si aumentas o reduces el tama\u00f1o de una imagen rasterizada, la calidad se ver\u00e1 afectada. A veces el da\u00f1o es insignificante, especialmente cuando se reduce la escala, y a veces puede hacer que una imagen sea borrosa y completamente inutilizable.<\/p>\n<figure id=\"attachment_108842\" aria-describedby=\"caption-attachment-108842\" style=\"width: 1509px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-108842\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/zoomed-in-png.png\" alt=\"zoomed in png\" width=\"1509\" height=\"729\"><figcaption id=\"caption-attachment-108842\" class=\"wp-caption-text\">Ejemplo de un PNG ampliado.<\/figcaption><\/figure>\n<p>Aun as\u00ed, la prevalencia del PNG lo convierte en un buen candidato para el uso general. Este tipo de archivo admite la transparencia, pero no la animaci\u00f3n.<\/p>\n<h3>Ventajas y desventajas de PNG<\/h3>\n<p>\u00bfQu\u00e9 hace que el PNG sea el formato de archivo de imagen m\u00e1s utilizado en Internet? Estas son las ventajas:<\/p>\n<ul>\n<li>Los archivos PNG son f\u00e1cilmente editables y se abren en cualquier herramienta com\u00fan de edici\u00f3n de im\u00e1genes. No es necesario pagar por programas avanzados para crear o modificar una imagen PNG; como mucho, puedes necesitar descargar un editor gratuito como GIMP.<\/li>\n<li>Ya sea que codifiques desde cero o utilices el gestor de medios de WordPress, mostrar im\u00e1genes PNG en tu sitio es una tarea sencilla.<\/li>\n<li>El PNG utiliza <a href=\"https:\/\/kinsta.com\/es\/blog\/optimizar-imagenes-para-la-web\/\" target=\"_blank\" rel=\"noopener noreferrer\">una compresi\u00f3n sin p\u00e9rdidas<\/a> que le da un aspecto m\u00e1s n\u00edtido que los JPEG de compresi\u00f3n con p\u00e9rdidas. Sin embargo, esto tiene un coste de tama\u00f1o de archivo mayor, y no se puede comparar con las im\u00e1genes vectoriales.<\/li>\n<\/ul>\n<p>Por otro lado, el formato PNG se cre\u00f3 hace d\u00e9cadas y tiene varios defectos notables que no se han actualizado para la era moderna.<\/p>\n<ul>\n<li>No puedes cambiar el tama\u00f1o de los archivos PNG sin perder calidad. Tienes que planificar con cuidado cuando dise\u00f1es gr\u00e1ficos rasterizados y asegurarte de que tienen el <a href=\"https:\/\/kinsta.com\/es\/blog\/tamanos-imagenes-wordpress\/\" rel=\"noopener\">tama\u00f1o adecuado<\/a>, o puedes acabar perdiendo el tiempo haciendo im\u00e1genes inservibles.<\/li>\n<li>Los PNG son muy grandes debido a su compresi\u00f3n sin p\u00e9rdidas. Por tanto, pueden ralentizar tu sitio web. Para solucionarlo hay que comprimirlo a\u00fan m\u00e1s y da\u00f1ar la calidad.<\/li>\n<li>Hacer que las im\u00e1genes est\u00e9n \u00ablistas para la retina\u00bb es m\u00e1s tedioso con los PNG y es m\u00e1s probable que provoquen borrosidad.<\/li>\n<li>El PNG no admite la animaci\u00f3n. Otros tipos de archivos rasterizados animados, como los GIF, pueden tener graves problemas; por ejemplo, los GIF son de muy baja calidad y s\u00f3lo admiten 256 colores.<\/li>\n<\/ul>\n<h3>Cu\u00e1ndo usar PNG en lugar de SVG<\/h3>\n<p>El PNG es el tipo de archivo m\u00e1s com\u00fan por una raz\u00f3n: es muy vers\u00e1til y se adapta a casi cualquier situaci\u00f3n. S\u00f3lo hay que tener en cuenta algunos defectos al utilizarlo, como su gran tama\u00f1o de archivo y su falta de escalabilidad.<\/p>\n<p>Los PNG son adecuados para mostrar im\u00e1genes detalladas, obras de arte y fotograf\u00edas, todo lo que una imagen vectorial no puede manejar. Cualquier cosa con cientos de colores y una gran resoluci\u00f3n deber\u00eda ser un PNG.<\/p>\n<p>Eso no quiere decir que no puedas utilizar los PNG para im\u00e1genes m\u00e1s sencillas, como logotipos y gr\u00e1ficos decorativos, pero los SVG ser\u00edan m\u00e1s adecuados para esa tarea.<\/p>\n<p>Cuando no est\u00e9s seguro de si una plataforma manejar\u00e1 el nuevo tipo de archivo SVG, menos compatible, el PNG es el camino a seguir, aunque s\u00f3lo sea por seguridad.<\/p>\n<p>Por ejemplo, no puedes subir SVG a la mayor\u00eda de las <a href=\"https:\/\/kinsta.com\/es\/blog\/tamano-imagen-red-social\/\" rel=\"noopener\">redes sociales<\/a>. Y como algunos clientes de correo electr\u00f3nico pueden tener problemas con los vectores, normalmente se recomienda utilizar PNG en las plantillas de correo electr\u00f3nico.<\/p>\n<p>En general, los PNG funcionan bien con cualquier imagen compleja y no animada, especialmente las que requieren transparencia. Puedes utilizarlo pr\u00e1cticamente en cualquier sitio; s\u00f3lo que a veces un SVG ser\u00eda m\u00e1s adecuado.<\/p>\n<p>Recuerda que siempre puedes utilizar los <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-svg-fallbacks\/\" target=\"_blank\" rel=\"noopener noreferrer\">fallbacks PNG<\/a> si tu SVG no se carga, por lo que normalmente es seguro optar por los vectores incluso si una parte importante de tu base de usuarios se ha quedado con dispositivos o navegadores antiguos.<\/p>\n<h2>\u00bfCu\u00e1l es mejor: SVG o PNG?<\/h2>\n<p>Ning\u00fan tipo de archivo es mejor o peor que el otro; cada uno tiene sus limitaciones. Aunque el SVG supera al PNG en varias \u00e1reas, el PNG es mucho mejor para manejar ciertas cosas.<\/p>\n<p>En general, sin embargo, deber\u00edas utilizar SVG siempre que sea apropiado y usar PNG en todas las dem\u00e1s situaciones que los vectores no puedan manejar. T\u00e9cnicamente puedes utilizar cualquiera de los dos en estos casos, pero el SVG es preferible en algunas \u00e1reas espec\u00edficas.<\/p>\n<p>Mientras que el SVG admite la animaci\u00f3n, el PNG no. Los tipos de archivos de trama como GIF y APNG pueden considerarse alternativas. Sin embargo, no existe un formato de trama animada perfecto que sea ampliamente compatible, bien conocido, de alta calidad y que d\u00e9 lugar a archivos de peque\u00f1o tama\u00f1o. Los SVG satisfacen todos estos nichos.<\/p>\n<p>Adem\u00e1s, los SVG <a href=\"https:\/\/kinsta.com\/es\/blog\/diseno-de-paginas-web-sensibles\/\">se adaptan perfectamente a cualquier tama\u00f1o de pantalla<\/a>, por lo que son responsivos y est\u00e1n preparados para retina por defecto. Los PNG pierden calidad cuando se cambian de tama\u00f1o, y conseguir que se escalen bien es bastante dif\u00edcil, especialmente si s\u00f3lo tienes im\u00e1genes diminutas que no se mostrar\u00e1n bien en pantallas grandes.<\/p>\n<p>Por \u00faltimo, los SVG suelen ser m\u00e1s peque\u00f1os que los PNG, por lo que suponen una menor carga para tu servidor a pesar de tener que renderizarlos en la carga.<\/p>\n<p>Util\u00edzalos para ilustraciones simples y planas en color, logotipos y gr\u00e1ficos decorativos en tu sitio.<\/p>\n<p>Por otro lado, los PNG son adecuados para mostrar gr\u00e1ficos complejos a gran resoluci\u00f3n, o im\u00e1genes con miles de colores. Los SVG no pueden manejar esa cantidad de colores y formas por el momento.<\/p>\n<p>Este tipo de im\u00e1genes complejas constituir\u00e1n a menudo la mayor\u00eda de las im\u00e1genes de tu sitio, por lo que no es el momento de descartar todav\u00eda el PNG.<\/p>\n<p>Adem\u00e1s, los PNG son m\u00e1s compatibles con los navegadores y plataformas espec\u00edficas, como <a href=\"https:\/\/kinsta.com\/es\/secciones\/consejos-email-marketing\/\">los clientes de correo electr\u00f3nico<\/a>. Si no est\u00e1s seguro de si un SVG se renderizar\u00e1 correctamente, peca de precavido y utiliza un PNG.<\/p>\n\n<h2>Resumen<\/h2>\n<p>SVG y PNG son dos formatos de archivo muy diferentes. Al final, no es un gran problema si usas PNG o JPEG en tu sitio web fuera de casos de uso muy especializados, pero elegir entre SVG y PNG es una elecci\u00f3n mucho m\u00e1s importante.<\/p>\n<p>Es mucho m\u00e1s probable que utilices PNG, ya que es un formato de archivo m\u00e1s sencillo, de m\u00e1s f\u00e1cil acceso y m\u00e1s vers\u00e1til. Las im\u00e1genes complejas, como las capturas de pantalla y las ilustraciones detalladas, deber\u00edan utilizar PNG.<\/p>\n<p>Aunque los SVG son m\u00e1s dif\u00edciles de crear y editar, tienen una serie de ventajas sobre los PNG. Siempre que sea apropiado utilizar im\u00e1genes vectoriales, como gr\u00e1ficos decorativos y logotipos, utiliza definitivamente SVG.<\/p>\n<p>No es probable que cambies todas las im\u00e1genes de tu sitio por un SVG, pero su capacidad de respuesta y su menor tama\u00f1o de archivo los convierten en un gran candidato en determinadas situaciones.<\/p>\n<p><em>\u00bfEres de los que usan SVG o PNG? Comparte tu opini\u00f3n con nuestra comunidad en los comentarios de abajo<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Existen docenas de tipos de archivos de imagen, cada uno de los cuales var\u00eda en funci\u00f3n del tipo de compresi\u00f3n, el formato y la compatibilidad con &#8230;<\/p>\n","protected":false},"author":117,"featured_media":46356,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[913,369],"topic":[1292],"class_list":["post-46355","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-compression","tag-image-optimization","topic-optimizacion-de-imagenes"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>SVG vs PNG: \u00bfCu\u00e1les Son las Diferencias y Cu\u00e1ndo Utilizarlas?<\/title>\n<meta name=\"description\" content=\"\u00bfQu\u00e9 formato es mejor para las im\u00e1genes de tu sitio web? \u00bfSVG o PNG? Hoy analizamos los pros y los contras de cada formato de imagen para que no tengas que hacerlo.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SVG vs PNG: \u00bfCu\u00e1les Son las Diferencias y Cu\u00e1ndo Utilizarlas?\" \/>\n<meta property=\"og:description\" content=\"\u00bfQu\u00e9 formato es mejor para las im\u00e1genes de tu sitio web? \u00bfSVG o PNG? Hoy analizamos los pros y los contras de cada formato de imagen para que no tengas que hacerlo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-24T08:22:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-21T12:36:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/12\/svg-vs-png.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"\u00bfQu\u00e9 formato es mejor para las im\u00e1genes de tu sitio web? \u00bfSVG o PNG? Hoy analizamos los pros y los contras de cada formato de imagen para que no tengas que hacerlo.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/12\/svg-vs-png.png\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"SVG vs PNG: \u00bfCu\u00e1les Son las Diferencias y Cu\u00e1ndo Utilizarlas?\",\"datePublished\":\"2022-01-24T08:22:30+00:00\",\"dateModified\":\"2023-08-21T12:36:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/\"},\"wordCount\":2610,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/12\/svg-vs-png.png\",\"keywords\":[\"compression\",\"image optimization\"],\"articleSection\":[\"Desarrollo de Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/\",\"name\":\"SVG vs PNG: \u00bfCu\u00e1les Son las Diferencias y Cu\u00e1ndo Utilizarlas?\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/12\/svg-vs-png.png\",\"datePublished\":\"2022-01-24T08:22:30+00:00\",\"dateModified\":\"2023-08-21T12:36:53+00:00\",\"description\":\"\u00bfQu\u00e9 formato es mejor para las im\u00e1genes de tu sitio web? \u00bfSVG o PNG? Hoy analizamos los pros y los contras de cada formato de imagen para que no tengas que hacerlo.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/12\/svg-vs-png.png\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/12\/svg-vs-png.png\",\"width\":1460,\"height\":730,\"caption\":\"SVG vs PNG: \u00bfCu\u00e1les son las diferencias y cu\u00e1ndo usarlas?\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Optimizaci\u00f3n de Im\u00e1genes\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/optimizacion-de-imagenes\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"SVG vs PNG: \u00bfCu\u00e1les Son las Diferencias y Cu\u00e1ndo Utilizarlas?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"SVG vs PNG: \u00bfCu\u00e1les Son las Diferencias y Cu\u00e1ndo Utilizarlas?","description":"\u00bfQu\u00e9 formato es mejor para las im\u00e1genes de tu sitio web? \u00bfSVG o PNG? Hoy analizamos los pros y los contras de cada formato de imagen para que no tengas que hacerlo.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/","og_locale":"es_ES","og_type":"article","og_title":"SVG vs PNG: \u00bfCu\u00e1les Son las Diferencias y Cu\u00e1ndo Utilizarlas?","og_description":"\u00bfQu\u00e9 formato es mejor para las im\u00e1genes de tu sitio web? \u00bfSVG o PNG? Hoy analizamos los pros y los contras de cada formato de imagen para que no tengas que hacerlo.","og_url":"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2022-01-24T08:22:30+00:00","article_modified_time":"2023-08-21T12:36:53+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/12\/svg-vs-png.png","type":"image\/png"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"\u00bfQu\u00e9 formato es mejor para las im\u00e1genes de tu sitio web? \u00bfSVG o PNG? Hoy analizamos los pros y los contras de cada formato de imagen para que no tengas que hacerlo.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/12\/svg-vs-png.png","twitter_creator":"@salmanravoof","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Salman Ravoof","Tiempo de lectura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"SVG vs PNG: \u00bfCu\u00e1les Son las Diferencias y Cu\u00e1ndo Utilizarlas?","datePublished":"2022-01-24T08:22:30+00:00","dateModified":"2023-08-21T12:36:53+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/"},"wordCount":2610,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/12\/svg-vs-png.png","keywords":["compression","image optimization"],"articleSection":["Desarrollo de Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/","url":"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/","name":"SVG vs PNG: \u00bfCu\u00e1les Son las Diferencias y Cu\u00e1ndo Utilizarlas?","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/12\/svg-vs-png.png","datePublished":"2022-01-24T08:22:30+00:00","dateModified":"2023-08-21T12:36:53+00:00","description":"\u00bfQu\u00e9 formato es mejor para las im\u00e1genes de tu sitio web? \u00bfSVG o PNG? Hoy analizamos los pros y los contras de cada formato de imagen para que no tengas que hacerlo.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/12\/svg-vs-png.png","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/12\/svg-vs-png.png","width":1460,"height":730,"caption":"SVG vs PNG: \u00bfCu\u00e1les son las diferencias y cu\u00e1ndo usarlas?"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/svg-vs-png\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Optimizaci\u00f3n de Im\u00e1genes","item":"https:\/\/kinsta.com\/es\/secciones\/optimizacion-de-imagenes\/"},{"@type":"ListItem","position":3,"name":"SVG vs PNG: \u00bfCu\u00e1les Son las Diferencias y Cu\u00e1ndo Utilizarlas?"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/46355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=46355"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/46355\/revisions"}],"predecessor-version":[{"id":78378,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/46355\/revisions\/78378"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/46355\/translations\/en"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/46355\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/46355\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/46355\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/46355\/translations\/es"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/46355\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/46355\/translations\/jp"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/46355\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/46356"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=46355"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=46355"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=46355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}