SEEVG – SVG Inspector

A visual SVG code inspector that lets you explore and understand SVG nodes by highlighting which nodes correspond to which lines of code in real-time.

https://dfosco.github.io/seevg

Features

• 🔍 Visual-Code Sync: Hover over SVG elements to highlight corresponding code
• 🔒 Lock Elements: Click any element to lock focus and scroll to its code
• 🌓 Theme Toggle: Switch between dark and light backgrounds
• 🔎 Zoom Control: Zoom in/out to inspect details (25% - 300%)
• 📝 Live Code Editor: Edit SVG code with syntax highlighting powered by CodeMirror

Development

# Run linter
npm run lint

# Deploy to GitHub Pages
npm run deploy

License

MIT

Credits

Default SVG illustration by unDraw