De una idea a un SVG terminado

Un SVG está terminado cuando funciona en el lugar donde vas a usarlo. Una vista previa grande y convincente puede convertirse en un icono ilegible en una barra de herramientas, incluir un fondo no deseado o contener un mapa de bits en vez de formas editables. Este proceso te ayuda a definir el encargo, elegir una forma de creación adecuada y repetir una comprobación de entrega con criterio.

Empieza por el destino

Anota el motivo, la finalidad, las dimensiones y el fondo antes de abrir una herramienta. «Un icono de un cactus» deja muchas decisiones abiertas. «Un icono de cactus para una aplicación de jardinería, legible a 24 y 48 píxeles, verde y crema, sobre un lienzo transparente» te da algo concreto que evaluar.

Separa los requisitos de las preferencias. El contorno debe verse a 24 píxeles; la forma de la maceta quizá pueda variar. En un banner, la composición y el espacio alrededor pueden importar más que los detalles diminutos. Mantén esta descripción junto a la vista previa para que cada revisión resuelva un problema concreto.

Elige cómo crear la imagen

• Describe una idea: usa la generación de SVG con IA cuando necesites un icono o una ilustración nuevos a partir de palabras. Generar SVG desde texto cuesta 1 crédito y requiere iniciar sesión con saldo suficiente.
• Convierte una imagen existente: usa imagen a SVG para un PNG o JPG que ya contenga formas aprovechables. La vectorización de imágenes cuesta 2 créditos y también requiere iniciar sesión. Interpreta la imagen; no promete reconstruir exactamente cada píxel.
• Dibuja las formas: usa el editor SVG a mano alzada para un boceto deliberado o geometría sencilla. El dibujo, la compresión de SVG y la exportación de mapa de bits funcionan localmente en el navegador. No necesitan generar una imagen con IA para procesar un archivo.

Utiliza Studio para el proceso de generación. Elige la vía que encaje con el material de origen, en lugar de pedir una y otra vez a la IA una forma que podrías dibujar directamente.

Haz que el primer prompt sea concreto

Empieza con un solo motivo y una única función visual. Define la paleta, la silueta, el estilo de línea y el fondo, y elimina las instrucciones que distraigan. Por ejemplo:

Un único cactus en una maceta, visto de frente, para el icono de una aplicación de jardinería. Tres colores planos: verde oscuro, menta y crema cálido. Formas simples y marcadas, contornos uniformes, espacio negativo generoso, composición centrada y fondo transparente sencillo. Sin texto, letras, marcas de agua, degradados ni detalles decorativos diminutos. Legible a 24 × 24 píxeles.

Los nombres de los colores orientan el resultado, pero no garantizan los valores exactos de una marca. Si necesitas colores o tipografía precisos, revisa y ajusta el SVG descargado en un editor vectorial adecuado.

Mantén constantes el motivo, la paleta, la distribución y el tamaño objetivo mientras pruebas un solo cambio. Repite la descripción completa en cada nuevo intento y modifica únicamente un requisito; por ejemplo, pide un contorno principal más grueso. El resultado de la IA todavía puede variar, así que compáralo con el encargo en lugar de esperar geometrías idénticas. Guarda un archivo prometedor antes de iniciar otra generación.

Prepara las imágenes de mapa de bits antes de vectorizarlas

En tu editor de imágenes, recorta los márgenes vacíos y los objetos que no interesan. Parte de una imagen clara y suficientemente grande, no de una miniatura borrosa ampliada. Mejora la separación entre el motivo y el fondo. Reduce los artefactos de compresión, las texturas diminutas y las sombras suaves cuando no deban aparecer en la ilustración final.

Un símbolo plano con bordes definidos suele exigir menos decisiones de interpretación que una fotografía con pelo, reflejos o humo. Decide qué rasgos deben mantenerse al simplificar. Si necesitas eliminar el fondo, prepara esa imagen por separado: la extracción externa opcional del primer plano no forma parte de todas las conversiones por defecto. Revisa los bordes y colores obtenidos antes de enviar otro intento.

Revisa el SVG a tamaños útiles

Compruébalo a 24 píxeles, 48 píxeles y al tamaño real en que se mostrará. En pequeño, busca huecos que se cierren, trazos que desaparezcan y detalles que se conviertan en ruido visual. Al tamaño previsto, revisa las curvas, la alineación y los márgenes interiores. Una silueta clara importa más que el número de trazados.

Comprueba el viewBox, que define el rectángulo de coordenadas interno. El dibujo situado fuera puede quedar recortado; un exceso de espacio puede hacer que un icono con dimensiones correctas parezca demasiado pequeño. Revisa también estos puntos:

• Texto y fuentes: una fuente que falta puede cambiar la distribución. Usa una configuración de fuentes fiable o convierte el texto en trazados en tu editor vectorial cuando resulte apropiado.
• Transparencia: prueba la vista previa sobre fondos claros y oscuros. Una forma blanca no es lo mismo que una zona vacía y transparente.
• Contenido de mapa de bits incluido: un SVG puede contener un elemento image que enlace o incorpore una imagen de mapa de bits. La extensión .svg no demuestra que todo el dibujo esté compuesto por trazados escalables.

Conserva el archivo de origen y exporta una copia de entrega

Descarga el SVG antes de cambiar de formato. Guarda archivos locales separados con nombres claros, como cactus-original.svg y cactus-web.svg: son tus propias copias guardadas. Procesa una copia con el compresor SVG y compara visualmente el resultado. Conserva el original si la optimización modifica su aspecto.

Usa SVG a PNG cuando la aplicación receptora necesite píxeles, o SVG a WebP para una imagen web. Prepara las dimensiones de salida deseadas en el SVG antes de convertirlo: un icono de 24 píxeles mostrado al doble de densidad necesita una exportación de 48 píxeles. Vuelve a comprobar la transparencia y los contornos en el archivo exportado. La guía de formatos explica las ventajas y limitaciones de cada opción.

Corrige la causa y prepara la entrega

Si el icono no se entiende bien, simplifica la silueta antes de añadir detalles. Si la vectorización produce motas, limpia la imagen de entrada en vez de repetir la misma conversión. Si se cortan los bordes, revisa los límites y los márgenes. Si el texto se desplaza, comprueba las fuentes. Si la exportación se ve suave o borrosa, verifica sus dimensiones en píxeles y el tamaño al que se muestra.

Antes de entregar, confirma el motivo, los colores y la legibilidad en pequeño; comprueba límites y transparencia; abre el archivo descargado en su destino y conserva el SVG original junto a las exportaciones de mapa de bits necesarias. Esa última comprobación convierte una vista previa atractiva en un recurso utilizable.

Referencias técnicas: introducción a SVG de MDN, viewBox y el elemento image.