Vectorial o mapa de bits: qué formato usar en ilustraciones

El PNG de la pantalla vacía se veía bien a 1x. Lo puse en la sección hero a 2x y los bordes quedaron borrosos. Luego el equipo de marca pidió azul marino en vez de mostaza, y en Figma el archivo era una sola imagen bloqueada.

En ilustración, la diferencia entre vectorial y mapa de bits es exactamente eso. Nada de teoría informática: se trata de si el martes que viene vas a poder cambiar un relleno.

Las imágenes de producto las hago en Illustro. Para los huecos de la interfaz abro el generador de SVG con IA, elijo Flat en Estilo y exporto en SVG. Para el 3D de plastilina y las páginas de cuento me quedo a propósito con PNG o JPEG. El formato lo decide el trabajo.

Qué significan vectorial y mapa de bits en ilustración

Una ilustración de mapa de bits (o imagen raster) es una cuadrícula de píxeles de colores: PNG, JPEG, GIF, TIFF, WEBP. Si haces zoom, ves cuadraditos. Si la estiras más allá de su tamaño, se pixela.

La comparativa de Adobe entre raster y vectorial hace la misma distinción. Las fotos y el detalle pintado están en este lado, porque el archivo guarda cada punto de color.

Una ilustración vectorial está hecha de formas, líneas y curvas guardadas como fórmulas matemáticas. El SVG es el formato que se usa en la web. Puedes llevarlo a un icono de 24 px o a un hero de ancho completo, y el borde sigue siendo una línea nítida.

Mi prueba de verdad sale de la introducción al SVG de MDN: abre el archivo. Si ves XML que describe un trazado, es un vector. Si ves un mapa de bits metido dentro del archivo, sigue siendo una imagen raster, diga lo que diga el nombre del archivo.

En ilustración, casi siempre necesitas una de dos cosas: cambiar los colores y el tamaño de un gráfico que va junto a la interfaz, o conservar la suavidad de la pintura, la plastilina y la luz. Elige el formato que hace ese trabajo, no el que suena más "profesional".

Vectorial y mapa de bits de un vistazo

La tabla sirve igual para cualquier gráfico; la fila que los equipos suelen saltarse es la de los usos en ilustración. Un PNG precioso de un zorro sigue siendo un mapa de bits. Un zorro en estilo flat que puedes retocar con Cambiar colores es un vector.

Cuándo conviene el formato vectorial en ilustración

Pantallas vacías. Bloques de funciones. Un gráfico que tiene que verse a 24 px en la barra de navegación y a 1600 px en una landing. Ahí quiero SVG.

Figma también se lleva mejor con los vectores: recibes formas, no una única capa aplanada. Y si vas en sentido contrario, la ayuda de Figma sobre exportar explica la opción Copiar como SVG.

Si la pose ya está bien y solo falla el amarillo, en un vector cambias el relleno y listo. En Illustro eso es Cambiar colores, y es gratis. Funciona cuando el archivo tiene código SVG.

El estilo flat es el aspecto: formas de color liso, paleta corta, casi siempre un fondo crema. El vector es el archivo que hay debajo. El line art también es vectorial, aunque se lee como tinta y no como formas rellenas.

Pide un gráfico, no una fotografía. Indica el motivo, la pose y dos o tres colores de relleno, y olvídate de "cinematográfico" y "8k". Es la misma regla que en cómo crear un archivo SVG con IA que puedas cambiar de color.

Los logos son otra historia. Las formas sencillas del estilo flat se leen bien en pequeño, pero Illustro no es una herramienta para hacer logos. Un logo que vas a imprimir en mil objetos sigue necesitando a un diseñador con su herramienta pluma.

Cuándo conviene el mapa de bits en ilustración

El 3D de plastilina tiene el aspecto de un objeto pequeño fotografiado en estudio: mate, redondeado, iluminado. Esa luz son píxeles, y en Illustro no hay forma honesta de pasarla a SVG. Descarga PNG si necesitas transparencia, o JPEG si te sirve un fondo blanco.

Una vez intenté "vectorizar" una figura de plastilina: salieron manchas planas y perdí justo lo que me había hecho elegir el 3D. Si lo que necesitas es eso, lee cómo crear una mascota de marca en 3D sin Blender y quédate con el mapa de bits.

El estilo de cuento infantil parece gouache a propósito: lo que importa es el color suave, y convertirlo en trazados duros arruina la página. Aquí, PNG o JPEG. Quitar fondo cuesta 1 crédito en Cuento infantil e Ilustración 3D; en flat y line art no está disponible.

Las fotos siguen siendo mapa de bits. Un vectorizador puede imitar un logo vectorial, pero no va a conservar el grano fotográfico. Si solo necesitas la pose, convierte la foto en una ilustración en estilo flat (3 créditos). Es un cambio de estilo, no una copia fiel de la foto original, y después puedes exportarla en SVG (1 crédito). Si en la foto aparece otra persona, súbela solo si está de acuerdo.

Aquí, elegir entre vectorial y mapa de bits es una decisión de estilo, no una escala de calidad. Las imágenes suaves piden píxeles; las formas definidas piden trazados.

SVG, PNG o JPEG

Mucha gente busca "PNG o SVG" cuando en realidad quiere saber si le conviene vectorial o mapa de bits. Así es el menú de descarga de verdad:

