--- title: "Editable SVG illustrations with your agent | Rainbrand" description: "Generate editable SVG illustrations with Quiver Arrow 2 in Paper. A Rainbrand Brief gives your agent each brand's illustration guidance and references." url: "https://www.rainbrand.com/use-cases/editable-svg-illustrations/" --- Use cases SVG illustrations # Brand illustrations as editable SVGs. Your agent gives Quiver Arrow 2 the brand's illustration guidance and references from a Brief, and gets back native SVGs to edit in Paper. [Get started](https://www.rainbrand.com/auth/sign-in) [Read the guide](https://docs.rainbrand.com/use-cases/editable-svg-illustrations) Gumroad · SVG illustrations ![First sale: a pink-headed creator cheering at a phone beside a sale page and a gold coin](https://www.rainbrand.com/_next/image?url=%2Fuse-cases%2Feditable-svg-illustrations%2Fgumroad-first-sale.svg&w=384&q=75&dpl=dpl_Aqdbbp64DeKYvcbqxtnYuB8uxpjK) First sale ![Small bets: three stacked tiles, teal with a waveform, yellow with a brush and pink with a book, and a cursor clicking the pink one](https://www.rainbrand.com/_next/image?url=%2Fuse-cases%2Feditable-svg-illustrations%2Fgumroad-small-bets.svg&w=384&q=75&dpl=dpl_Aqdbbp64DeKYvcbqxtnYuB8uxpjK) Small bets ![Sell anywhere: a creator at a laptop beside a shop on a globe, linked to a customer, a location and coins](https://www.rainbrand.com/_next/image?url=%2Fuse-cases%2Feditable-svg-illustrations%2Fgumroad-sell-anywhere.svg&w=384&q=75&dpl=dpl_Aqdbbp64DeKYvcbqxtnYuB8uxpjK) Sell anywhere 3 SVG FILES · ARROW 2 · PAPER ## (01) Why use Rainbrand SVG models can draw clean vectors, but they don't know a brand's outlines, palette or characters. Rainbrand gives your agent a Brief with the illustration guidance and reference images from the Brand Library. How it's made ## From a Brief to editable SVGs. Rainbrand · create\_brief Ready Brand: Gumroad Task: Three editable SVG illustrations about creator commerce Returns: Guidance and selected references 1 Brief ### Choose references from a Brief for the set. Quiver Arrow 2 No raster images First sale 51 shapes · 8 KB Small bets 28 shapes · 6 KB Sell anywhere 90 shapes · 13 KB 2 Generate ### Generate native SVGs with Arrow 2 in Paper. What to check 4 checks - Brand fit against the Brief - No embedded raster images - Selectable paths in Paper - Checked in the raw markup 3 Check ### Check the vectors before you use them. With your agent ## Ask your agent for illustrations. Connect Rainbrand and Paper to the same agent. It requests a Brief, places the references on your canvas and has Arrow 2 generate each SVG. [Read the guide](https://docs.rainbrand.com/use-cases/editable-svg-illustrations) Works with your favourite agents - [](https://www.rainbrand.com/integrations/claude/) - [](https://www.rainbrand.com/integrations/cursor/) - [](https://www.rainbrand.com/integrations/codex/) - [](https://www.rainbrand.com/integrations/chatgpt/) - [](https://www.rainbrand.com/integrations/) Claude Rainbrand connected You Make three editable SVG illustrations for gumroad.com about creator commerce. Use Paper through MCP and generate them with Arrow 2. Claude `create_brief` Gumroad illustrations Claude `get_brief` Waiting until it's ready The Brief is ready. I'll place its selected references on your Paper canvas and generate three concepts with Arrow 2: First sale, Small bets and Sell anywhere. All three are native SVGs with no embedded raster images. I've labelled them in Paper beside the references, and their paths are selectable. Illustrated with the Gumroad SVGs from the SVG illustrations guide, generated with Quiver Arrow 2 from the guidance and Brand Library references Rainbrand supplied. Customers ## Teams building with Rainbrand. How companies integrate Rainbrand into their agents and products. [All customer stories](https://www.rainbrand.com/customers/?ref=landing) Revnu > “We use Rainbrand to fetch each customer’s brand and generate accurate, on-brand creative for their ads. It means we don’t have to reinvent that part of the stack ourselves.” George Jefferson Co-founder, Revnu [Read the story: Revnu puts a brand layer inside its AI growth product](https://www.rainbrand.com/customers/revnu/?ref=landing) Letter > “We pushed Rainbrand to production as our default image solution.” Mathew Pregasen Founder and CEO, The Letter Company [Read the story: Letter builds Rainbrand into Letterpress](https://www.rainbrand.com/customers/letter/?ref=landing) The GTM Co-Founder > “I have the ideas, but turning them into great design was always a struggle. Rainbrand makes me feel like the best designer in the world, and I don’t think I’ll need to hire one for the small stuff again.” Shane O’Connor Founder, The GTM Co-Founder [Read the story: The GTM Co-Founder uses one agent across several brands](https://www.rainbrand.com/customers/gtm-cofounder/?ref=landing) ## Make your first SVG illustrations. Connect Rainbrand and Paper to your agent, add a brand and describe the illustrations you want. [Use it with your agents](https://docs.rainbrand.com/mcp/getting-started) [Integrate it with your product](https://docs.rainbrand.com/getting-started/embed-into-your-product) ### ChatGPT + Codex 1. Open the Rainbrand plugin and add it. [Open Rainbrand plugin](https://chatgpt.com/plugins/plugin_asdk_app_6ac6e5030ec88191a88001f6dc0628ca) 2. Connect your Rainbrand account when asked. It works in ChatGPT and in Codex. ### Claude 1. Open the Rainbrand connector in Claude and add it. [Open Rainbrand connector](https://claude.ai/customize/connectors?modal=add-custom-connector&connectorName=Rainbrand&connectorUrl=https%3A%2F%2Fmcp.rainbrand.com%2Fmcp) 2. Select Connect, then sign in to Rainbrand. You can also install the [Rainbrand Skill](https://docs.rainbrand.com/mcp/getting-started#standalone-rainbrand-skill) or the [plugin](https://github.com/rainbrandai/rainbrand-skills/releases/latest/download/rainbrand.claude-plugin.zip). ### Claude Code 1. Add Rainbrand's plugin marketplace in your terminal. ``` claude plugin marketplace add rainbrandai/rainbrand-skills ``` 2. Install the Rainbrand plugin, including its Skill and MCP connection. ``` claude plugin install rainbrand@rainbrand ``` 3. Start a new Claude Code session, then use /mcp to sign in to Rainbrand. You can also [connect with MCP](https://docs.rainbrand.com/mcp/getting-started#claude-code-installation-options) or install the [Rainbrand Skill](https://docs.rainbrand.com/mcp/getting-started#standalone-rainbrand-skill). ### Cursor 1. Add Rainbrand to ~/.cursor/mcp.json. ``` { "mcpServers": { "rainbrand": { "url": "https://mcp.rainbrand.com/mcp" } } } ``` 2. Sign in from the Cursor CLI. ``` agent mcp login rainbrand ``` You can also install the [Rainbrand Skill](https://docs.rainbrand.com/mcp/getting-started#standalone-rainbrand-skill) or the [plugin](https://github.com/rainbrandai/rainbrand-skills/releases/latest/download/rainbrand.cursor-plugin.zip). ### API 1. Create an API key in your account settings, then list your brands. ``` curl https://www.rainbrand.com/api/v1/brands -H "x-api-key: $RAINBRAND_API_KEY" ``` Integrating Rainbrand into your app? [Read the API docs](https://docs.rainbrand.com/api). SVG illustrations FAQ ## Asked, answered. [All FAQs](https://www.rainbrand.com/faq/) ### What do I need to make SVG illustrations? An agent connected to both Rainbrand and Paper through MCP, with Paper Desktop open on the file you want to use, and a ready brand or sources such as a website to create one. Paper runs Arrow 2 for you, so you don't need a separate Quiver API key. [Set up both connections](https://docs.rainbrand.com/use-cases/editable-svg-illustrations#run-it-with-your-agent). ### What does the Brief add to the illustrations? The Brief selects the illustration guidance and Brand Library references for the task. Gumroad's guidance describes heavy black outlines, flat pink, yellow and teal fills and simple dimensional forms, and its own illustrations showed Arrow 2 the palette, outlines, characters and depth. [How Briefs work](https://www.rainbrand.com/briefs/). ### What if the brand has no illustrations to reference? Make raster concepts from the Brief's guidance first, with your own tools or a supported image model through the [AI Gateway](https://www.rainbrand.com/ai-gateway/), then place the one you choose in Paper as Arrow 2's reference. The Gumroad SVGs came straight from existing Brand Library illustrations, with no raster step. ### Can I edit the SVGs? Yes. Arrow 2 returns native SVG files made of vector paths, with no embedded images. Select and change any shape in Paper, or download the files and use them as they are. ### How do I check the illustrations before I use them? Compare them with the Brief and fix anything that looks off. Read the raw SVG markup to confirm there are no embedded raster images, since a flattened preview can't show that, then check in Paper that the paths are selectable. To check one against the brand, export it and [request a Review](https://www.rainbrand.com/reviews/). The brand layer for agents. Rainbrand builds and maintains shared brand context for your agents and products. [Get started](https://www.rainbrand.com/auth/sign-in) [Read the docs](https://docs.rainbrand.com/) [View pricing](https://www.rainbrand.com/pricing/)