Crear SVG con Divi AI: la función nueva de Divi 5

En pocas palabras: Divi AI Agents, de Elegant Themes, crea SVG personalizados (íconos, divisores, badges) a partir de instrucciones en texto en el Visual Builder de Divi 5. El resultado se inserta como SVG Module editable, con control de Fill y Stroke, según el tutorial oficial publicado el 29/10/2026.

Elegant Themes anunció el 29 de octubre de 2026 que Divi AI Agents ya permite crear SVG con Divi AI a partir de instrucciones en texto: describís un ícono, un divisor o un badge, el Agente lo dibuja y lo inserta como SVG Module editable, directo en el Visual Builder de Divi 5.

Divi AI Agents es una función de Elegant Themes incluida en los planes Divi AI y Divi Pro que genera y modifica gráficos vectoriales dentro del Visual Builder usando lenguaje simple. El Agente trabaja en dos modos, Ask para consultas y Build para aplicar cambios reales, y cada acción que toca la página queda sujeta a aprobación manual antes de guardarse.

¿Qué permite hacer la nueva función de SVG en Divi AI Agents?

Divi AI Agents puede crear SVG con Divi AI completos a partir de una descripción en lenguaje simple: le pedís un ícono, un divisor o un badge, indicás estilo y colores, y el Agente lo agrega al layout como SVG Module editable. La diferencia con «pedirle una imagen a una IA» no es un detalle menor: una imagen generada es un bitmap cerrado, mientras que esto queda como código SVG que podés seguir editando a mano, por chat o cambiando Fill y Stroke desde el panel de Diseño. Eso es lo que hace que valga la pena mirarlo con atención.

El Agente corre en dos modos, según detalla el tutorial de Elegant Themes: Ask, que solo inspecciona y responde preguntas, y Build, el único que modifica de verdad el layout. Mientras trabaja, muestra notas de progreso en el chat, y cualquier acción que requiera aprobación se pausa con controles de Approve y Reject; antes de guardar la página pide confirmación de nuevo. Si algo sale mal, el gear icon de arriba a la izquierda abre el Page Menu con la opción Undo, y la propia conversación tiene un control para restaurar un punto anterior del layout (ojo: restaurar no guarda automáticamente, así que si cerrás sin guardar, volvés al estado guardado anterior, no al restaurado). Cubrimos ese tema en detalle en configurar las reglas de los agentes de IA.

La función viene incluida con Divi AI y con Divi Pro. No es un add-on aparte.

¿Qué tiene que llevar un buen prompt para generar un SVG?

Más que memorizar una secuencia de clics, lo que conviene entender es qué información necesita el Agente para no improvisar por su cuenta. Según el tutorial de la fuente, un prompt completo resuelve cuatro preguntas a la vez: qué forma tiene el gráfico (trazo, relleno o ausencia de relleno, nivel de detalle), dónde va (el elemento exacto, adjuntado como Context, no descrito en palabras), qué colores usa (idealmente una variable ya definida en el sitio, no un hex suelto) y qué tamaño y posición final tiene que quedar.

Si falta alguno de esos cuatro puntos, el Agente completa el hueco a su criterio, y ahí es donde el resultado se aleja de lo que tenías en la cabeza. «Agregá un ícono lindo» deja los cuatro puntos abiertos; un prompt como el que usa el tutorial —curvas sin relleno, stroke consistente, variable de color puntual, ancho en píxeles, columna adjuntada como Context— no deja ninguno.

Ejemplo hipotético (para separarlo del caso de la fuente, pensemos en otro escenario): imaginate que no necesitás una hoja decorativa sino un ícono de lupa para el botón de búsqueda del header. Las cuatro preguntas cambian de respuesta, pero la lógica es la misma: forma (trazo simple, círculo más línea diagonal, sin relleno), destino (el botón de búsqueda, adjuntado como Context, no «el botón de arriba»), color (la variable de acento del sitio, no la Light del ejemplo de la fuente) y tamaño (chico, pensado para caber dentro del botón sin romper su padding). La diferencia de fondo con la hoja es la accesibilidad: una hoja decorativa se puede ocultar de los lectores de pantalla sin perder nada; un ícono de lupa dentro de un botón de búsqueda cumple una función, así que el botón necesita un nombre accesible («Buscar») y el SVG no se puede ocultar sin dejar el botón mudo para quien usa lector de pantalla.

