Cómo convertir archivos AI (Adobe Illustrator) a SVG
¿Qué son los archivos AI y SVG y por qué convertirlos?
Un archivo AI es el formato nativo de Adobe Illustrator, que almacena ilustraciones vectoriales en una estructura propietaria que solo Illustrator y unas pocas aplicaciones más pueden entender por completo. Es potente y compatible con funciones específicas de Illustrator como efectos en vivo, texto editable y modos de fusión complejos. Pero todo ese poder está encerrado en una caja negra. Los archivos AI son un ecosistema cerrado. Intenta usar uno en un navegador, una aplicación web o en el pipeline de un desarrollador, y verás que no sirve para absolutamente nada. El SVG (Scalable Vector Graphics), por otro lado, es el estándar abierto. Mantenido por el W3C, este formato basado en XML se renderiza de forma nativa en todos los navegadores modernos. Escala desde un diminuto favicon de 16×16 hasta una valla publicitaria gigante en 4K sin perder ni un ápice de nitidez. Como su contenido es simplemente texto plano, los desarrolladores pueden incluso manipular trazados, colores y animaciones directamente en el código. Un logo exportado como un SVG de 8 KB se verá perfecto a cualquier tamaño; el mismo logo como un PNG de alta resolución podría pesar fácilmente 200 KB o más. Esta conversión de AI a SVG es una tarea diaria en los flujos de trabajo del mundo real. Un diseñador le entrega un logo a un desarrollador web. Un equipo de UI necesita recursos de iconos. Una agencia de impresión quiere poner su marca en un sitio web. El problema es que la traducción no siempre es perfecta. La magia específica de Illustrator —filtros de rasterizado, ciertas mallas de degradado, fuentes enlazadas— no tiene un equivalente directo en SVG. Estos elementos deben simplificarse antes de exportar o serán aproximados, a veces con malos resultados, por herramientas automatizadas. Entender esto desde el principio te ahorrará un montón de trabajo.
El método más limpio: exportar SVG directamente desde Adobe Illustrator
Si tienes Adobe Illustrator, exportar directamente es la mejor manera de obtener un resultado limpio y controlable. El proceso en sí es sencillo, pero es en el panel de configuración donde las cosas pueden salir mal. Ve a **Archivo > Exportar > Exportar como**, elige SVG en el menú desplegable de formato y pulsa Exportar. Illustrator te presentará el cuadro de diálogo Opciones SVG. Presta mucha atención a estos ajustes, porque son importantes. - **Estilo**: 'Atributos de presentación' es la mejor opción si el SVG se va a estilizar o animar con CSS más adelante. Si es una imagen estática, cualquiera de las dos opciones funciona bien. - **Fuente**: Ajústalo a 'Convertir en contornos'. Lo diré de nuevo: a menos que estés absolutamente seguro de que el entorno del usuario final tiene la fuente exacta que usaste, simplemente conviértela en contornos. Esto incrusta las formas de las letras como trazados vectoriales y evita por completo los problemas de dependencia de fuentes. - **Imágenes**: Si tu diseño incluye imágenes rasterizadas como fotos o texturas, elige 'Incrustar'. Enlazar crea archivos más pequeños, pero introduce una dependencia frágil de una ruta de archivo externa que es fácil de romper. - **ID de objeto**: Usa 'Nombres de capa' si los desarrolladores necesitan apuntar a elementos específicos con JavaScript o CSS. Para recursos estáticos donde cada byte cuenta, 'Mínimo' está bien. - **Posiciones decimales**: Un valor de 2 es casi siempre la decisión correcta para gráficos de pantalla. Bajar a 1 ahorra unos pocos bytes, pero puede distorsionar visiblemente las curvas complejas. Quédate con 2. - **Minimizar**: Marca siempre esta opción para los recursos de producción. Elimina espacios en blanco y comentarios, reduciendo el tamaño del archivo en un respetable 10–20%. Antes incluso de llegar al diálogo de exportación, hay un paso de preparación crucial. Debes acoplar o expandir cualquier efecto en vivo que no se traduzca bien a SVG (usando **Objeto > Expandir apariencia**). Por ejemplo, un efecto de sombra paralela de Illustrator desaparecerá o se convertirá en una imagen rasterizada de mala calidad dentro de tu SVG. Cualquiera que haya abierto un supuesto archivo vectorial para encontrarse un JPEG borroso dentro conoce perfectamente este suplicio. Ninguno de los dos resultados es lo que quieres para un gráfico escalable.
Convertir AI a SVG online con CocoConvert
Seamos realistas: no todo el mundo tiene una suscripción activa a Adobe Creative Cloud. E incluso si la tienes, a veces simplemente necesitas una conversión rápida en un ordenador sin Illustrator instalado. Para esos momentos, un conversor online es la solución más práctica, y CocoConvert cumple con su cometido. El proceso en el [conversor de AI a SVG de CocoConvert](/convert/ai-to-svg) es sencillísimo: sube tu archivo AI, espera un momento a que se procese y descarga el SVG resultante. Sin software, sin necesidad de registrarse para las conversiones estándar. Por supuesto, hay algunas reglas básicas. CocoConvert admite archivos de hasta 100 MB, lo que es más que suficiente para la mayoría de los documentos AI. Solo los archivos de impresión más complejos, cargados con imágenes de alta resolución, superarán ese límite, y de todos modos es mejor manejarlos en Illustrator. ¿Qué es lo que mejor funciona? Las ilustraciones vectoriales planas. Los logos, iconos e ilustraciones construidos a partir de trazados básicos y degradados simples se convierten de maravilla. Si tu archivo AI se compone principalmente de formas vectoriales limpias con rellenos y trazos sólidos, puedes esperar un SVG de alta precisión. Donde te encontrarás con problemas es con la magia propietaria de Illustrator. Las mallas de degradado, los modos de fusión complejos y los efectos en vivo como 'Roughen' no tienen un equivalente directo en SVG. CocoConvert los aproxima, pero para diseños que dependen mucho de estas características, el resultado podría necesitar una limpieza manual. Lo mismo se aplica a las fuentes. Si tu archivo AI utiliza texto editable que no ha sido convertido a contornos, el conversor lo sustituirá por una fuente de respaldo. Para una tipografía precisa, convierte siempre el texto a contornos en Illustrator antes de subirlo.
Usar alternativas gratuitas: Inkscape y otras herramientas
Inkscape es un fantástico editor de vectores gratuito y de código abierto que puede convertir de AI a SVG bastante bien. Es una herramienta imprescindible para cualquiera que trabaje con vectores con regularidad pero viva fuera del ecosistema de Adobe. En Inkscape, simplemente abres el archivo AI mediante **Archivo > Abrir** y luego lo guardas inmediatamente mediante **Archivo > Guardar como**, eligiendo SVG como formato. Verás opciones para 'SVG plano' y 'SVG de Inkscape'; para la mejor compatibilidad con navegadores y otras herramientas, elige siempre 'SVG plano'. Pero hay una gran pega: la compatibilidad con PDF. La mayoría de las herramientas de terceros, incluyendo Inkscape, en realidad no leen los datos nativos de AI. Leen un flujo de datos PDF que Illustrator incrusta en el archivo. Si el archivo AI se guardó sin marcar la opción 'Crear archivo compatible con PDF', Inkscape no podrá abrirlo. Simplemente obtendrás un lienzo en blanco o un error. Si un cliente te envía un archivo AI que no se abre, esta es casi con toda seguridad la razón. Tendrás que pedirle que lo vuelva a guardar con esa opción activada. También existen otras herramientas. Affinity Designer, que es una compra única de alrededor de 70 USD (o unos 70 €), tiene una excelente importación de AI y produce SVG muy limpios. Para mí, es la mejor inversión a largo plazo si no estás subido al tren de Adobe. Para los adictos a la línea de comandos, existen herramientas como `cairosvg` y `svg-convert`, pero a menudo requieren convertir el AI a otro formato primero, lo que anula el propósito de tener un flujo de trabajo sencillo. Para una conversión rápida y puntual, la herramienta online de CocoConvert sigue siendo más rápida que instalar y aprender a usar Inkscape. Sin embargo, si te encuentras haciendo esto semanalmente, invertir el tiempo en Inkscape o el dinero en Affinity Designer valdrá la pena.
Problemas comunes y cómo solucionarlos
La conversión está hecha, pero el SVG se ve... mal. Suele pasar. Aquí están los sospechosos habituales y cómo solucionarlos. **Fuentes ausentes o sustituidas**: Abres el SVG y tu hermosa tipografía, cuidadosamente elegida, ha sido reemplazada por una fuente genérica del sistema. La solución es hacer que la fuente sea irrelevante. Antes de convertir, selecciona todo el texto en Illustrator y conviértelo en contornos (**Texto > Crear contornos**, o Mayús+Ctrl+O / Mayús+Cmd+O). Esto convierte las letras en trazados vectoriales planos, eliminando la dependencia de la fuente. **Artefactos de rasterizado dentro del SVG**: Se supone que el archivo es un vector, pero ves píxeles borrosos, o el tamaño del archivo es de una cantidad sorprendente de megabytes. Esta es una señal clásica de que los efectos de Illustrator se rasterizaron al exportar. La solución es hacerlo tú mismo, pero mejor. En Illustrator, ve a **Objeto > Expandir apariencia** antes de exportar. Esto convierte la mayoría de los efectos en vivo en sus equivalentes de trazado vectorial. **Los colores se ven diferentes**: El azul vibrante de tu marca ahora se ve apagado y sin vida. Esto es probablemente un problema de espacio de color. Illustrator a menudo usa CMYK por defecto para trabajos de impresión, pero el SVG es un formato web y vive en un mundo RGB. La solución es cambiar el modo de color del documento en Illustrator a través de **Archivo > Modo de color del documento > Color RGB** antes de exportar. **El archivo SVG es enorme**: Un logo simple que debería pesar 15 KB tiene, de alguna manera, 2 MB. Esto generalmente apunta a imágenes rasterizadas incrustadas, excesiva precisión decimal o mallas de degradado complejas que no se han simplificado. La solución es volver a exportar con la minimización activada, reducir los decimales a 2 y simplificar o expandir objetos complejos antes de empezar. **Salida en blanco de los conversores online**: Subes tu archivo AI y obtienes un SVG vacío. ¿Recuerdas esa configuración de compatibilidad con PDF de la que hablamos? Aquí es donde te la juega. El archivo AI probablemente se guardó sin la casilla 'Crear archivo compatible con PDF' marcada, y el conversor no tiene nada que leer. La única solución es volver a guardar el archivo AI original con esa opción activada.
Optimizar tu SVG después de la conversión
No envíes ese SVG todavía. Un archivo recién exportado, incluso desde Illustrator, a menudo está inflado con código redundante que añade peso sin ningún beneficio visual. Para su uso en la web, pasar tu SVG por un optimizador es un paso no negociable. **SVGO** es el estándar de la industria para la optimización de SVG. Es una herramienta de Node.js, pero su motor impulsa la increíblemente útil herramienta web en jakearchibald.github.io/svgomg. Simplemente sube tu SVG convertido, y SVGOMG te dará una vista previa en vivo y un control deslizante para ver el ahorro de tamaño de archivo en tiempo real. Para la mayoría de los recursos, puedes habilitar de forma segura las opciones para eliminar comentarios, metadatos, contraer grupos inútiles, fusionar trazados y eliminar atributos vacíos. No es raro ver reducciones de tamaño de archivo del 30–60%. Solo ten cuidado con opciones como 'Eliminar ID' si tus desarrolladores planean apuntar a elementos específicos con código. Del mismo modo, evita la fusión agresiva de trazados si el SVG está destinado a ser animado; no puedes animar trazados que se han fusionado en una sola masa. Para los recursos web de producción, también debes decidir si el SVG será 'inline' (código pegado directamente en el HTML) o externo (enlazado mediante una etiqueta `<img>` o CSS). Los SVG 'inline' son geniales porque pueden ser estilizados por tu archivo CSS principal, pero aumentan el tamaño del documento HTML y no se almacenan en caché por separado. Los SVG externos son almacenados en caché por el navegador, pero son más difíciles de manipular con CSS. Una última comprobación: valida tu SVG final usando una herramienta como el Servicio de Validación de Marcado del W3C. Cualquiera que haya pasado una hora depurando un SVG que se renderiza perfectamente en Chrome pero es un desastre total en Safari conoce el valor de este paso. Una pasada rápida por el validador detecta el código mal formado antes de que se convierta en una emergencia en producción.
Elegir el método adecuado para tu situación
Entonces, ¿cuál es la mejor manera de convertir un archivo AI a SVG? Todo se reduce a quién eres y qué intentas lograr. **Para el diseñador profesional con Illustrator:** Hazlo tú mismo. La única forma de garantizar una traducción perfecta de diseños complejos con efectos, degradados y fuentes personalizadas es hacer el trabajo de preparación —convertir texto a contornos, expandir apariencias, cambiar a RGB— y usar el propio diálogo de exportación SVG de Illustrator. Tienes el control total; úsalo. **Para el desarrollador con una fecha de entrega:** Tu diseñador acaba de soltarte un archivo AI y se ha ido. Que no cunda el pánico. Para recursos sencillos como logos e iconos, la [herramienta de AI a SVG de CocoConvert](/convert/ai-to-svg) es tu camino más rápido. Es rápida, no requiere software y cumple su función cuando no estás lidiando con diseños hipercomplejos. **Para el entusiasta del código abierto o el creativo con presupuesto ajustado:** Te encuentras haciendo esto a menudo pero no quieres pagar el 'impuesto Adobe'. Inkscape es tu respuesta. Es una alternativa potente y gratuita, pero debes tener en cuenta el requisito de compatibilidad con PDF. Si tus archivos de origen no están guardados correctamente, no funcionará. No importa qué método elijas, siempre revisa tu trabajo. Abre el SVG final en Chrome y Firefox como mínimo. Asegúrate de que los colores sean correctos, el texto sea nítido y escale limpiamente. Una revisión visual de dos minutos detecta la mayoría de los problemas de conversión antes de que se conviertan en el problema de otra persona.