El mismo logotipo puede medir 24 píxeles de alto en la navegación web y ampliarse a dos metros de ancho en el panel de una feria. Para elegir entre PNG y SVG, mira primero el escenario: en webs e interfaces de producto prima el SVG, con el símbolo registrado como trazados y redibujado por el software a cualquier tamaño; a las entradas que solo aceptan mapas de bits (avatar de redes sociales, ciertos documentos de oficina) entrégales un PNG transparente; en pósters, rótulos y material impreso usa SVG o un archivo vectorial exportado de él, que no pierde nitidez al ampliarse. Si de momento solo tienes un PNG, no hace falta rehacerlo todo: confirma primero el formato que pide cada escenario y repón después el que falte.
Puntos clave
- Para web, interfaces y usos que exigen escalar y recolorear una y otra vez, SVG: el gráfico se registra como trazados, se redibuja al ampliar y los bordes no pierden nitidez.
- Para las entradas que solo aceptan subidas de mapas de bits (avatar de redes sociales, parte del software ofimático) usa PNG transparente; no insistas en que la plataforma admita SVG.
- El logotipo gráfico y el logotipo tipográfico merecen un archivo maestro SVG; la mascota fotográfica y las imágenes de marca con texturas complejas se quedan en PNG de alta resolución.
- El SVG no siempre pesa menos que el PNG: el tamaño depende de la complejidad del gráfico; elige por uso, no por peso.
Empieza a elegir por tres escenarios de uso
Las tres tareas de entrega más comunes cubren casi todos los destinos de un archivo de logotipo.
Símbolo de navegación web. El logotipo de la barra de navegación, del pie de página o de la interfaz móvil se muestra a distintos tamaños y densidades de pantalla. El SVG encaja aquí de maravilla: el navegador dibuja los trazados en vivo y mantiene la nitidez desde el ancho de un icono hasta el gran banner del pie; para cambiar el color basta con tocar el archivo o el código, y el mismo archivo se entrega intacto al diseñador para seguir editándolo.
Avatar de redes sociales en tamaño pequeño. Las entradas de avatar suelen aceptar solo JPG y PNG; basta con preparar un PNG de fondo transparente: cuando la plataforma recorte el avatar en círculo o cuadrado, no aparecerá un bloque blanco alrededor del símbolo. El tamaño de visualización del avatar es limitado, la nitidez del mapa de bits sobra, y este escenario no necesita SVG.
Póster y material impreso en gran formato. Pósters, banners enrollables y rótulos de fachada amplían el símbolo decenas de veces. El SVG resuelve el escalado de raíz: los trazados son independientes de la resolución y el tamaño final lo decide el momento de uso. Con solo un PNG pequeño, la ampliación directa trae borrosidad y bordes dentados; este escenario es el que de verdad exige un archivo vectorial.
Dónde se nota la diferencia entre PNG y SVG
La diferencia de fondo entre ambos formatos es cómo registran el gráfico. El PNG usa una rejilla de píxeles: cada punto guarda un color y, por grande que sea el archivo, el total de píxeles es fijo; al ampliar más allá de esos píxeles, el software solo puede estirar los existentes para rellenar, y los bordes se difuminan y se dentan. El SVG describe el gráfico con trazados y formas: por dónde empieza la línea, cómo se curva, de qué color se rellena cada zona; al ampliar, el software redibuja según esa descripción y los bordes siguen suaves.
Ambos admiten fondo transparente, cada uno a su manera. El PNG conserva el recorte alrededor del símbolo con un canal de píxeles transparentes; el SVG no tiene «fondo» por naturaleza: el gráfico es ya un conjunto de trazados. La edición posterior marca aún más la frontera: un SVG se abre, se recolorea entero, se le ajustan las anclas, se descompone y se recompone; un PNG solo puede retocarse píxel a píxel, y cambiar un color implica reparar zonas en un editor de mapas de bits.
El peso del archivo se malinterpreta a menudo. Con un gráfico simple, el SVG solo registra unos pocos trazados y suele ser pequeño; un mapa de bits con degradados ricos y grano evidente, convertido a SVG, se rompe en una multitud de trazados fragmentarios y puede pesar mucho más que el PNG original. «El SVG pesa menos» no se sostiene; lo que se sostiene es «el SVG de un gráfico simple es pequeño».
Una tabla de escenarios y elección de formato
El tipo de material decide más que cualquier parámetro del formato. Recomendaciones por los tres gráficos de marca habituales:
| Tipo de material | Rasgos del gráfico | Recomendación | Motivo |
|---|---|---|---|
| Logotipo gráfico, logotipo tipográfico | Bordes nítidos, colores planos y contados | Archivo maestro SVG y, aparte, PNG transparente | Trazados limpios y editables; el SVG cubre el escalado y el PNG respalda las entradas sin SVG |
| Mascota fotográfica | Degradados continuos, sombras ricas | Conservar PNG de alta resolución | La vectorización la rompe en multitud de trazados fragmentarios, difícil de editar, y pierde el sentido del escalado libre que dan unos pocos trazados |
| Imagen de marca con texturas complejas | Muchos detalles, grano marcado | Mapa de bits como base, vectorizar solo zonas según convenga | La conversión entera rara vez compensa; para tamaños mayores, exporta primero un mapa de bits de mayor resolución |
Basta una regla: cuanto más nítidos los bordes y menos colores planos, más merece la pena vectorizar; cuanto más fotográfica la imagen, más le conviene quedarse en formato de mapa de bits.
Cómo conseguir el SVG cuando solo tienes el PNG
Confirmado que necesitas SVG, la conversión es solo un tramo del asunto. Sube ese PNG a imagen a vector: la herramienta acepta PNG, JPG y WebP, con ancho y alto de al menos 256 píxeles; con sesión iniciada se convierte una imagen por vez y, al terminar, se descarga el archivo SVG. Las capturas de cada paso —subir, revisar, descargar— están en el tutorial de la misma serie «Cómo convertir PNG y JPG a SVG», que no repetimos aquí.
Terminada la conversión, el resultado se ordena igualmente por uso. El panel ofrece ampliaciones de 1×, 2× y 4×; antes de entregar, fíjate sobre todo en la limpieza de curvas, huecos y líneas finas. Dos cosas conviene aceptar de antemano: el texto se convierte en trazados de contorno, la conversión no devuelve la fuente original editable, y cambiar la frase exige reescribirla en la herramienta de diseño; la calidad del borde la fija la imagen original —un PNG muy comprimido produce bordes ásperos, cámbialo por una original más nítida antes de convertir—, y ese arreglo de la imagen de origen se trata a fondo en «Qué hacer si el logotipo queda con bordes ásperos tras vectorizarlo».
Cómo montar un paquete de entrega de archivos de marca
Fijados los formatos, organiza el logotipo en un conjunto de archivos con nombre, para no andar pidiendo y reenviando con cada entrega. Un paquete mínimo funcional se ve así:
| Archivo | Uso | Ejemplo de nombre |
|---|---|---|
| Archivo maestro SVG | La única fuente para web, material, ampliaciones y ediciones futuras | acme-logo.svg |
| PNG transparente | Avatar de redes sociales, documentos de oficina y demás entradas que solo aceptan mapas de bits | acme-logo-transparent.png |
| Vista previa sobre fondo oscuro | Comprobar la legibilidad del símbolo sobre fondos oscuros | acme-logo-preview-dark.png |
| Vista previa sobre fondo claro | Comprobar cómo se ve el símbolo sobre fondos claros | acme-logo-preview-light.png |
Nombra con un prefijo común y un sufijo de uso, actualiza el número de versión cuando cambie y no crees nombres nuevos copiando; de lo contrario, el paquete acabará con un logo-final-2.png conviviendo con un logo-version-final.png. Las vistas previas oscura y clara convienen en el mismo directorio: quien recibe confirma de un vistazo si el símbolo sirve sobre ambos fondos.
Los archivos de imprenta se tratan aparte. Si el impresor pide PDF vectorial, un modo de color concreto o medidas de sangrado, esos archivos de producción los maneja el flujo de diseño correspondiente: con el SVG como fuente, la conversión y exportación se hacen en el software de diseño y el estándar de color se confirma con el impresor punto por punto. La salida de la herramienta de imagen a vector es un archivo SVG, no genera directamente archivos de producción para imprenta.
Preguntas frecuentes
¿El SVG pesa siempre menos que el PNG?
No siempre; el tamaño depende de la complejidad del contenido. El SVG de un gráfico simple registra pocos trazados y suele ser pequeño; un mapa de bits rico en degradados, sombras y grano genera al vectorizarse una multitud de trazados fragmentarios y puede pesar más. El formato se elige por uso y necesidad de escalado, no por peso.
Si el PNG se ve borroso al ampliarlo, ¿hay que vectorizarlo sí o sí?
Depende del futuro de ese logotipo. Para una ampliación puntual basta reexportar un PNG de mayor resolución; el SVG merece la pena cuando habrá escalados constantes, recoloreo integral, impresión o un archivo maestro de marca a largo plazo. Un logotipo fotográfico, aun convertido, acaba en trazados fragmentarios difíciles de editar: mantener el mapa de bits en alta resolución es más práctico.
¿Qué hago si el impresor pide PDF?
Pasa la petición concreta del impresor al flujo de diseño correspondiente: coloca el archivo maestro SVG en el software de diseño, exporta el tipo de PDF que indiquen y confirma uno a uno modo de color, sangrado y demás parámetros. La herramienta de imagen a vector entrega SVG; el PDF de producción para imprenta se completa en la fase de diseño.
Si solo tienes PNG, repón primero un SVG
Empieza por lo que falte en el paquete: si solo tienes la versión PNG, repón primero un SVG con imagen a vector, ponlo en las vistas previas sobre fondo oscuro y claro para revisarlo, y decide después si puede ser el archivo maestro. Dado este paso, los tres escenarios —web, avatar y póster— ya tienen su archivo en el formato que corresponde.
