A clean, single-page web app that converts raster images (PNG/JPEG/WEBP/GIF/BMP) into scalable SVG vectors using the vtracer engine via WebAssembly (WASM).
- 100% Client-Side Processing: No backend server is required. Images are processed completely offline inside your browser using WebAssembly.
- Drag-and-drop upload with thumbnail preview and file info.
- Live tracing controls — mode (color / B&W), layout hierarchy (stacked / cutout), curve smoothing (spline / polygon), and sliders for filter speckle, color precision, and layer difference.
- Side-by-side compare — original raster vs. natively-rendered SVG on a checkerboard canvas, with synced zoom so you can inspect the vector paths.
- Download SVG once a conversion succeeds.
- Responsive dark UI that adapts from wide monitors down to mobile devices.
- Multi-language support (English and Japanese automatically detected based on browser settings).
Because modern browsers enforce strict CORS policies for loading .wasm files and ES modules (<script type="module">), you cannot simply double-click index.html to run the app. You must serve it via a local web server.
# 1. Start a local HTTP server in the root of the project
python -m http.server 8000
# Alternatively, using Node.js:
# npx serve -p 8000# 2. Open your browser
http://127.0.0.1:8000/Alternatively, you can host the repository directly on GitHub Pages, Vercel, Netlify, or any other static hosting provider, and it will work out of the box.
VectorLab/
├── index.html # SPA markup
├── css/
│ └── style.css # dark studio theme
└── js/
├── app.js # UI controller, image handling, WASM bridging
├── vtracer_webapp_bg.js # WebAssembly JS wrapper (generated by wasm-bindgen)
└── vtracer_webapp_bg.wasm # Compiled vtracer WebAssembly module
- Vectorization engine powered by visioncortex/vtracer.