SVG Studio

The missing bridge between AI-generated code and visual assets.

SVG Studio transforms Raycast into a lightweight IDE for vector graphics. It is designed for developers, designers, and specifically for AI-assisted workflows.

Whether you need to preview an icon generated by Gemini/ChatGPT, tweak a color attribute, or export a high-resolution PNG for a presentation, SVG Studio handles it all with a native-like experience.

🤖 The Perfect Companion for AI Coding

AI models like Gemini, ChatGPT, and Claude are amazing at writing SVG code, but they often leave you staring at raw text blocks without a preview.

SVG Studio solves this pain point:

1. Copy: Grab the raw SVG code block from your AI conversation.
2. Launch: Open SVG Studio via Raycast.
3. Visualize: The image renders instantly from your clipboard.
4. Export: Save it as a high-quality PNG asset immediately.

No more pasting code into online converters or saving .svg files just to see what they look like.

✨ Key Features

• ⚡️ Instant Preview: Automatically detects and renders SVG code from your clipboard on startup.
• 🖼 High-Res Export: Export SVGs to PNG with 1x, 2x (Retina), or 4x scaling. Perfect for slides and web assets.
• 📝 Pro Code Editor: Integrated Ace Editor provides syntax highlighting, code folding, and auto-completion.
• 🎨 Interactive Canvas:
  • Pan: Hold Space and drag to move the canvas.
  • Zoom: Use mouse wheel or on-screen controls to inspect details.
  • Auto Fit: One-click to center and fit the image to the window.
• 🌑 Dark Mode Support: The editor and canvas automatically adapt to your system's theme.
• 📋 Smart Copy: One-click to copy the rendered PNG image directly to your clipboard.

🚀 How to Use

1. Copy: Copy any SVG code (from an AI chat, a repo, or a file).
2. Open: Run the "Open SVG Studio" command in Raycast.
3. Edit & Inspect:
   • Modify code on the left to see real-time updates.
   • Use Space + Drag to pan and Scroll to zoom.
4. Export: Choose your scale (e.g., @2x) and click "Save PNG" or "Copy Image".

🛠 Technical Details

• Engine: Powered by a local Webview with Ace Editor (CDN).
• Privacy First: Rendering happens locally on your machine. No SVG data is sent to any server.
• Performance: Optimized for smooth 60fps panning and zooming.