Ese es, en el fondo, el primer criterio de decisión real antes de escribir cualquier prompt: ¿el gráfico decora o informa? La respuesta cambia todo lo que viene después, desde el prompt inicial hasta el tratamiento de accesibilidad final. Complementá con armar una landing page en WordPress si el ícono forma parte de una página de conversión.

¿Cómo refinar o editar en lote varios SVG en la misma conversación?

Para refinar un SVG alcanza con seguir en la misma conversación, pero hay que nombrar qué cambia y qué se mantiene igual: el Agente usa el contexto previo del chat, aunque eso no reemplaza revisar el resultado cada vez. Para un solo ícono se selecciona o adjunta su SVG Module; para un lote completo, se adjunta la sección entera y se chequea que un Scope anterior no haya quedado limitando el pedido a un solo módulo.

Un detalle que documenta el propio tutorial de Elegant Themes y que conviene tener presente: en su prueba, subir el Width de un ícono de 120px a 144px no cambió nada visualmente, porque el Max Width seguía topeando el tamaño real. Esto no es un bug exclusivo del Agente, es cómo funciona el CSS de toda la vida: Max Width actúa como techo aunque Width pida más, así que cualquier herramienta (IA o no) que solo toque un valor y se olvide del otro va a producir el mismo resultado invisible. Por eso, más que recordar ese caso puntual, conviene quedarse con el criterio general: después de cualquier pedido de resize, abrí Design → Sizing del módulo y confirmá que Width y Max Width coincidan con lo que pediste, y revisá también el Stroke del módulo, porque puede estar pisando el valor que trae el código SVG.

¿Qué límites y cuidados tiene esta función (costos, accesibilidad y SVG existentes)?

Los pedidos al Agente consumen el AI Wallet, que trae $5 incluidos por mes aparte de la generación ilimitada de texto, imagen, código y layouts que ya tenía Divi AI fuera del Agente. Es decir: usar el chat para pedir textos o imágenes no gasta ese saldo, pero cada vez que el Agente toca el canvas en modo Build, sí.

Función	¿Usa el AI Wallet?	Límite
Pedidos del Agente en modo Build (crear/editar SVG)	Sí	$5 incluidos por mes
Generación de texto, imagen, código y layouts fuera del Agente	No	Ilimitada dentro de la suscripción Divi AI
Disponibilidad de Divi AI Agents	–	Incluido en Divi AI y Divi Pro

En accesibilidad, el criterio ya quedó planteado más arriba con el ejemplo de la lupa: decorativo versus informativo. Vale la pena bajarlo a una lista corta de chequeo antes de guardar cualquier SVG:

• ¿Se puede sacar sin que cambie el sentido del contenido alrededor? Si sí, es decorativo: pedile al Agente que lo marque como oculto para tecnología asistiva (aria-hidden) y sin foco de teclado (focusable=»false»), sin agregar una etiqueta descriptiva. En la prueba de la fuente, el resultado conservó esos dos atributos después de refinar el gráfico.
• ¿El gráfico está dentro de un botón o un link, o reemplaza un texto? Si sí, es informativo: necesita un nombre accesible claro, y el elemento interactivo que lo contiene nunca se oculta, aunque el ícono en sí sea simple.
• ¿Es un logo? Tratalo como informativo por default: casi siempre identifica algo (la marca, un link a inicio), así que necesita nombre accesible, no solo un tooltip visual.

Para SVGs que ya tenés armados, la vía más predecible es pegar el código completo en el campo SVG Code del módulo, no subir el archivo. WordPress bloquea la subida de archivos SVG por default porque un SVG mal formado puede incluir código ejecutable; el workflow de código evita ese problema de entrada. Si igual preferís subir el archivo, hace falta un proceso que lo sanee antes de publicarlo.

¿Cómo empezar a usar Divi AI Agents para crear tus propios SVG?

