Noticias
8 min

Cómo crear SVG con Claude y Gemini MCP

Genera SVG estructurado y ligero en Claude con la herramienta generate_svg de @converly/gemini-mcp: componentes animados, visualización de datos, iconos y diagramas técnicos.

El SVG está viviendo un momento dulce. Más del 63 % de los sitios web lo usan, los desarrolladores están obsesionados con mantener archivos ligeros y legibles, y la comunidad se ha vuelto contra la «sopa de nodos» generada por IA que se ve bien pero que se desmorona en cuanto intentas editarla. La herramienta generate_svg de @converly/gemini-mcp toma un enfoque distinto: Gemini escribe el XML en crudo, no una trama rasterizada.

Funciona bastante bien; échale un vistazo:

Navegación rápida

Salta directamente a lo que buscas:

Qué hace bueno un SVG de IA | Lo que necesitas | La vista previa | Componentes de UI animados | Visualización de datos | Sets de iconos | Diagramas técnicos | Arte generativo | Embeber SVG | Consejos

Qué hace bueno un SVG de IA

La mayoría de «generadores de SVG con IA» producen una imagen rasterizada y le pasan por encima un auto-tracer. El resultado parece plausible hasta que lo abres en Figma o VS Code y te encuentras miles de nodos de path sin estructurar, sin agrupación semántica y con un tamaño de archivo que avergonzaría a un JPEG. La comunidad de desarrolladores tiene una palabra para esto: node soup (sopa de nodos).

Lo que los desarrolladores (y yo) queremos es que el SVG se trate como código. Archivos ligeros (1-3 KB), XML legible, agrupaciones <g> lógicas, atributos viewBox correctos y una salida que un desarrollador pueda abrir y editar sin sufrir demasiado. Las propiedades personalizadas de CSS en el SVG (fill="var(--primary-color)") se consideran ya el mínimo exigible para cualquier cosa que vaya a un sistema de diseño. Un único icono que responde al modo oscuro es infinitamente más útil que uno con el color hardcoded.

La herramienta generate_svg de Gemini vía el MCP escribe XML en crudo. Código vectorial estructurado de verdad, con grupos con nombre, atributos de accesibilidad correctos y animaciones CSS donde las pidas. Es una categoría distinta de salida respecto a lo que producen la mayoría de herramientas de SVG con IA.

Lo que necesitas

Usa tu configuración igual que en el resto del conjunto de Gemini MCP. Necesitas Claude Code o Claude Desktop, el servidor @converly/gemini-mcp y una clave de API de Gemini de Google AI Studio (el plan gratuito sobra para generar SVG).

Añádelo a Claude Code con un comando:

claude mcp add gemini-mcp -s user -- npx -y @converly/gemini-mcp

O añádelo al claude_desktop_config.json de Claude Desktop:

{
  "mcpServers": {
    "gemini": {
      "command": "npx",
      "args": ["@converly/gemini-mcp"],
      "env": { "GEMINI_API_KEY": "your-key-here" }
    }
  }
}

¿Nunca has configurado un MCP? Hay una guía paso a paso completa para Claude Desktop aquí.

Cómo es la vista previa

Cuando ejecutas generate_svg, la salida se renderiza en línea dentro de Claude Desktop, en el panel de vista previa de la MCP app; no como un bloque de código, sino como un vector renderizado en vivo. El panel incluye controles de zoom, la ruta del archivo guardado y el prompt que lo creó. Aquí está el set de iconos renderizándose en el chat:

El SVG del set de iconos renderizándose en vivo en Claude Desktop; el panel de la MCP app muestra el vector renderizado, no un bloque de código.

Y aquí está la salida de arte generativo con el panel completo visible: controles de zoom, ruta del archivo y el prompt usado para generarlo:

El panel de la MCP app te da controles de zoom, la ruta del archivo guardado y el prompt completo; todo lo que necesitas para iterar o compartir.

El SVG completo se guarda en disco en la ruta que indiques. La vista previa en línea sirve para evaluar: composición, proporciones, si la animación está funcionando. El archivo está listo para producción.

Componentes de UI animados

La categoría más impresionante es la de SVG con animaciones CSS funcionando. Spinners de carga, indicadores de progreso, iconos animados: cosas que normalmente requerirían rastrear cosas por internet, una librería JS o un archivo CSS hecho a mano. Simplemente describes el movimiento y Gemini se ocupa de las matemáticas de los keyframes.

Aquí tienes un spinner de carga de tres arcos:

1,3 KB de vector en vivo corriendo en tu navegador. Los equipos que antes recurrían a Lottie o a librerías de animación CSS-in-JS para estados de carga simples podrían replanteárselo cuando un SVG de 1 KB hace el mismo trabajo.

Visualización de datos

La visualización de datos en SVG sin una librería JS es un patrón infrautilizado. Para gráficos estáticos o ligeramente dinámicos —gráficos de barras, líneas, anillos de progreso— no hay razón para meter D3 o Chart.js si los datos no cambian en tiempo de ejecución.

Un SVG bien estructurado con animaciones CSS pesa 2 KB, carga al instante y funciona en cualquier sitio, incluidos el correo electrónico y los generadores de sitios estáticos.

Aquí tienes un gráfico de barras con animaciones CSS de crecimiento: las barras escalan desde la línea base al cargar y las etiquetas de valor aparecen con fundido después. Título y descripción accesibles, resaltado en naranja del valor máximo:

