SVG Viewer & Code Editor
Inspect, live edit SVG markup, tweak parameters and colors, paste raw code directly, and save as optimized SVG or hi-res PNG.
How to Use the SVG Viewer & Live Code Editor
Process your images with three simple steps right in your browser.
Paste Code or Upload SVG
Paste raw SVG XML markup into the code editor or drop an existing SVG file.
Live Preview & Color Tweaking
Inspect live rendering, detect the color palette, and swap fills/strokes interactively.
Save as SVG, PNG or JSX
Format and copy sanitized SVG XML, export hi-res raster PNGs (1x to 4x), or copy React JSX code.
Live SVG Editor, Markup Inspector & Color Swapper
Paste SVG code directly, inspect viewBox and element trees, tweak colors live, validate syntax, and export as optimized SVG, high-res PNG, or React JSX.
Live Code Split-Screen Editor
Edit SVG coordinates and attributes with instant live canvas preview.
Interactive Color Swapper
Automatically detects all fill and stroke hex colors in the document for instant one-click theme swapping.
React JSX Exporter
Convert raw SVG attributes (e.g. stroke-width, class) into camelCase React JSX properties with one click.
Multi-Scale PNG Rasterization
Render vector illustrations to 1x, 2x, 3x, or 4x Retina PNG files with transparent backgrounds.
Frequently Asked Questions
Everything you need to know about processing images with Docsy.
Can I paste raw SVG code directly?+
Yes! Paste any SVG code string into the editor to inspect, preview, and modify it immediately.
How do I convert SVG to React JSX?+
Click the 'Copy JSX' button in the toolbar to receive clean, camelCased JSX markup ready for your React or Next.js components.
Can I export SVG as a transparent PNG?+
Yes, select PNG format and pick your desired scale multiplier (1x to 4x) to download a high-resolution transparent image.