JPG, PNG, SVG o PDF: ¿qué formato necesitas para tu logotipo?

Un logotipo puede aparecer en una tarjeta de visita, en la cabecera de una web o en un rótulo de varios metros. El diseño es el mismo, pero cada aplicación requiere un archivo con unas características concretas. De aquí vienen las diferentes versiones en JPG, PNG, SVG o PDF.

Cuando preparo los archivos de una marca, pienso en cómo se utilizarán: en qué tamaño, sobre qué fondo y con qué sistema de impresión o de visualización. Elegir bien el formato ayuda a conservar la nitidez, la transparencia y los colores del logotipo.

Carpeta blanca de ReConst con el logotipo negro y turquesa, el descriptor «Representaciones para la construcción» y la web.
Carpeta corporativa de ReConst: una aplicación de la marca que requiere preparar los archivos para el soporte y el proceso de impresión. Ver el proyecto ReConst.

En esta guía explico para qué sirve cada formato, qué limitaciones tiene y qué conviene comprobar antes de enviar el logo a una imprenta o subirlo a la web.


JPG, PNG, SVG y PDF: diferencias de un vistazo

FormatoCuándo lo usaríaQué hay que vigilar
JPG / JPEGFotografías e imágenes con fondo opaco.Compresión con pérdida; no admite transparencia.
PNGLogotipos con fondo transparente en aplicaciones que requieren imágenes de píxeles.No se puede ampliar indefinidamente sin perder nitidez.
SVGLogotipos e iconos vectoriales en la web.Hay que comprobar que el contenido sea realmente vectorial y que la plataforma lo admita.
PDFEntrega del logotipo y artes finales para impresión, con los ajustes acordados.Puede contener vectores, píxeles o ambos. La extensión no garantiza calidad.
WebPImágenes optimizadas para la web, también con transparencia.Es un formato de píxeles; no sustituye al original vectorial.
Panel de configuración de exportación de Illustrator con los formatos SVG, JPG, PNG y PDF y las opciones de PNG.
Cada formato tiene sus ajustes de exportación: elegir la extensión es solo el primer paso. Adobe Illustrator.

Píxeles o vectores: la diferencia que importa

Una imagen de píxeles es una cuadrícula de puntos de color. Un dibujo vectorial describe formas y curvas. Si amplías mucho una imagen pequeña, los puntos disponibles no son suficientes para definir los contornos; un trazo vectorial se recalcula al tamaño necesario.

Ilustración de una botella con dos ampliaciones de la etiqueta: contornos vectoriales nítidos y mapa de bits pixelado.
Ejemplo de cómo cambia un contorno cuando se amplía como vector o como mapa de bits. Althepal / Wikimedia Commons · dominio público.

Por eso un logotipo construido con vectores se puede adaptar a una tarjeta o a un rótulo sin que los trazos se pixelen. Esto no elimina la necesidad de revisar el diseño: un detalle muy fino puede desaparecer cuando el logo se imprime pequeño, aunque el archivo sea vectorial. La calidad del archivo y la legibilidad del diseño son cuestiones diferentes.


JPG: práctico para fotografías, limitado para el logotipo

JPG y JPEG son el mismo formato. La compresión con pérdida permite reducir el peso de las fotografías, pero puede generar manchas e irregularidades alrededor de letras y contornos. Además, el JPG no admite fondo transparente.

Comparación de una fotografía de un pájaro con detalle conservado a la izquierda y artefactos de compresión a la derecha.
El mismo detalle fotográfico muestra qué se pierde con una compresión JPEG excesiva. JJ Harrison; comparativa de Ibrahim.ID · CC BY-SA 3.0.

Lo usaría para una fotografía de un producto o una composición terminada con fondo opaco. No lo conservaría como único original del logotipo. Si necesitas un JPG para una plataforma concreta, expórtalo desde el archivo de calidad y evita guardar repetidamente copias ya comprimidas.


PNG: fondo transparente, pero con un tamaño concreto

El PNG admite transparencia y utiliza compresión sin pérdida. Es práctico para colocar un logotipo sobre una fotografía o sobre un fondo de color en una presentación. Eso no quiere decir que cualquier PNG tenga el fondo transparente: también puede contener un rectángulo blanco.