SVG. Vector de verdad. Le cambias un relleno y lo amplías sin que se emborrone. Exportar en SVG cuesta 1 crédito en ilustraciones generadas o convertidas en Illustro, y es gratis con un SVG que subes tú. No aparece en Cuento infantil ni en Ilustración 3D.

PNG. Mapa de bits. Gratis. Conserva la transparencia. Te sirve para una imagen fija cuyos trazados no vas a tocar. Illustro puede convertir un SVG en un PNG de alta resolución directamente en tu navegador; una vez descargado ese PNG, vuelves a tener píxeles.

JPEG. Mapa de bits. Gratis. Rellena el fondo de blanco. Útil para correos, presentaciones y herramientas que se atragantan con la transparencia.

El SVG no siempre gana: gana cuando necesitas trazados. El PNG es mejor cuando la imagen ya tiene el aspecto que buscas y vectorizarla solo la estropearía.

Cómo elijo entre vectorial y mapa de bits en Illustro

1. Define el trabajo. Interfaz y landing: flat o line art. Mascota de marca con aspecto de juguete: Ilustración 3D. Cuento ilustrado: Cuento infantil.
2. Revisa el modo. Illustro Light para explorar (1 crédito en flat o line art, 2 en 3D o cuento infantil); Illustro MAX para publicar (2 o 4 créditos, respectivamente). El editor empieza en Light, así que comprueba el modo antes de hacer clic en Generar.
3. Escribe el motivo. Para una pantalla vacía en vectorial pego algo así: "Persona sin rostro regando una planta colgante, vista de perfil, suéter terracota, pantalón azul marino, fondo crema, formas geométricas simples, sin rasgos faciales, sin degradados".
4. Haz clic en Generar y revisa la pose.
5. Estilos vectoriales: abre Cambiar colores si los colores no van. Usa Editar con IA (3 créditos) si necesitas un objeto nuevo: Cambiar colores no puede dibujarlo.
6. Estilos de mapa de bits: usa Editar con IA o vuelve a generar, y Quitar fondo si necesitas la figura sobre fondo transparente.
7. Descarga PNG o JPEG gratis. Exportar en SVG (1 crédito) solo cuando el estilo lo permite.

Sigo esos pasos en el generador de SVG con IA cuando el archivo tiene que seguir siendo un gráfico. Coloca el SVG con el plugin de Illustro en Figma, o expórtalo y arrástralo al lienzo.

No intentes sacar un SVG de un 3D o de una página de cuento: el botón no va a aparecer. Si dudas, quédate con la división de arriba: flat y line art se exportan en SVG; 3D y cuento infantil se quedan en PNG o JPEG.

Preguntas frecuentes

¿Un JPEG es vectorial o mapa de bits?

JPEG es un formato de mapa de bits. Guarda una cuadrícula de píxeles, normalmente con una compresión que descarta parte del detalle del color. En un JPEG no puedes cambiar el color de un trazado como en un SVG. Úsalo para fotos, 3D de plastilina e imágenes de cuento que no vas a ampliar mucho más allá de su tamaño en píxeles.

¿El SVG es vectorial o mapa de bits?

El SVG es un formato vectorial cuando contiene trazados reales: es XML que describe formas, no una cuadrícula de cuadraditos. Algunas herramientas meten un PNG dentro de un archivo con extensión .svg. Ábrelo: si no puedes seleccionar un relleno, sigues teniendo un mapa de bits.

¿Un PNG es vectorial o mapa de bits?

PNG es mapa de bits. Es útil porque conserva la transparencia y no añade los defectos de compresión del JPEG. En Illustro, descargar en PNG es gratis en todos los estilos. Es la exportación adecuada para 3D y cuento infantil, y un formato de vista previa para flat y line art si no vas a cambiar los colores después.

¿Se puede convertir un PNG en vector?

Puedes vectorizarlo. Al vectorizar se crean formas nuevas que imitan los píxeles, pero no se recupera un dibujo que nunca fue un trazado. En Illustro, Vectorizar imagen lo hace por 1 crédito: subes un PNG, JPG o WEBP y obtienes un SVG que sigue las formas y los colores del archivo. Si lo que quieres es cambiarle el estilo a una foto, la herramienta de foto a ilustración la convierte en una imagen en estilo flat (3 créditos), y luego exportarla en SVG cuesta 1 crédito.

¿Es mejor el SVG que el PNG?

Para ilustraciones de interfaz, sí, si necesitas ampliarlas o cambiarles los colores. Para el 3D de plastilina y las imágenes de cuento, no: en esas imágenes lo que cuenta es la luz y la suavidad, y el SVG las aplanaría. Ahí elige PNG o JPEG, y deja el SVG para flat y line art.

¿Un PDF es vectorial?

Un PDF puede contener vectores, mapas de bits o ambos. El PDF de una página con un logo puede ser todo trazados; el PDF de una fotografía sigue siendo píxeles. No te fíes de la extensión: comprueba si puedes seleccionar una forma. Para ilustraciones web, yo sigo exportando SVG o PNG desde Illustro, no PDF. Que algo sea vectorial o mapa de bits no depende del nombre del archivo, sino de los datos que hay dentro.