opsdesign

opsdesign is a browser-based SVG workspace aimed at product teams, designers and developers who need code-ready icons and illustrations. It combines a live code editor with a visual preview so you can edit SVG markup and see changes instantly.

The editor uses the Monaco engine (the same core as VS Code) and focuses on precision: optimisation that removes redundant metadata and simplifies path and DOM structure, batch processing for icon sets, and the ability to remap hardcoded colours to design tokens across files.

Export options include typed components for React, Vue, Svelte, Solid and Qwik so SVGs can be added to a codebase without manual JSX tweaks. Core editing and optimisation run in the browser, and Pro users can opt into Private Cloud Sync for saving workspace states while keeping raw file processing local.

• Batch processing up to 50 files per task
• AI credits for generating or refining SVGs and explaining structure
• Client-side editing and optimisation; optional Private Cloud Sync for Pro
• Community (free) tier with single-file processing, basic SVGO and React/Vue export

Official site: https://www.opsdesign.dev/