dev/inspector
SVG Preview & Export - Free & Instant | Smocky
Paste SVG XML or literal React JSX/TSX, or drop an SVG, JSX, or TSX file. Nothing leaves your browser.
Frequently asked questions
Why does the downloaded SVG differ from what I pasted?
The download is the Sanitized source shown in the preview. Elements, attributes, and references rejected by the sanitizer are removed and listed before you export.
Why does a missing viewBox matter?
A View box defines the coordinate window that lets SVG content scale predictably. Without one, the browser can still fit some artwork, but the file declares no scalable coordinate system.
Why are external fonts and images missing from the preview or PNG?
The Tool renders SVG as a self-contained image resource and removes external references. Fonts that are not embedded fall back, and remote images are not loaded into either preview or export.
Can I paste React component input?
Yes. Use a literal JSX or TSX component whose single root is svg. The Tool translates its markup in your browser before applying the same SVG sanitizer used for XML input.
Why are dynamic props rejected?
Props, expressions, component calls, and spreads need JavaScript to run. The Tool only accepts literal artwork so it can translate source without executing pasted code.