Vectorlab — Raster → Vector Studio

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).

Features

• 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).

Quick start

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.

Project layout

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

Credits

• Vectorization engine powered by visioncortex/vtracer.