# SVG o PNG: vector o píxeles para logotipos y gráficos [Canonical HTML page](https://gradiently.design/es/guide/svg-vs-png) Un SVG es un conjunto de instrucciones de dibujo. Un PNG es una cuadrícula fija de puntos. Esa única diferencia decide qué archivo va en tu web, en tu packaging y en tu Instagram. ## The short version - SVG es un formato vectorial que describe formas con matemáticas, así que se mantiene perfectamente nítido a cualquier tamaño. - PNG es un formato de mapa de bits hecho de una cuadrícula fija de píxeles, así que se ve borroso o pixelado cuando se amplía por encima de su tamaño. - Usa SVG para logotipos, iconos, ilustraciones sencillas y gráficos de interfaz en webs e impresión. - Usa PNG para fotografías, texturas, ilustraciones complejas y todo lo que subas a redes sociales, que no aceptan SVG. - Un buen kit de logotipo contiene los dos: un SVG maestro y exportaciones PNG a los tamaños que necesita cada sitio. **SVG o PNG** es en realidad vector contra píxeles. Un archivo SVG guarda las formas como instrucciones (dibuja aquí un círculo, rellénalo de este color), así que un navegador o una impresora lo redibuja nítido a cualquier tamaño, desde un favicon de 16 píxeles hasta el rótulo de una tienda. Un PNG guarda una cuadrícula fija de píxeles de color, así que se ve perfecto a su tamaño y borroso cuando lo amplías. Usa SVG para logotipos, iconos y gráficos sencillos en la web y en impresión. Usa PNG para fotos, ilustraciones con textura y todo lo que subas a redes sociales. ## Qué es en realidad un archivo SVG SVG significa Scalable Vector Graphics, y es texto plano. Ábrelo en un editor de código y verás un marcado legible, no ruido. Por eso los SVG pesan muy poco en formas sencillas, por eso puedes cambiarles el color con CSS y por eso los buscadores y los lectores de pantalla pueden leer el texto que contienen. ```html ``` Un símbolo de logotipo completo en unos cientos de bytes. El `viewBox` fija el sistema de coordenadas del dibujo; el tamaño al que se muestra lo decide la página. Un PNG del mismo símbolo necesita un archivo distinto para cada tamaño en que quieras que se vea nítido, y ninguno se puede cambiar de color sin volver a exportarlo. La [documentación de SVG de MDN](https://developer.mozilla.org/en-US/docs/Web/SVG) cubre el formato al completo. ## SVG y PNG frente a frente | Propiedad | SVG | PNG | | --- | --- | --- | | Tipo | Vectorial: formas y trazados | Mapa de bits: una cuadrícula de píxeles | | Escalado | Nítido a cualquier tamaño | Nítido a su tamaño, borroso al ampliarlo | | Transparencia | Sí | Sí, canal alfa completo | | Fotos y texturas | Mal: los archivos se vuelven enormes o imposibles | Excelente | | Editable con código | Sí: colores, animación, CSS | No | | Subida a redes sociales | No se acepta | Se acepta en todas partes | | Peso típico, logotipo sencillo | De 1 a 10 KB | De 10 a 100 KB por tamaño | ## ¿SVG o PNG para un logotipo? Guarda el logotipo maestro en SVG. Es el único archivo que sirve para cualquier uso futuro: la cabecera de una web, una pancarta de 4 metros, un bordado, un papel con membrete, un favicon. Después exporta PNG a partir de él para los sitios que no aceptan vectores, sobre todo redes sociales, firmas de correo y algunas herramientas de presentaciones. | Dónde va el logotipo | Archivo | Tamaño | | --- | --- | --- | | Cabecera y pie de la web | SVG | Se adapta al espacio | | Favicon | SVG más PNG de respaldo | ICO a 32×32, PNG a 180×180, 192×192 y 512×512 | | Foto de perfil de Instagram, LinkedIn o X | PNG | Cuadrado de 1080×1080, con el símbolo dentro del círculo central | | Firma de correo | PNG | Hasta 600×200, exportado al doble del tamaño de visualización | | Imprenta, rotulista, merchandising | SVG o PDF | Vectorial, cualquier tamaño | Un SVG maestro y un puñado de exportaciones PNG. [Tamaños de logotipo](https://gradiently.design/es/guide/logo-sizes) y [variaciones de logotipo](https://gradiently.design/es/guide/logo-variations) profundizan más. Una foto de perfil cuadrada con un logotipo tipográfico sencillo centrado sobre un fondo degradado Las fotos de perfil siempre son PNG o JPG. Exporta el logotipo grande, a 1080×1080, para que se vea nítido en pantallas de alta densidad. ## Cuándo PNG es la elección correcta Lo vectorial solo funciona cuando la imagen se puede describir como formas. En cuanto una imagen tiene detalle fotográfico, luz suave, grano o miles de cambios sutiles de color, un PNG pesa menos y es más fiel. Vectorizar una foto en un SVG produce un archivo más pesado y peor a la vez. - Fotografías y collages de fotos. - Ilustraciones con textura: grano, papel, pinceladas, efectos de película. - Publicaciones, historias y carruseles para redes, ya que las plataformas solo aceptan píxeles. - Capturas de pantalla y todo lo que se capture de una pantalla. - Fondos ricos con capas de luz y ruido. Un gráfico cuadrado con la palabra Vector, que representa formas planas adecuadas para SVG Formas planas, bordes limpios, pocos colores: territorio ideal para SVG. Un gráfico cuadrado con la palabra Píxeles sobre un degradado con textura, que representa ilustraciones adecuadas para PNG El grano, la luz suave y la textura de material van en un PNG. ## ¿SVG o PNG para una web? En una web, usa SVG en línea o un archivo SVG para logotipos, iconos e ilustraciones, y formatos modernos para las fotos. Los iconos SVG escalan con el texto, pueden usar `currentColor` para seguir tu tema y no necesitan archivos aparte para pantallas de alta densidad. Para imágenes de mapa de bits, [WebP](https://gradiently.design/es/guide/webp-images) suele ser mejor opción que PNG en tus propias páginas. ### Evita - Un logotipo PNG estirado para llenar una cabecera ancha - Una foto vectorizada en un SVG enorme - Subir archivos SVG que no has hecho tú sin sanearlos - Iconos en PNG que necesitan copias 1x, 2x y 3x ### Haz - Logotipo SVG con un ancho fijado en CSS - Fotos en WebP o JPG al tamaño en que se muestran - Trata los SVG subidos por usuarios como código, porque pueden contener scripts - Iconos SVG con `fill: currentColor` > **Un SVG puede llevar código** Como SVG es marcado, un archivo de origen desconocido puede incluir scripts. Permite subir SVG a tu web solo si se sanean, o conviértelos a PNG al subirlos. ## Cómo convertir SVG a PNG 1. **Decide el tamaño más grande que necesitas** Una foto de perfil a 1080×1080 o una firma de correo a 1200×400 (el doble de su tamaño de visualización de 600×200). Exporta una vez a ese tamaño en lugar de ampliar después. 2. **Exporta desde el original** En Figma, Illustrator o Inkscape, exporta el marco como PNG al tamaño elegido. Exportar desde el vector mantiene nítidos todos los bordes. 3. **Mantén la transparencia activada** Deja el fondo vacío para que el PNG tenga canal alfa. Consulta [fondo transparente](https://gradiently.design/es/guide/transparent-background) para comprobarlo. 4. **Revísalo al 100%** Mira los trazos finos y el texto pequeño a tamaño real. Si se rompen, simplifica el logotipo para los usos pequeños en lugar de entregar un archivo emborronado. Ir en sentido contrario, de PNG a SVG, no es una conversión sino un redibujo. La vectorización automática funciona con un logotipo plano y contundente y falla con cualquier cosa con textura o bordes suaves. Si tu logotipo solo existe como PNG, haz que lo redibujen una vez en vectorial; todos los archivos posteriores serán mejores. Las exportaciones Pro de Gradiently cubren los dos lados: un diseño puede salir como SVG para la web y la impresión, o como PNG transparente para las plataformas, desde el mismo archivo. [Exportar SVG y PNG transparente](https://gradiently.design/es/guide/export-svg-transparent-png) muestra cómo, y [PNG o JPG](https://gradiently.design/es/guide/png-vs-jpeg) resuelve la otra elección habitual. ## FAQ ### ¿Es mejor SVG que PNG para un logotipo? Para el archivo maestro, sí: un logotipo SVG se mantiene nítido a cualquier tamaño y se puede cambiar de color. Exporta copias PNG para redes sociales y correo, que no aceptan SVG. ### ¿Puedo subir un SVG a Instagram? No. Instagram y otras redes sociales aceptan PNG, JPG y vídeo. Exporta un PNG al tamaño de la plataforma, como 1080×1080 para una publicación cuadrada. ### ¿Un SVG pesa menos que un PNG? Para formas sencillas como logotipos e iconos, un SVG suele pesar mucho menos. Para fotos e imágenes con textura, un PNG o un JPG pesa menos y es más preciso. ### ¿SVG admite transparencia? Sí. Todo lo que no está dibujado en un SVG es transparente, así que queda limpio sobre cualquier fondo. ### ¿Puedo convertir un logotipo PNG a SVG? Solo vectorizándolo o redibujándolo. La vectorización automática funciona con logotipos planos y contundentes; los logotipos detallados o con textura hay que redibujarlos a mano como vectores.