A modern, lightning-fast SVG optimizer and code generator

• SVG Optimization - SVGO-powered with 40+ configurable plugins
• Code Generation - React (JSX/TSX), Vue, Svelte, React Native, Flutter
• Transformations - Rotate, flip, resize with proportional scaling
• Data URI Export - Minified, Base64, URL-encoded formats
• Visual Preview - Real-time preview with zoom (20%-400%) and pan
• Export - PNG/JPEG with customizable dimensions (0.25x-8x scale)
• PWA - Installable, offline-capable with auto-caching
• i18n - English, Chinese, Korean, German, French

• Native Integration - Optimize SVGs directly in Figma
• Batch Processing - Handle multiple SVG layers at once
• Real-time Preview - Side-by-side diff viewer with syntax highlighting
• Compression Presets - Default, Aggressive, Minimal, or Custom configurations
• In-place Replacement - Update SVGs directly in your Figma designs
• Code Export - Generate framework-specific code within Figma

• Node.js: >= 18.x
• pnpm: >= 10.x

# Clone the repository git clone https://github.com/hehehai/tiny-svg.git cd tiny-svg # Install dependencies pnpm install

# Start all workspace apps pnpm dev # Or start specific apps pnpm dev:web # Web app only (http://localhost:3001) pnpm dev:figma # Figma plugin in watch mode

For Figma Plugin development:

1. Run pnpm build:packages to build shared packages
2. Run pnpm dev:figma to start development mode
3. In Figma Desktop: Plugins → Development → Import plugin from manifest...
4. Select apps/figma-plugin/manifest.json

# Build all workspace packages pnpm build # Build specific targets pnpm build:packages # Shared packages only pnpm build:figma # Figma plugin pnpm --filter @tiny-svg/web build # Web app only # Preview the web app production build pnpm --filter @tiny-svg/web serve

# Check and fix issues pnpm check # Type check all packages pnpm check-types

• TanStack Start - Modern SSR framework with file-based routing
• React 19 - UI library with latest features
• TypeScript 5 - Type-safe development

• Tailwind CSS 4 - Utility-first CSS framework
• Radix UI - Accessible component primitives
• shadcn/ui - Re-usable component collection

• Zustand - Lightweight state management
• TanStack Query - Data fetching and caching

• SVGO - SVG optimization engine
• Prettier - Code formatter for generated code
• Web Workers - Multi-threaded processing

• Vite 7 - Next-generation build tool
• Vercel - Deployment platform

This is a pnpm monorepo with shared packages for code reuse across applications.

tiny-svg/ ├── apps/ │ ├── web/ # Web application (TanStack Start) │ │ ├── src/ │ │ │ ├── components/ # React components │ │ │ ├── contents/ # i18n definitions (*.content.ts) │ │ │ ├── hooks/ # Custom React hooks │ │ │ ├── lib/ # Utilities and helpers │ │ │ ├── routes/ # File-based routing │ │ │ │ └── {-$locale}/ # Locale-prefixed routes │ │ │ ├── store/ # Zustand stores │ │ │ └── workers/ # Web Workers (optimization, formatting) │ │ └── package.json │ │ │ └── figma-plugin/ # Figma plugin │ ├── src/ │ │ ├── plugin.ts # Plugin sandbox code (Figma API) │ │ └── ui/ # React UI components │ ├── manifest.json # Figma plugin manifest │ └── package.json │ └── packages/ # Shared packages ├── svg/ # @tiny-svg/svg │ └── src/ # SVGO config, presets, utilities ├── code-generators/ # @tiny-svg/code-generators │ └── src/ # Framework code generators (React, Vue, Svelte, etc.) ├── ui/ # @tiny-svg/ui │ └── src/ # Shared React components (diff viewer, etc.) └── utils/ # @tiny-svg/utils └── src/ # Utilities (clipboard, image export, etc.) 

• Web app depends on: @tiny-svg/svg, @tiny-svg/code-generators, @tiny-svg/ui
• Figma plugin depends on: @tiny-svg/svg, @tiny-svg/code-generators, @tiny-svg/ui, @tiny-svg/utils

Important: After modifying any package in packages/, run pnpm build:packages before building apps.

Deployed on Vercel for full SSR support. Cloudflare Workers not supported due to MDX runtime restrictions (eval() prohibited).

Visit Tiny SVG

A full-featured web application for SVG optimization with SSR, PWA support, and i18n.

Optimize SVGs directly within Figma with our official plugin. Available now on Figma Community!

→ Install from Figma Community

See apps/figma-plugin/README.md for development details.

• SVG share - Generate shareable links with expiration
• SVG history - Track previously optimized SVGs with restore
• Interactive plugin demos - Visual examples for SVGO plugins
• SVG sprite generator - Combine multiple SVGs into sprite sheets
• Accessibility checker - Analyze and suggest SVG accessibility improvements

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

MIT

• SVGO - SVG optimization engine
• TanStack - React ecosystem (Router, Start, Query)
• Radix UI - Accessible component primitives
• shadcn/ui - UI components
• Tailwind CSS - CSS framework
• Biome - Linter and formatter

Start with the same template: tiny-svg start template