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
• Icon Fonts Export - Convert multiple SVGs to icon fonts (TTF, EOT, WOFF, WOFF2) with auto-generated CSS

• 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.)
    ├── svg-packer/                 # @tiny-svg/svg-packer
    │   └── src/                    # Icon fonts generation (SVG to TTF, WOFF, WOFF2, EOT)
    ├── 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/svg-packer, @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).

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

→ Visit Tiny SVG Web App

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