Cuatro dados de colores con transparencia parcial sobre un fondo transparente.
Archivo de demostración del canal alfa: el PNG puede conservar tanto el fondo transparente como la transparencia parcial de los objetos. Es un render técnico, no una fotografía. Daniel G., Ed g2s y CyberShadow · CC BY-SA 3.0.

Guardar un JPG como PNG no elimina el fondo ni recupera el detalle perdido. Necesitas una exportación con transparencia real y dimensiones adecuadas. Un PNG de 300 píxeles de ancho sigue teniendo 300 píxeles aunque lo coloques mucho más grande.

Ejemplo práctico: si tienes que mostrar el logo a 400 píxeles de ancho en una pantalla de densidad doble, una exportación de 800 píxeles puede ser adecuada. Es un ejemplo de dimensiones, no una medida universal para todas las plataformas.


SVG: el logotipo vectorial en la web

El SVG permite representar formas y texto, y también puede incorporar imágenes de píxeles. Por lo tanto, un archivo terminado en .svg no demuestra, por sí solo, que el logotipo sea vectorial. Si solo contiene un JPG incrustado, el JPG conserva sus limitaciones.

Ejemplo de edición de la curvatura de un trazado con la herramienta de nodos de Inkscape.
Los vectores se pueden editar por nodos y segmentos: aquí se modifica directamente la curvatura del trazado. Inkscape Beginners’ Guide.

Cuando el logo está construido con trazados, el SVG es una opción útil para mostrarlo a diferentes tamaños en la web. Antes de entregarlo, comprobaría que se visualiza bien, que no depende de una tipografía ausente y que no incorpora recursos externos innecesarios. Algunas plataformas restringen la subida de SVG; en ese caso, se necesita una alternativa compatible.


PDF: qué tienes que enviar a la imprenta

Un PDF puede reunir trazados, texto y fotografías. Sirve para compartir un logotipo y para entregar una composición acabada, pero un PDF del logo no es lo mismo que el PDF preparado para imprimir un folleto.

En el primer caso, el proveedor necesita el recurso gráfico para aplicarlo. En el segundo, necesita un documento con formato final, márgenes, sangrado si corresponde, fuentes e imágenes correctas, y tratamiento del color adecuado al proceso. Los ajustes de PDF/X, perfiles y marcas deben acordarse con la imprenta; no conviene aplicar la misma receta a cualquier producto.

Panel de previsualización de salida de Acrobat con opciones de simulación y separaciones de color.
Un PDF se revisa por dentro: separaciones de color, simulación de salida y tipos de objetos. Adobe Help.

Poner una captura de pantalla dentro de un PDF no la convierte en vectorial ni la prepara automáticamente para imprimir. Si estás preparando una publicación, explico el resto de materiales en qué necesito preparar para encargar un catálogo.


¿Y el WebP, el AI y el EPS?

El WebP admite compresión con pérdida o sin pérdida y transparencia. Es útil para reducir el peso de las imágenes web cuando la exportación y la calidad lo permiten. Sigue siendo una imagen de píxeles.

Cerezo florecido sobre un prado verde, ejemplo de la galería oficial de WebP.
Fotografía utilizada en la galería oficial de Google para comparar JPEG y WebP; el formato cambia la codificación, no el motivo de la imagen. Benjamin Gimmel · CC BY-SA 3.0. Licencia CC BY-SA 3.0.

AI es el formato nativo de Adobe Illustrator. Puede formar parte de los editables del proyecto si la entrega se ha acordado. El EPS también aparece en algunos flujos de producción. No pediría todos los formatos por sistema: pediría un original de calidad, las exportaciones necesarias y una explicación de cuándo usarlos.


Tres errores que no arregla un convertidor

  • Cambiar la extensión. Renombrar logo.jpg como logo.svg no transforma el contenido del archivo.
  • Ampliar una imagen pequeña. Añadir píxeles por interpolación no recupera fielmente el dibujo original. En un logotipo, hay que preservar la forma exacta.
  • Dar por buena cualquier vectorización automática. El resultado puede alterar curvas, espacios entre letras y proporciones. Hay que compararlo con una referencia fiable y corregirlo.

Si solo tienes una imagen pequeña, primero buscaría el archivo original entre los materiales del proyecto o lo pediría a quien creó la marca. Si no existe, hay que valorar la reconstrucción del logotipo; no presentaría una conversión automática como si fuera el original.

