Key Takeaways

  • Claude Opus 5.5 writes clean, valid SVG vector code directly in text, eliminating the malformed coordinates common in older models.
  • In side-by-side prompt tests on botanical icons (a Boston fern, a cactus, and a snake plant), Opus 5.5 preserved geometric accuracy and cohesive visual style across assets.
  • Competing language models still produce severe visual defects when asked for vector paths, including anatomical bugs like legs sprouting from character heads.
  • Because the generated vector assets share clean coordinate structures, developers can animate them directly in front-end code without manual cleanup in design software.

Why Raw Vector Code Beats Rasterized Mockups

Most product teams burn hours converting raster images or static design assets into usable web code. When you ask a standard frontier model to write raw SVG markup, it usually miscalculates coordinates. Curves do not close properly, layers overlap randomly, and visual proportions break.

Claire Vo previously stepped away from Claude models because of verbose, preachy responses. But in her recent tests with Opus 5.5, the model showed an unexpected strength: generating production-ready vector assets directly in raw SVG code.

“Now, what do I love that I think is so adorable that we're going to get to is these new models,” Vo explained. “I don't know if you all have missed this. These new models can make SVGs and they're so good.”

Instead of generating static pixel grids like standard image diffusion tools, Opus 5.5 generates mathematical vector paths. When Vo prompted the model to draw a collection of desk plants, the output was immediately usable.

“So, it made little SVGs for a Boston fern, a cactus, a snake plant,” Vo said. “They all look like the little plants. They're so adorable.”

Because the output is raw text markup, you can drop the code directly into a web component or an HTML file. You can adjust fill colors with CSS variables, scale the viewport to any screen resolution without raster blur, and manipulate individual path nodes using front-end animation libraries.

The Gap in Spatial Precision

Generating valid code that renders as a clean visual object requires spatial reasoning that most models lack. When other models attempt to write multi-path SVGs, they lose track of coordinate anchors. Paths overlap incorrectly, group tags split, and characters turn into distorted shapes.

Vo tested character emotions across multiple frontier models to see how they handled structural anatomy. Opus 5.5 created distinct, emotionally expressive characters with consistent geometry. Other models failed basic anatomy tests.

“This is one where Opus 55, in my opinion, did the best, spoiler alert, SVG illustrations,” Vo noted. “I did compare this to other models. It did the best job both in style and design and also some of the other ones had bugs, but the legs were going out of its head and stuff.”

Beyond avoiding anatomical bugs, Opus 5.5 held stylistic rules constant across separate prompts. The line weights, color palettes, and joint structures matched across the set.

“This is super cute. This is all in code,” Vo said. “They're very adorable and they have consistency across them, so they could be animated.”

When vector code has consistent path names and identical layer counts across emotional states (happy, confused, celebratory), a front-end engineer can interpolate the points with CSS transitions or web animation tools without hiring an illustrator.

What to Do With This

Open an Opus 5.5 prompt session and ask for a set of three user interface status icons (success, warning, error) written as raw inline SVG code. Specify a shared 24x24 viewBox, a single stroke-width of 2px, and standard semantic color tokens. Test whether the paths render cleanly in your browser without manual edits.