Smart Image Converter — Transform images into professional-quality, infinitely scalable SVG graphics with AI-powered optimization.
- Features
- Getting Started
- How It Works
- Conversion Settings
- AI Optimization
- Keyboard Shortcuts
- Project Structure
- Development
- Documentation
- License
- PNG to SVG Conversion — Transform raster images into scalable vector graphics
- Multi-Format Support — Convert between PNG, JPG, and WebP formats
- Batch Processing — Convert up to 50 images simultaneously with progress tracking
- Real-Time Preview — Side-by-side comparison with draggable divider
- Smart Analysis — AI detects image type (logo, icon, photo, illustration)
- Auto Settings — Intelligent recommendations for optimal conversion
- Iterative Refinement — AI-driven multi-pass conversion for best results
- Quality Prediction — Estimates output quality before conversion
- Drag & Drop — Simple file upload with visual feedback
- Keyboard Shortcuts — Power user controls for efficiency
- Mobile Responsive — Full functionality on all devices with touch gestures
- Conversion History — Access and re-download previous conversions
- Format Education — Built-in guide explaining when to use each format
- Client-Side Processing — Your files never leave your device
- Modular Pipeline — Research-based algorithms for superior quality
- Error Recovery — Graceful handling with helpful suggestions
- Offline Support — Connection monitoring with status indicators
- Open VectorForge in your browser
- Drop an image or click to upload (PNG, JPG, WebP)
- Adjust settings using the sliders or click "AI Optimize"
- Download your converted SVG
# Clone the repository
git clone https://github.com/JustAGhosT/vectorforge.git
cd vectorforge
# Install dependencies
npm install
# Start development server
npm run devVectorForge uses a sophisticated 5-stage pipeline for image conversion:
┌─────────────────────────────────────────────────────────────┐
│ 1. Color Quantization → Median-cut algorithm for │
│ perceptual color grouping │
├─────────────────────────────────────────────────────────────┤
│ 2. Layer Extraction → Separate image into color │
│ layers for independent tracing │
├─────────────────────────────────────────────────────────────┤
│ 3. Contour Tracing → 8-direction edge detection │
│ with Douglas-Peucker smoothing │
├─────────────────────────────────────────────────────────────┤
│ 4. Path Smoothing → Adaptive Bézier curves │
│ (linear, quadratic, cubic) │
├─────────────────────────────────────────────────────────────┤
│ 5. SVG Generation → Optimized path output with │
│ minimal file size │
└─────────────────────────────────────────────────────────────┘
| Setting | Range | Description | Best For |
|---|---|---|---|
| Complexity | 0-100% | Controls detail preservation | 30-50% for icons, 70-90% for photos |
| Color Simplification | 0-100% | Reduces color palette | 60-80% for logos, 20-40% for art |
| Path Smoothing | 0-100% | Smooths edges and curves | 50-70% for geometric, 30-50% for organic |
| Image Type | Complexity | Colors | Smoothing |
|---|---|---|---|
| Icon | 40% | 70% | 60% |
| Logo | 60% | 50% | 60% |
| Illustration | 70% | 30% | 50% |
| Photo | 85% | 15% | 40% |
VectorForge includes AI-powered analysis to automatically optimize your conversion:
- Upload an image to the converter
- Click "AI Optimize" in the settings panel
- Review suggestions including:
- Image type classification
- Recommended settings
- Quality prediction
- Potential warnings
- Apply or adjust the suggestions
📝 Note: AI features require Azure AI or OpenAI configuration. See Environment Setup for configuration.
| Action | Mac | Windows/Linux |
|---|---|---|
| Upload file | ⌘ + O |
Ctrl + O |
| Download SVG | ⌘ + S |
Ctrl + S |
| Zoom in | ⌘ + = |
Ctrl + = |
| Zoom out | ⌘ + - |
Ctrl + - |
| Reset zoom | ⌘ + 0 |
Ctrl + 0 |
| Undo settings | ⌘ + Z |
Ctrl + Z |
| Redo settings | ⌘ + ⇧ + Z |
Ctrl + Shift + Z |
| Show shortcuts | ⌘ + ? |
Ctrl + ? |
vectorforge/
├── src/
│ ├── App.tsx # Main application component
│ ├── components/ # React components
│ │ ├── ui/ # Base UI components (shadcn/ui)
│ │ ├── UploadZone.tsx # File upload interface
│ │ ├── ConversionPreview.tsx # Preview comparison
│ │ ├── SettingsPanel.tsx # Conversion controls
│ │ ├── BatchConversion.tsx # Batch processing
│ │ ├── IterativeConverter.tsx # AI iterative mode
│ │ └── ...
│ ├── hooks/ # Custom React hooks
│ │ ├── use-conversion.ts # Conversion logic
│ │ ├── use-ai-optimizer.ts # AI integration
│ │ └── ...
│ └── lib/ # Core utilities
│ ├── converter.ts # Main converter
│ ├── pipeline/ # Modular conversion stages
│ └── ai-optimizer.ts # AI analysis
├── docs/ # Documentation files
│ ├── PRD.md # Product requirements
│ ├── CONVERSION_ANALYSIS.md # Algorithm documentation
│ ├── PIPELINE_QUICKSTART.md # Pipeline usage guide
│ └── ENVIRONMENT_SETUP.md # Configuration guide
npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
npm run lint # Run linter- Framework: React 19 with TypeScript
- Styling: Tailwind CSS v4
- UI Components: shadcn/ui + Radix UI
- Animations: Framer Motion
- Icons: Phosphor Icons
- Build: Vite
- Hosting: Netlify
- AI: Azure AI / OpenAI GPT-4o
| Document | Description |
|---|---|
| PRD.md | Product requirements and design specs |
| AI_ROADMAP.md | AI integration plan and roadmap |
| CHANGELOG.md | Features completed and planned |
| CONVERSION_ANALYSIS.md | Deep dive into algorithms |
| PIPELINE_QUICKSTART.md | Custom pipeline guide |
| ENVIRONMENT_SETUP.md | AI configuration |
| ERROR_HANDLING.md | Error handling details |
| SECURITY.md | Security policy |
Your files stay private. All image processing happens locally in your browser. No images are ever uploaded to external servers.
MIT License - See LICENSE for details.