Recently, Recraft launched its V4 series, where the V4 Vector and V4 Pro Vector models now support direct SVG exports. While testing and updating vector emojis for prompt-llama.com, I found the generation quality to be quite stunning.

In my previous UI design and front-end work, I frequently used Gemini to create simple SVG animations to enhance interactive experiences. If we could seamlessly turn the static SVGs generated by Recraft V4 into animated files, it would not only drastically boost front-end development efficiency but also bring more fun and creative possibilities to design. With the recent release of Gemini 3.1 Pro, I decided to combine the two and see what sparks they might create.

For my test asset, I used a 3×3 emoji grid SVG that I previously generated with Recraft V4 Pro Vector during the prompt-llama.com tests:

Round 1: Code-Only Input I fed the raw <svg> code directly to Gemini 3.1 Pro, asking it to animate each emoji. It was a complete fail. The AI couldn’t parse the visual structure from raw coordinates alone, resulting in completely chaotic animations.

Round 2: Code + Visual Reference I provided the corresponding PNG image as a visual reference, and this time, the AI’s performance improved dramatically.

Note: Since machine-generated SVGcodes easily exceed tens of thousands of characters, they frequently trigger Gemini 3.1 Pro’s single-response token limit, causing the code to truncate. To bypass this, I had the AI write a local HTMLmini-app where I could simply paste the raw SVG code to inject and generate the animations with a single click.

Recraft V4 Pro Vector +Gemini 3.1 Pro

However, the final animated results still lag behind dedicated Image-to-Video models (like Seedance 2.0) in terms of fluidity and overall perfection.

Video by Seedance 2.0

After reviewing the process, animating SVGs using Recraft V4 and Gemini 3.1 Pro currently faces 6 Core Challenges:

1. Layer Stacking : Local elements act like “stickers” layered directly over a solid background (e.g., a black base). Moving these elements exposes the blank voids underneath.

2. Merged Paths: Same-color elements (like the strokes of the ears, face outline, and butterfly) are forcefully merged into a single <path>. This makes it impossible to animate local details independently.

3. Missing Identifiers: The generated elements lack logical layering, grouping (<g> tags), or naming (IDs/Classes), making it impossible for front-end code to precisely target specific parts.

4. Code Blindness: AI cannot mentally reverse-render massive arrays of mathematical coordinates into visual images. It relies heavily on raster images (PNG/JPG) as visual context to accurately understand graphic semantics.

5. Token Limits: Machine-generated SVG source code is incredibly long, easily triggering the LLM’s single-output or context truncation mechanisms, resulting in incomplete code generation.

6. Center Point Loss: When multiple elements are present, all paths default to the absolute coordinates of the global canvas. When applying CSS rotation or scaling, finding an element’s local center point (transform-origin) is incredibly difficult, causing animations to drift off-axis easily.

To make vector SVGs animate truly fluidly, relying solely on the “brute force” of LLMs is not enough. Moving forward, a potential solution lies in engineering: developing a dedicated pre-processing workflow for SVG code to systematically resolve these structural issues.