How rayanfer32/svg-tracer-app works
SVG Tracer & Animator is a browser-based image-to-vector and SVG animation editor. Users load a raster image for VTracer conversion or open an SVG, adjust tracing, animation, styling, and reference-overlay settings, preview playback, then export SVG or record WebM. The graph preserves these documented capabilities; source excerpts substantiate the app shell, shared state, animation rendering/recording, and some file loading. Tracing internals and several UI interactions are unsampled, so their exact call wiring is left unspecified.
Main entry points: SvgAnimator.tsx SVG animator · useTracerStore.ts Tracer state · ImageTracer.tsx Image tracer page · AnimationControls.tsx Animation controls
Components 19
App entry
- Bun web server
src/index.ts - React app shell
src/App.tsx
Tracing workflow
- Image tracer page
src/pages/ImageTracer.tsx - Tracing controls
src/pages/ImageTracer.tsx - VTracer WASM
public/589cb57662b50620abca.module.wasm - WASM bootstrap
src/vtracerlib/bootstrap.js
Animation workspace
- SVG animator
src/pages/SvgAnimator.tsx - Editor sidebar
src/components/Sidebar.tsx - Animation controls
src/components/AnimationControls.tsx - Playback controls
src/components/PlaybackControls.tsx - Animation settings
src/components/AnimationControls.tsx - Reference overlays
src/pages/SvgAnimator.tsx - SVG export
src/components/AnimationControls.tsx - WebM recording
src/pages/SvgAnimator.tsx
Shared state
- Tracer state
src/store/useTracerStore.ts - Configuration types
src/types/index.ts - Animation defaults
src/utils/constants.ts
Other components
- Editor user
- Browser visitor
Connections 23
- Editor user → Bun web server: opens app
- Bun web server → React app shell: serves interface
- React app shell → SVG animator: renders workspace
- SVG animator → Editor sidebar: renders controls
- Editor sidebar → Animation controls: renders settings
- Animation controls → Tracer state: updates state
- SVG animator → Tracer state: reads playback state
- SVG animator → Playback controls: renders playback
- SVG animator → Animation settings: reads config
- SVG animator → Reference overlays: renders overlay
- Animation controls → SVG export: invokes export
- SVG animator → WebM recording: records frames
- WebM recording → Editor user: downloads video
- SVG export → Editor user: downloads SVG
- Browser visitor → Image tracer page: loads image
- Image tracer page → Tracing controls: renders tracing UI
- Image tracer page → Tracer state: updates trace state
- Image tracer page → WASM bootstrap: loads engine
- WASM bootstrap → VTracer WASM: initializes WASM
- Image tracer page → Tracer state: applies traced SVG
- Tracer state → SVG animator: supplies SVG state
- Tracer state → Configuration types: uses config types
- Tracer state → Animation defaults: loads defaults