Para arrancar hace falta Divi 5 con un plan Divi AI o Divi Pro activo; sin eso, el ícono del Agente ni aparece en el sidebar del builder. Después, la lógica que importa es la de las cuatro preguntas (forma, destino, color, tamaño) más el criterio de decorativo versus informativo antes de tocar accesibilidad. Revisá siempre en desktop y en mobile antes de guardar, y recién ahí aplicá el mismo approach a otros gráficos del sitio.

Si estás probando esto en un entorno local, después lo subís sin drama a un hosting WordPress como el de Donweb, que ofrece hosting optimizado para WordPress.

Errores comunes al crear SVG con Divi AI

• Pedir algo vago tipo «agregá un ícono lindo». Sin especificar trazo, relleno y nivel de detalle, el Agente completa esos huecos a su criterio, y el resultado rara vez coincide con lo que tenías en la cabeza.
• Describir el elemento en vez de adjuntarlo como Context. «La columna de la izquierda» es ambiguo si el layout cambió de orden; adjuntar el elemento puntual sacado del canvas evita que el Agente edite la sección equivocada.
• Tocar Width sin revisar Max Width. No es magia de la IA, es CSS estándar: Max Width manda aunque pidas un Width mayor. El tutorial de Elegant Themes documentó justo este caso con un ícono que no crecía hasta ajustar los dos valores juntos.
• Ocultar con aria-hidden un SVG que en realidad transmite información. Si el gráfico cumple una función (un ícono dentro de un botón, por ejemplo), esconderlo de los lectores de pantalla rompe la accesibilidad en vez de mejorarla.

Preguntas Frecuentes

¿Qué es el módulo SVG de Divi 5?

Es el bloque de Divi 5 que acepta código SVG pegado o un archivo subido, con pestañas de Design para Fill y Stroke y una pestaña de Content con un campo Title para gráficos que necesitan descripción accesible. Es el mismo módulo donde aterriza cualquier SVG que genera Divi AI Agents.

¿Cómo le pido a una IA que me genere un ícono SVG?

Resolvé cuatro cosas en el mismo prompt: forma y trazo, elemento de destino adjuntado como Context (no descrito en palabras), color (idealmente una variable del sitio) y tamaño final. Cuanto más específico el pedido, menos vueltas necesitás para que quede bien a la primera.

¿Por qué WordPress no me deja subir archivos SVG?

WordPress bloquea la subida de archivos SVG por default porque un SVG mal formado puede incluir código ejecutable. En Divi 5 se evita ese límite usando el campo SVG Code del módulo para pegar el markup directo, en vez de subir el archivo.

¿Cómo hago que un ícono decorativo no lo lean los lectores de pantalla?

Primero confirmá que sea decorativo de verdad: si lo sacás y el contenido alrededor sigue teniendo el mismo sentido, lo es. Después le pedís al Agente que marque el SVG como oculto para tecnología asistiva y sin foco de teclado, sin agregar una etiqueta descriptiva. El resultado típico conserva los atributos aria-hidden=»true» y focusable=»false» en el código del gráfico.

¿Cuánto cuesta usar Divi AI Agents para crear gráficos?

Los pedidos del Agente en modo Build consumen el AI Wallet, que incluye $5 por mes dentro de los planes Divi AI y Divi Pro. Ese saldo es aparte de la generación ilimitada de texto, imagen, código y layouts que ya ofrecía Divi AI fuera del Agente.

Conclusión

Lo que cambia con esta función no es que Divi AI dibuje cosas, eso ya lo hacía. Lo que cambia es que ahora el resultado queda como SVG Module editable, con código que podés retocar a mano o seguir afinando por chat, en vez de una imagen cerrada. Para alguien que necesita un ícono rápido sin abrir Illustrator, es un ahorro de tiempo real. Para proyectos más grandes, el punto a vigilar no cambia por usar IA: decidir si el gráfico decora o informa antes de tocar accesibilidad, y chequear Width contra Max Width antes de dar por terminado el trabajo. Son criterios viejos, aplicados a una herramienta nueva.

Fuentes

• Elegant Themes – Creating Custom SVGs with Divi AI Agents (tutorial oficial, 29/10/2026)