tiny-svg - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #llm #go #rust #deep-learning #linux #docker #nodejs #java #awesome #cli #kubernetes #openai

tiny-svg

(★ 166)

Web application for optimizing SVG files and generating framework-specific code.

File Explorer

Download Latest Version (.zip)

- CLAUDE.md
- pre-commit
- settings.json
- - .gitignore
  - components.json
  - manifest.json
  - package.json
  - README.md
  - tsconfig.json
  - vite.config.ts
- - .env.example
  - .gitignore
  - components.json
  - content-collections.ts
  - intlayer.config.ts
  - package.json
  - tsconfig.json
  - vercel.json
  - vite.config.ts
- - .gitkeep
  - figma-plugin.webp
  - home.webp
  - logo.png
  - optimize-code.webp
  - optimize.webp
- - package.json
  - tsconfig.json
  - tsdown.config.ts
- - package.json
  - tsconfig.json
  - tsdown.config.ts
- - package.json
  - README.md
  - tsconfig.json
  - tsdown.config.ts
  - vitest.browser.config.ts
  - vitest.config.ts
- - components.json
  - package.json
  - tsconfig.json
- - package.json
  - tsconfig.json
  - tsdown.config.ts
.gitignore
.npmrc
.rules
biome.json
bts.jsonc
LICENSE
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
tsconfig.base.json
tsconfig.json

# Installation Guide

1. Get the code

git clone https://github.com/hehehai/tiny-svg

Downloads the entire project code from GitHub to your computer.

cd tiny-svg

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

pnpm install

Downloads and installs the libraries listed in package.json.

pnpm dev

Starts the development/run server.

pnpm dev:web # Web app only (http://localhost:3001)

Starts the development/run server.

pnpm dev:figma # Figma plugin in watch mode

Starts the development/run server.

pnpm build

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Tiny SVG

<div align="center">

<img src="./docs/images/logo.png" alt="Tiny SVG Logo" width="120" height="120" />

**A modern, lightning-fast SVG optimizer and code generator**

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/hehehai/tiny-svg/main/LICENSE)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue.svg)](https://www.typescriptlang.org/)
[![TanStack Start](https://img.shields.io/badge/TanStack_Start-SSR-orange.svg)](https://tanstack.com/start)

</div>

## Features

### Web Application
- **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

#### Home Page
![Home Page](https://raw.githubusercontent.com/hehehai/tiny-svg/main/docs/images/home.webp)

#### Optimize Page
![Optimize Page](https://raw.githubusercontent.com/hehehai/tiny-svg/main/docs/images/optimize.webp)
![Optimize Page Code](https://raw.githubusercontent.com/hehehai/tiny-svg/main/docs/images/optimize-code.webp)

### Figma Plugin
- **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

#### Screenshots
![Plugin](https://raw.githubusercontent.com/hehehai/tiny-svg/main/docs/images/figma-plugin.webp)

## Quick Start

### Prerequisites

- **Node.js**: >= 18.x
- **pnpm**: >= 10.x

### Installation

```bash
# Clone the repository
git clone https://github.com/hehehai/tiny-svg.git
cd tiny-svg

# Install dependencies
pnpm install
```

### Development

```bash
# 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

```bash
# 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
```

### Code Quality

```bash
# Check and fix issues
pnpm check

# Type check all packages
pnpm check-types
```

## Tech Stack

### Core Framework
- **[TanStack Start](https://tanstack.com/start)** - Modern SSR framework with file-based routing
- **[React 19](https://react.dev/)** - UI library with latest features
- **[TypeScript 5](https://www.typescriptlang.org/)** - Type-safe development

### Styling & UI
- **[Tailwind CSS 4](https://tailwindcss.com/)** - Utility-first CSS framework
- **[Radix UI](https://www.radix-ui.com/)** - Accessible component primitives
- **[shadcn/ui](https://ui.shadcn.com/)** - Re-usable component collection

### State Management
- **[Zustand](https://zustand-demo.pmnd.rs/)** - Lightweight state management
- **[TanStack Query](https://tanstack.com/query)** - Data fetching and caching

### Optimization & Processing
- **[SVGO](https://github.com/svg/svgo)** - SVG optimization engine
- **[Prettier](https://prettier.io/)** - Code formatter for generated code
- **[Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API)** - Multi-threaded processing

### Build & Deploy
- **[Vite 7](https://vite.dev/)** - Next-generation build tool
- **[Vercel](https://vercel.com/)** - Deployment platform

## Project Structure

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.)
```

### Package Dependencies

- **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.

## Deployment

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

## Applications

### 🌐 Web Application
[![Visit Website](https://img.shields.io/badge/Visit-Website-blue?style=flat-square)](https://tiny-svg.vercel.app)

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

**[→ Visit Tiny SVG Web App](https://tiny-svg.vercel.app)**

### 🎨 Figma Plugin
[![Install Plugin](https://img.shields.io/badge/Figma-Install_Plugin-F24E1E?logo=figma&logoColor=white&style=flat-square)](https://www.figma.com/community/plugin/1577284420062305768)

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

**[→ Install from Figma Community](https://www.figma.com/community/plugin/1577284420062305768)**

See [apps/figma-plugin/README.md](apps/figma-plugin/README.md) for development details.

## TODO

- [ ] 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

## Contributing

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

## License

[MIT](./LICENSE)

## Acknowledgments

- **[SVGO](https://github.com/svg/svgo)** - SVG optimization engine
- **[TanStack](https://tanstack.com/)** - React ecosystem (Router, Start, Query)
- **[Radix UI](https://www.radix-ui.com/)** - Accessible component primitives
- **[shadcn/ui](https://ui.shadcn.com/)** - UI components
- **[Tailwind CSS](https://tailwindcss.com/)** - CSS framework
- **[Biome](https://biomejs.dev/)** - Linter and formatter

## Code Template

Start with the same template: [tiny-svg start template](https://better-t-stack.dev/stack?name=my-better-t-app&fe-w=tanstack-start&fe-n=none&rt=none&be=none&api=none&db=none&orm=none&dbs=none&au=none&pay=none&pm=bun&add=biome%2Cultracite&ex=&git=true&i=true&wd=none&sd=vercel&yolo=false)

---

<div align="center">

Made with ❤️ by developers, for developers

**[⬆ Back to Top](#tiny-svg)**

</div>