Diálogo de vectorización de Inkscape con la previsualización de un cohete en blanco y negro.
La vectorización interpreta la imagen según unos ajustes; hay que revisar el resultado antes de usarla como original. Inkscape Beginners’ Guide.

¿Qué archivos pediría al terminar un proyecto?

  • Un original vectorial revisado y exportaciones compatibles con los usos previstos.
  • Un SVG para la web, cuando sea adecuado, y PNG transparentes con dimensiones indicadas.
  • Un PDF con el logotipo vectorial para compartir con proveedores, sin confundirlo con el arte final de cada aplicación.
  • Las versiones de color, monocromas y para fondos claros u oscuros que el diseño necesite.
  • Una guía breve de uso y nombres de archivo que permitan distinguir las versiones.
Dos tarjetas de visita de ReConst, una turquesa con los datos de contacto y una blanca con el logotipo negro y turquesa, sobre espuma blanca.
Las tarjetas de ReConst combinan el blanco y el turquesa corporativo. Las versiones y las aplicaciones de la marca deben quedar bien identificadas en la entrega. Ver el proyecto ReConst.

Por ejemplo, marca-principal-fons-clar.svg es más útil que logo-final-definitiu-3.svg. La organización también forma parte de una entrega profesional. Si quieres valorar el conjunto del servicio, puedes leer qué debe incluir un proyecto de identidad visual.


¿Dudas de archivos? Respuestas sin rodeos

La duda suele aparecer cuando tienes que enviar el archivo. Abre la pregunta que se asemeje a tu caso.

El logo me sale con un rectángulo blanco. ¿Cómo lo quito?

Comprueba primero si el archivo tiene transparencia real. Un JPG no puede tenerla. Pide un PNG transparente o un SVG adecuado: cambiar la extensión o guardar el JPG como PNG no elimina el fondo.

PNG o JPG: ¿cuál se verá mejor?

Para un logotipo con contornos nítidos y fondo transparente, habitualmente PNG. Para una fotografía con fondo opaco, JPG puede funcionar bien con una compresión adecuada. La calidad del original y las dimensiones siguen siendo decisivas.

Tengo un PNG. ¿Ya lo puedo enviar a imprimir?

Puede servir si tiene suficiente resolución efectiva para el tamaño y el proceso. Pero, si el logotipo está construido con trazos, lo vectorial brinda más flexibilidad. Envía al proveedor las medidas finales y confirma qué necesita.

Pone «PDF»: ¿eso significa que es vectorial?

No. Un PDF puede contener vectores, una fotografía o una captura de pantalla. Hay que inspeccionar sus objetos; la extensión no certifica ni la calidad ni la preparación para impresión.

Si lo convierto a SVG, ¿dejará de pixelarse?

Solo si el contenido se ha reconstruido realmente con vectores y se ha revisado. Un JPG incrustado dentro de un SVG sigue siendo un JPG. La vectorización automática puede cambiar formas, espacios y proporciones.

¿Cómo puedo saber si me han entregado un vectorial de verdad?

Ampliarlo ayuda a detectar problemas, pero no es una prueba definitiva. La comprobación fiable es abrirlo con una herramienta adecuada y verificar que el logotipo está formado por trazados, no solo por una imagen incrustada.


El mejor formato es el que resuelve el uso real

Para mí, entregar un logotipo no debería terminar con una carpeta llena de extensiones que el cliente no sabe distinguir. Debería permitir usarlo con criterio y enviar a cada proveedor el material que necesita.

Mockup del rótulo exterior de ReConst, con el logotipo negro y turquesa sobre una fachada industrial.
Del archivo al soporte: aplicación de la identidad visual de ReConst en un rótulo exterior. Mockup del proyecto. Ver el proyecto ReConst.

Lecturas relacionadas: ¿Qué debe incluir un proyecto de identidad visual? y ¿Qué necesito preparar para encargar un catálogo?.



No te pierdas ningún artículo

Suscríbete al blog y recibe por correo electrónico los nuevos artículos sobre diseño gráfico, identidad visual y comunicación.

La suscripción es gratuita y te puedes dar de baja cuando quieras. Consulta el aviso legal y política de privacidad;

Publicado por Oriol Bg

Diseñador gráfico

Descubre más desde Oriol Bargalló

Suscríbete ahora para seguir leyendo y obtener acceso al archivo completo.

Seguir leyendo