How to Generate Editable SVG Vector Graphics with QuiverAI Arrow 2
Step-by-step workflow for crafting precise, clean Scalable Vector Graphics using QuiverAI Arrow 2, fine-tuning Bézier anchor nodes, and importing grouped layers into Figma and React.
Step 1: Formulate Geometric Prompts Specifying Style and Constraints
Arrow 2 synthesizes vector tokens directly. Prompt with clear stylistic primitives (such as "minimalist duotone", "flat line art", or "isometric technical icon") and state intended layer structure rather than photorealistic lighting descriptions.
# Example prompt: "Minimalist cybersecurity shield icon, dual-tone indigo, geometric cubic curves, isolated on transparent background"
Step 2: Configure Output Parameters: Canvas Bounds & Node Budget
In the QuiverAI studio interface or via API parameters, set viewBox dimensions (e.g. 512x512) and configure maximum anchor node limits (e.g. 48 nodes for UI icons, 128 nodes for complex illustrations) to maintain optimal node economy.
// QuiverAI API configuration
const options = {
model: "arrow-2",
viewBox: "0 0 512 512",
maxNodes: 64,
allowGradients: true,
outputFormat: "svg"
};
Step 3: Generate and Inspect Semantic Group Layers in the Live Preview
Arrow 2 completes generation in under 4 seconds. Inspect the layer tree on the right-hand panel to confirm that distinct visual components reside within organized <g id="..."> container tags with correct fill and stroke attributes.
# Verify XML DOM tree: check for closed tags, clean cubic Bézier curves (C commands), and absence of ragged path soup
Step 4: Export Directly to Figma, Penpot, or React JSX
Click "Copy SVG" to copy clean XML directly into your clipboard. In Figma or Penpot, press Cmd+V / Ctrl+V to paste as native vector shapes with editable anchor points. Alternatively, export directly as a styled React component.
// Front-end React / Next.js implementation
import React from 'react';
export function VectorBadge({ className = "w-8 h-8 text-indigo-500" }) {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" className={className}>
<g id="badge-container" fill="currentColor">
<path d="M256 40 L440 120 V260 C440 370 256 472 256 472 C256 472 72 370 72 260 V120 Z" />
</g>
</svg>
);
}