Weekly AI tool usage A bar chart showing AI tool usage stats from Monday to Friday, with Friday reaching the peak at 93. Mon Tue Wed Thu Fri 42 67 85 71 93

2 KB. Accesible. Animado. Sin dependencias. Hurrah. Las barras crecen al cargar la página y los valores aparecen con fundido; todo con keyframes CSS dentro del SVG, nada en el contexto JS de la página.

Sets de iconos

La coherencia entre sets de iconos es muy deseable. Aplicar las mismas reglas geométricas, el mismo grosor de trazo, el mismo centro visual: cinco iconos claramente dibujados por la misma mano. Este es justo el tipo de restricción espacial que se beneficia de un modelo capaz de razonar sobre coordenadas en lugar de intentar generar una imagen.

Pedí cinco iconos de UI en una rejilla 24x24 consistente con trazos de 2 px, todos del mismo color índigo, cada uno en una tarjeta a juego:

Minimal UI Icon Set Five clean indigo UI icons: Dashboard, Settings, User, Search, and Notifications.

La salida es un único SVG con los cinco iconos compartiendo las mismas reglas de clase CSS. Cambia stroke: #4F46E5 por stroke: var(--icon-color) y todo el set responde a las variables de tema de tu sistema de diseño: es una edición de 30 segundos sobre un XML limpio y legible.

Diagramas técnicos

Los diagramas de arquitectura, los flujos de datos, cajas y flechas se hacen y se estilizan con facilidad. El SVG maneja esto bien porque puedes especificar coordenadas exactas, y el razonamiento espacial de Gemini es lo bastante fuerte para colocar nodos y rutar flechas sin que se crucen por donde no deben, que es justo lo que falla cuando describes un diagrama en palabras a un modelo que no sabe hacer geometría.

Aquí tienes el propio flujo de datos de Gemini MCP, generado en una sola llamada:

Gemini MCP Data Flow Architecture diagram: Claude Desktop sends a tool call to @converly/gemini-mcp, which sends an API request to Google Gemini API and returns the SVG response as a rendered preview. Claude Desktop @converly/gemini-mcp Google Gemini API tool call → API request → ← SVG response ← rendered preview

Flechas rutas correctamente, etiquetas colocadas sin colisiones. Para diagramas de artículos este es el flujo que más uso: describo los nodos y las relaciones en lenguaje natural y obtengo un SVG limpio en segundos.

Arte generativo

Menos práctico, más «porque se puede». El arte geométrico generativo requiere cálculos exactos de coordenadas y progresiones matemáticas consistentes. Pedí 12 hexágonos concéntricos, cada uno rotado 15 grados más que el anterior, con colores de trazo que pasan del índigo profundo al lavanda (eso fue lo que Claude usó para probar la generación de SVG).

1,6 KB. Queda chulo.

Embeber SVG directamente

Todos los SVG de esta página están embebidos en línea: no son imágenes, ni archivos externos, sino XML de SVG real en el HTML. Es el enfoque correcto para cualquier cosa con animaciones CSS (los SVG externos no pueden controlarse con los estilos de la página) y para cualquier cosa que quieras accesible a los lectores de pantalla.

En WordPress, un bloque wp:html envolviendo el SVG es todo lo que necesitas. El SVG se renderiza in situ, las animaciones funcionan y escala al ancho del contenedor. Una etiqueta <img> que referencie a un SVG renderizará las formas estáticas pero eliminará las animaciones CSS; el embebido en línea es el único enfoque que funciona para SVG animados.

Para SVG informativos —un diagrama que explica algo— incluye <title> y <desc> como primeros hijos del elemento <svg>, con role="img" y aria-labelledby apuntando a ambos. Para SVG decorativos —spinners, arte generativo— añade aria-hidden="true". Gemini incluye estos atributos correctamente cuando describes el propósito del SVG en tu prompt.

Consejos para mejores SVG

Describe el estilo de forma explícita aplicando «Clean flat technical style», «minimal icon style», «artistic generative»: usa el parámetro style de la herramienta. technical para diagramas y gráficos, minimal para iconos, artistic para trabajo generativo. Gemini MCP también tiene algunos patrones de diseño en la descripción de la herramienta.

Define las dimensiones del viewBox en tu prompt, por ejemplo: «680x300 viewBox» le dice a Gemini exactamente cómo estructurar las coordenadas. Sin esto obtienes algo funcional que puede necesitar un redimensionado.

Sobre las propiedades personalizadas de color CSS: si el SVG va a un sistema de diseño, añade a tu prompt «usa una propiedad personalizada de CSS para el color, por defecto #6366f1». Obtienes fill: var(--icon-color, #6366f1), que es muchísimo más útil que un hex hardcoded.

Especifica la intención de accesibilidad. «Esto es un SVG decorativo» te da aria-hidden="true". «Este diagrama explica X» te da <title>, <desc> y aria-labelledby.

Para las animaciones, sé preciso con el timing. «Rota en sentido horario completando una rotación completa cada 3 segundos» produce mejor salida que «rota en sentido horario». Las matemáticas de los keyframes escalan con la especificidad de tu descripción.

Guarda en una ruta temporal. Especifica un outputPath en tu prompt o el archivo acaba en el directorio de salida por defecto del MCP con un nombre de archivo con timestamp.

La visión general completa de Gemini MCP cubre todo lo demás que el servidor puede hacer; está aquí. La guía de generación de imágenes es un buen complemento de esta: mismo flujo, salida distinta.

Artículos relacionados