[Feature] Image to SVG — convert raster images to SVG vector graphics using VTracer WASM

Author: looorent

CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.3] - 2026-03-03
+
+* [Feature] Image to SVG — convert raster images to SVG vector graphics using VTracer WASM, with preset configurations (Default, Smallest file, High fidelity, Pixel art, Posterized) and collapsible advanced parameter panel
+  
 ## [1.0.2] - 2026-02-24
 
 * [Feature] SCIM 2.0 Server — create isolated SCIM endpoints with full User and Group CRUD, sample data pre-population, and built-in API documentation

README.md

@@ -9,6 +9,7 @@ A collection of lightweight, browser-native developer utilities. This toolbox is
 - **Cheat Sheets**: Quick reference for Bash, CSS, Git, HTTP, and Regex.
 - **Color Converter**: Convert between Hex, RGB, HSL, and more.
 - **Epoch Converter**: Convert Unix timestamps to human-readable dates.
+- **Image to SVG**: Convert raster images (PNG, JPG, WebP) to SVG vector graphics using VTracer WASM, with presets and advanced parameter tuning.
 - **HTML Entity**: Encode and decode HTML entities.
 - **JSON Validator**: Format, repair, and validate JSON payloads.
 - **JWT Decoder**: Inspect JSON Web Tokens (header and payload).

biome.jsonc

