Archivos de logotipo: vectorial, SVG optimizado, PDF y entrega profesional

Uno de los correos que más recibimos en el estudio empieza así: «Hola, el de la imprenta me pide el logo en vectorial, ¿eso qué es?». Detrás suele haber un negocio con años de vida, un logo que le gusta y una carpeta con tres archivos: un JPG que alguien le mandó por WhatsApp, una captura de pantalla de la web y un PNG con fondo blanco. Con eso se puede salir del paso un tiempo, hasta que hay que rotular una furgoneta, bordar unos polos o imprimir una lona de seis metros.

Los archivos de un logo son la parte menos vistosa de una identidad y una de las más importantes. Un buen diseño mal entregado obliga a improvisar cada vez que alguien necesita usarlo; un diseño bien entregado se aplica solo. Esta guía es técnica a propósito: está pensada para que entiendas qué debe tener tu carpeta de marca, para que puedas pedirlo con propiedad y, si eres diseñador o desarrollador, para preparar cada archivo con criterio.

01Vectorial y mapa de bits: la diferencia que lo cambia todo

Hay dos maneras de guardar una imagen digital.

• →Mapa de bits (o ráster). La imagen es una cuadrícula de píxeles de colores. Es el formato de las fotografías: JPG, PNG, WebP, GIF. Tiene una resolución fija; si la amplías por encima de su tamaño, aparecen escalones y bordes borrosos.
• →Vectorial. La imagen se describe con trazados matemáticos: puntos, líneas y curvas con sus rellenos. Se puede ampliar a cualquier tamaño, de un sello de 1 centímetro a una lona de 10 metros, sin perder calidad. Es el formato natural de los logotipos: AI, EPS, SVG y PDF vectorial.

Un logotipo siempre debe tener su original en vectorial. A partir de él se exportan todas las versiones en mapa de bits que hagan falta, al tamaño exacto de cada uso. Al revés no funciona: de un PNG no se obtiene un vector de calidad sin redibujarlo.

02Los formatos que debe tener tu logo

Si en tu carpeta solo hay PNG y JPG, la prioridad es recuperar o reconstruir el vectorial. Lo demás se genera a partir de él en una mañana.

03SVG optimizado: el logo perfecto para la web

El SVG (Scalable Vector Graphics) es un formato vectorial basado en texto, un estándar del W3C que todos los navegadores interpretan. Es ideal para el logo de una web: pesa muy poco, se ve nítido en cualquier pantalla, se puede animar y cambiar de color con CSS.

El problema es que los programas de diseño exportan SVG con mucho contenido innecesario: metadatos del programa, capas vacías, coordenadas con muchos decimales, estilos duplicados. Un logo que debería ocupar 2 KB puede llegar a 20 o 30. Optimizarlo es sencillo:

1. 01Convertir textos en trazados. Así el logo no depende de que el navegador tenga la tipografía.
2. 02Expandir trazos y unir formas. Los contornos convertidos en rellenos se comportan igual en todos los programas.
3. 03Eliminar lo que no se ve. Capas ocultas, guías, máscaras sin uso, metadatos.
4. 04Reducir decimales. Uno o dos decimales en las coordenadas suelen ser suficientes para un logo.
5. 05Pasar el archivo por un optimizador. SVGO (y su interfaz web SVGOMG) es la herramienta de referencia y hace la mayor parte del trabajo de forma automática.
6. 06Conservar el `viewBox` y añadir accesibilidad. El viewBox permite que el SVG se escale bien; un title y un role permiten que los lectores de pantalla anuncien el logo.

Este sería el esqueleto de un logo SVG limpio y accesible:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 64" role="img" aria-labelledby="logo-title">
  <title id="logo-title">Nombre de la marca</title>
  <path fill="currentColor" d="M12 8h40v8H20v12h28v8H20v20h-8z"/>
  <!-- resto de trazados del logo -->
</svg>

