SVG Vectorizer

Professional web tool to convert bitmap images (PNG, JPG, etc.) to vector SVG with ultra-smooth curves and advanced color options.

Features

High-Quality Vectorization

• 3-step pipeline: Pre-processing → Vectorization → Post-processing
• Ultra-smooth curves: Completely eliminates jagged edges and pixelation
• Smart upscaling: 2x scaling with Lanczos3 for better quality
• Gaussian blur: Aggressive smoothing before vectorization

Color Modes

• Monochrome: Convert to a single customizable color
• Color palette: 2-32 colors with automatic detection
  • Minimum (2): Maximum simplification
  • Several (8-16): Balance between detail and simplicity
  • All (32): Maximum fidelity

Advanced Controls

• Threshold: Detail level control (0-255)
• Turd Size: Remove small areas/noise
• Smoothing: Bezier curve adjustment (0-15)
• Number of colors: Dynamic slider for palette

Technologies

• Next.js 16: React framework with App Router
• TypeScript: Static typing
• Tailwind CSS 4: Modern styling
• Sharp: High-performance image processing
• ImageTracerJS: Pure JavaScript vectorization (Vercel compatible)

Local Installation

# Clone repository
git clone <repo-url>
cd svg-vectorizer

# Install dependencies
npm install

# Run in development
npm run dev

# Open browser at http://localhost:3000

Usage

1. Upload image: Drag or select an image (PNG, JPG, etc.)
2. Configure options:
   • Select mode: Monochrome or Palette
   • Adjust smoothing as needed
   • Configure number of colors (if using palette)
3. Vectorize: Click "Vectorize Image"
4. Download: Click "Download SVG"

Deployment on Vercel

Option 1: Deploy with CLI

# Install Vercel CLI
npm install -g vercel

# Login
vercel login

# Deploy
vercel

# Deploy to production
vercel --prod

Option 2: Deploy from GitHub

1. Push code to GitHub
2. Import project at vercel.com
3. Vercel will automatically detect Next.js
4. Click "Deploy"

Environment Variables

No special environment variables required.

Vercel Optimizations

• ✅ No native dependencies (pure JavaScript only)
• ✅ Sharp optimized for serverless
• ✅ ImageTracerJS compatible with edge functions
• ✅ Automatic build time optimization
• ✅ No additional configuration needed

Processing Algorithm

1. Pre-processing (Sharp)

- Upscale 2x with Lanczos3
- Gaussian blur (sigma=8)
- High-quality PNG conversion

2. Vectorization (ImageTracer)

- Line threshold: 2 (maximum simplification)
- Quad spline threshold: 8-12 (ultra-smooth curves)
- Color sampling: deterministic
- Path omit: 25 (remove noise)

3. Post-processing

- SVG path simplification
- Decimal precision reduction
- Color optimization

Project Structure

svg-vectorizer/
├── app/
│   ├── api/
│   │   └── vectorize/
│   │       └── route.ts          # Vectorization API endpoint
│   ├── layout.tsx                # Main layout
│   └── page.tsx                  # User interface
├── public/                       # Static files
├── types/                        # TypeScript declarations
├── package.json                  # Dependencies
├── tsconfig.json                 # TypeScript config
└── tailwind.config.ts            # Tailwind config

Limits and Considerations

• Maximum size: Depends on Vercel plan (10MB body size on free tier)
• Timeout: 10s on Hobby, 60s on Pro
• Memory: 1GB on Hobby, 3GB on Pro
• Complexity: Very complex images may take longer

Future Improvements

• Batch processing (multiple images)
• Predefined presets (Logo, Illustration, Photo)
• Real-time preview
• Side-by-side comparison
• Export as PNG from SVG
• Conversion history

License

MIT

Author

Built with Claude Code

Support

To report issues or suggestions, open an issue in the repository.