@@ -1,7 +1,7 @@
 {
   "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
   "files": {
-    "includes": ["src/**", "server/**", "shared/**", "test/**", "*.ts", "*.json", "!worker-configuration.d.ts"]
+    "includes": ["src/**", "server/**", "shared/**", "test/**", "*.ts", "*.json", "!worker-configuration.d.ts", "!src/**/vendor"]
   },
   "formatter": {
     "indentStyle": "space",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "toolbox",
   "private": true,
-  "version": "1.0.2",
+  "version": "1.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

pnpm-lock.yaml

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import ParameterSlider from './ParameterSlider.vue'
+import { findActivePreset, presets } from './presets'
+import SegmentedControl from './SegmentedControl.vue'
+import type { ClusteringMode, ConversionParams, HierarchicalMode, TraceMode } from './types'
+
+const props = defineProps<{
+  disabled?: boolean
+}>()
+
+const params = defineModel<ConversionParams>({ required: true })
+
+const activePresetKey = computed(() => findActivePreset(params.value))
+const showAdvanced = ref(false)
+
+function applyPreset(key: string) {
+  const preset = presets.find(preset => preset.key === key)
+
+  if (preset) {
+    params.value = { ...preset.params }
+  }
+}
+
+const traceModes: { value: TraceMode; label: string; description: string }[] = [
+  { value: 'spline', label: 'Spline', description: 'Smooth curves (best for most images)' },
+  { value: 'polygon', label: 'Polygon', description: 'Straight segments (pixel-art style)' },
+  { value: 'none', label: 'None', description: 'No path simplification (raw pixel edges)' },
+]
+
+const clusteringModes: { value: ClusteringMode; label: string; description: string }[] = [
+  { value: 'color', label: 'Color', description: 'Full color tracing with clustering' },
+  { value: 'binary', label: 'B/W', description: 'Black and white tracing' },
+]
+
+const hierarchicalModes: { value: HierarchicalMode; label: string; description: string }[] = [
+  { value: 'stacked', label: 'Stacked', description: 'Layers stacked on top of each other' },
+  { value: 'cutout', label: 'Cutout', description: 'Shapes cut out from layers below' },
+]
+
+const sliders = computed(() => {
+  const colorSliders = params.value.clusteringMode === 'color'
+    ? [
+        {
+          key: 'colorPrecision' as const,
+          label: 'Color Precision',
+          min: 1,
+          max: 8,
+          step: 1,
+          description: 'How many colors to distinguish. Higher values preserve more color detail, lower values simplify.',
+        },
+        {
+          key: 'layerDifference' as const,
+          label: 'Gradient Step',
+          min: 0,
+          max: 128,
+          step: 1,
+          description: 'Color difference between gradient layers. Higher values produce fewer layers and a more posterized look.',
+        },
+      ]
+    : []
+
+  return [
+    ...colorSliders,
+    {
+      key: 'filterSpeckle' as const,
+      label: 'Filter Speckle',
+      min: 0,
+      max: 128,
+      step: 1,
+      description: 'Removes clusters smaller than this size (in pixels). Increase to clean up noise and tiny artifacts.',
+    },
+    {
+      key: 'cornerThreshold' as const,
+      label: 'Corner Threshold',
+      min: 0,
+      max: 180,
+      step: 1,
+      description: 'Angle (in degrees) below which a point is treated as a corner. Lower values produce rounder shapes; higher values keep sharp corners.',
+    },
+    {
+      key: 'lengthThreshold' as const,
+      label: 'Length Threshold',
+      min: 0,
+      max: 100,
+      step: 0.5,
+      description: 'Minimum segment length to keep. Higher values simplify paths by dropping short segments, reducing file size.',
+    },
+    {
+      key: 'spliceThreshold' as const,
+      label: 'Splice Threshold',
+      min: 0,
+      max: 180,
+      step: 1,
+      description: 'Angle threshold for joining adjacent curves. Higher values merge more curves together for smoother output.',
+    },
+    {
+      key: 'pathPrecision' as const,
+      label: 'Path Precision',
+      min: 0,
+      max: 8,
+      step: 1,
+      description: 'Decimal places in SVG path coordinates. Higher values are more precise but produce larger files.',
+    },
+  ]
+})
+</script>
+
+<template>
+  <div class="space-y-4" :class="{ 'opacity-50 pointer-events-none': props.disabled }">
+    <!-- Presets -->
+    <div class="flex flex-wrap items-center gap-2">
+      <span class="text-xs font-semibold uppercase tracking-wider text-text-muted">Preset</span>
+      <button
+        v-for="preset in presets"
+        :key="preset.key"
+        type="button"
+        :disabled="props.disabled"
+        class="px-3 py-1.5 text-xs font-medium rounded-lg transition-colors cursor-pointer"
+        :class="activePresetKey === preset.key
+          ? 'bg-accent text-white'
+          : 'bg-surface-overlay text-text-secondary hover:text-text-primary border border-border'"
+        :title="preset.description"
+        @click="applyPreset(preset.key)"
+      >
+        {{ preset.label }}
+      </button>
+    </div>
+
+    <!-- Advanced toggle -->
+    <button
+      type="button"
+      class="flex items-center gap-1.5 text-xs text-text-muted hover:text-text-secondary transition-colors cursor-pointer"
+      :disabled="props.disabled"
+      @click="showAdvanced = !showAdvanced"
+    >
+      <span class="transition-transform" :class="showAdvanced ? 'rotate-90' : ''">&#9654;</span>
+      Advanced parameters
+    </button>
+
+    <div v-if="showAdvanced" class="space-y-4">
+      <SegmentedControl v-model="params.clusteringMode" label="Clustering" :options="clusteringModes" :disabled="props.disabled" />
+
+      <SegmentedControl
+        v-if="params.clusteringMode === 'color'"
+        v-model="params.hierarchical"
+        label="Hierarchy"
+        :options="hierarchicalModes"
+        :disabled="props.disabled"
+      />
+
+      <SegmentedControl v-model="params.mode" label="Curve fitting" :options="traceModes" :disabled="props.disabled" />
+
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <ParameterSlider
+          v-for="slider in sliders"
+          :key="slider.key"
+          v-model="params[slider.key]"
+          :label="slider.label"
+          :min="slider.min"
+          :max="slider.max"
+          :step="slider.step"
+          :description="slider.description"
+          :disabled="props.disabled"
+        />
+      </div>
+    </div>
+  </div>
+</template>

src/modules/image-to-svg/ConversionParameters.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const props = defineProps<{
+  progress: number
+}>()
+</script>
+
+<template>
+  <div class="space-y-2">
+    <div class="flex items-center justify-between text-xs text-text-muted">
+      <span>Converting...</span>
+      <span>{{ Math.round(props.progress * 100) }}%</span>
+    </div>
+    <div class="w-full h-1.5 bg-surface-overlay rounded-full overflow-hidden">
+      <div
+        class="h-full bg-accent rounded-full transition-all duration-200"
+        :style="{ width: `${props.progress * 100}%` }"
+      />
+    </div>
+  </div>
+</template>

src/modules/image-to-svg/ConversionProgress.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const emit = defineEmits<{
+  file: [file: File]
+}>()
+
+const dragging = ref(false)
+const fileInput = ref<HTMLInputElement | null>(null)
+
+function onFileInput(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+
+  if (file) {
+    emit('file', file)
+  }
+
+  input.value = ''
+}
+
+function onDrop(event: DragEvent) {
+  dragging.value = false
+  const file = event.dataTransfer?.files[0]
+
+  if (file) {
+    emit('file', file)
+  }
+}
+
+function onDragOver() {
+  dragging.value = true
+}
+
+function onDragLeave() {
+  dragging.value = false
+}
+</script>
+
+<template>
+  <div
+    class="relative border-2 border-dashed rounded-lg p-8 text-center transition-colors cursor-pointer"
+    :class="dragging ? 'border-accent bg-accent/10' : 'border-border hover:border-border-focus'"
+    @dragover.prevent="onDragOver"
+    @dragleave="onDragLeave"
+    @drop.prevent="onDrop"
+    @click="fileInput?.click()"
+  >
+    <input
+      ref="fileInput"
+      type="file"
+      accept="image/*"
+      class="hidden"
+      @change="onFileInput"
+    >
+    <div class="text-text-muted">
+      <p class="text-sm font-medium">Drop an image here or click to browse</p>
+      <p class="text-xs mt-1">Supports PNG, JPG, GIF, WebP, and BMP</p>
+    </div>
+  </div>
+</template>