El uso de fill="currentColor" hace que el logo tome el color del texto que lo rodea, de modo que se puede cambiar con una sola línea de CSS, por ejemplo para el modo oscuro:

.site-logo { color: #1a1a1a; }
@media (prefers-color-scheme: dark) {
  .site-logo { color: #ffffff; }
}

Para logos de dos o más colores, cada parte puede llevar su propio color o una variable CSS. En la documentación de MDN sobre SVG tienes la referencia completa de atributos.

Favicon e iconos de dispositivo

El favicon merece su propio dibujo, como explicamos en la guía sobre versiones de logo. Una vez dibujado, para cubrir navegadores y dispositivos actuales suele bastar con un conjunto reducido de archivos:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

• →favicon.ico de 32 × 32 píxeles, para navegadores antiguos y herramientas que lo buscan por defecto.
• →icon.svg, que los navegadores modernos usan con nitidez en cualquier tamaño y que puede incluir su propia versión para modo oscuro.
• →apple-touch-icon.png de 180 × 180 píxeles, para cuando alguien guarda la web en la pantalla de inicio de un iPhone.
• →Iconos de 192 y 512 píxeles declarados en el manifiesto web, para Android y aplicaciones web instalables.

04Archivos para producción: imprenta, rótulo y bordado

Para imprenta, el formato más cómodo y seguro es el PDF vectorial. Algunos detalles marcan la diferencia:

• →Estándar PDF/X. Las variantes PDF/X (en especial PDF/X-4) son normas ISO pensadas para intercambio de archivos de impresión. Garantizan que el archivo lleve todo lo necesario y nada que dé problemas.
• →Modo de color. Una versión en CMYK para cuatricromía, con el perfil que indique la imprenta (en Europa es habitual uno basado en FOGRA39 o FOGRA51), y una versión en tintas planas Pantone para trabajos donde el color de marca tiene que ser exacto.
• →Negro de una tinta. Las versiones en negro deben usar solo el canal K (negro) al 100 %, sin mezclas, para que los bordes salgan limpios.
• →Sin elementos sueltos. Ni textos sin convertir, ni imágenes incrustadas, ni trazos sin expandir.

Para las especificaciones de color completas, con sus equivalencias, tienes la guía sobre el color en el logotipo.

Rótulo, vinilo, bordado y grabado

Cada técnica de producción tiene sus manías, y el mismo PDF vectorial puede necesitar pequeños ajustes:

• →Vinilo de corte y fresado. El plotter sigue los trazados, así que el logo debe estar formado por formas cerradas y limpias, sin superposiciones ni nodos sueltos. Cada color, en una capa separada.
• →Letras corpóreas. El rotulista necesita el vector a escala real o con medidas indicadas, y suele preparar sus propios archivos de fabricación a partir de él.
• →Bordado. La máquina de bordar no lee vectores directamente: un especialista convierte el logo en puntadas (proceso que se conoce como picaje o ponchado). Tú le entregas el vector y la versión simplificada de una o dos tintas; él prepara el archivo de bordado.
• →Grabado láser y estampación. Versión de una tinta, sin degradados, con grosores mínimos revisados.

05Rescatar un logo que solo existe en JPG

Es una situación muy habitual y tiene solución. Este es el orden que seguimos cuando un cliente llega solo con archivos de píxeles:

1. 01Buscar los originales. Preguntar a quien diseñó el logo, a la imprenta que hizo las primeras tarjetas o al rotulista que montó el rótulo. Muchas veces alguno de ellos conserva un vector.
2. 02Reunir la mejor referencia posible. Si no aparece el original, buscamos la versión de mayor tamaño y calidad disponible: un PDF antiguo, una foto frontal del rótulo, un archivo de la web.
3. 03Redibujar, no solo calcar. Las herramientas de vectorización automática, como el calco de imagen de Illustrator, sirven como punto de partida, pero generan curvas irregulares y cientos de nodos. Lo que funciona es redibujar el logo a mano con trazados limpios, identificando la tipografía original si existe.
4. 04Superponer y comparar. Colocamos el vector nuevo sobre la imagen original para comprobar que la forma es fiel y que nadie notará la diferencia.
5. 05Aprovechar para mejorar. Al reconstruir es fácil corregir pequeños defectos (curvas temblorosas, espaciados irregulares) sin cambiar la identidad. Es un retoque técnico que el cliente agradece, siempre comentado antes.
6. 06Completar el sistema. Con el vector limpio ya se pueden generar todas las versiones y formatos de esta guía.

06Cómo organizar la carpeta de entrega

Una carpeta de marca bien organizada permite que cualquier persona (tú, tu equipo, tu imprenta, tu desarrollador) encuentre lo que necesita sin preguntar. Esta es la estructura que usamos en el estudio, adaptada a cada proyecto:

marca-nombre/
  00-leeme.pdf
  01-principal/
    impresion/  marca-principal-color-cmyk.pdf, marca-principal-pantone.pdf, marca-principal-negro.pdf
    digital/    marca-principal-color.svg, marca-principal-color.png, marca-principal-negativo.png
  02-horizontal/
  03-simbolo/
  04-favicon/   favicon.ico, icon.svg, apple-touch-icon.png, icon-192.png, icon-512.png
  05-plataformas/  avatar-1080-positivo.png, avatar-1080-negativo.png
  06-originales/   marca-nombre-maestro.ai
  07-manual/       manual-de-marca.pdf

Algunas reglas que hacen la carpeta fácil de usar:

• →Nombres descriptivos y sin espacios: marca, versión, color y fondo. «marca-simbolo-negativo.svg» se entiende sola.
• →Minúsculas y guiones, sin tildes ni caracteres especiales, para evitar problemas al subir archivos a plataformas o servidores.
• →Un archivo «leeme» de una página que explique qué hay en cada carpeta y cuándo usar cada versión.
• →El manual de marca junto a los archivos. Lo que debe incluir lo detallamos en qué incluye un manual de marca.
• →Una copia en la nube compartida, con acceso para quien lo necesite y una copia de seguridad.

07Lista de comprobación antes de entregar

Antes de dar por cerrada la entrega, pasamos esta revisión:

1. 01El vector maestro está limpio: formas unidas, sin nodos sobrantes, textos convertidos en trazados.
2. 02Están todas las versiones acordadas (principal, horizontal, símbolo, favicon) en positivo, negativo y una tinta.
3. 03Cada versión existe en los formatos de su uso: PDF para impresión, SVG y PNG para digital.
4. 04Los colores están definidos en Pantone, CMYK, RGB y hexadecimal, y coinciden en todos los archivos.
5. 05Los SVG están optimizados, con viewBox y título accesible.
6. 06Los PNG tienen fondo transparente y un tamaño generoso (por ejemplo, 3.000 píxeles de ancho para las versiones principales).
7. 07Los nombres de archivo siguen la convención acordada.
8. 08Las licencias de las tipografías usadas en el logo permiten su uso como marca.
9. 09El manual y el archivo «leeme» están en la carpeta.
10. 10El cliente ha abierto la carpeta y ha encontrado lo que buscaba sin ayuda.

Clave: una entrega está bien hecha cuando cualquier proveedor puede reproducir el logo correctamente sin tener que llamar a nadie.

08Tus archivos, tu marca

Tener los archivos de tu logo en orden es una forma sencilla de cuidar la marca cada día. Ahorra tiempo, evita improvisaciones y hace que tu identidad se vea igual de bien en una servilleta que en una pantalla de 4K.

En SIMA cada proyecto de diseño de logotipo termina con una entrega completa: vectoriales maestros, versiones, SVG optimizados, favicons, PDF para imprenta y manual. Si tu carpeta de marca se ha quedado en tres JPG, o quieres que revisemos la que tienes, escríbenos y lo ponemos en orden.