MergeSVG

KO | EN

gitlite — search

#python #hacktoberfest #ai #typescript #llm #golang #docker #nodejs #windows #awesome #vue #openai #mcp #ios

(★ 21)

Assemble SVGs exactly as you envision: drag & drop placement, pixel-perfect alignment, rich styling, and one-click merge.

MergeSVG Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p  align="center">
  <h1 align="center">MergeSVG</h1>
</p>

## Live Demo & Preview
[![DEMO](https://github.com/user-attachments/assets/b20b1aa9-1316-4ada-aa68-dde0fbcb2bf6)](https://mergesvg.vercel.app/)

link: https://mergesvg.vercel.app/

## Why MergeSVG?
After adding SVG badges and illustrations to my GitHub README, I often saw empty gaps when remote assets failed to load. Moreover, README’s limited Markdown makes it hard to get banner layouts to look exactly the way I want. So I built MergeSVG: a browser-based, drag-and-drop tool that merges SVGs into a single, self-contained file and lets you position, resize and style graphics visually. In conclusion, your README will always appear exactly as you designed it.

## Features
- **Flexible uploads** — Add SVGs via Data URIs, URLs, or raw .svg files (drag & drop or file picker).
- **Design freedom without Markdown limitations** — No markdown or HTML syntax required; design intuitively with drag & drop.
- **Customizable canvas background** — Control background color, transparency, and patterns (grid, dots, checkerboard).
- **Real-time preview** — See your composition as you build it.
- **One-click export** — Download your merged SVG instantly.
- **Client-side processing** — Fast, secure, and private—everything runs in your browser.
- **No more broken links** — The app embeds raw SVG content into a single file so external resources can’t break your layout.

## How to use
1. Visit the site: https://mergesvg.vercel.app/
2. Upload one or more SVG files to the right sidebar.
3. Drag and drop the uploaded SVGs onto the canvas.
4. Customize the canvas background using the left control panel (optional).
5. Move, resize, and arrange SVGs to create your composition.
6. Click "**Export**" to download your final merged SVG file.
7. Star this repo ~ :smile:

## Deploy it yourself
Since this project is hosted on a free Vercel account, resources are limited. To ensure optimal performance and availability, it's recommended to deploy MergeSVG on your own. Here's how:
1. Sign in or create a Vercel account at [vercel](https://vercel.com/).

2. Click the "**Deploy to Vercel**" button below

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FwhiteSHADOW1234%2FMergeSVG)

3. Follow the prompts to deploy the application to your Vercel account.

## Layout JSON (Optional Export)
You can export a layout as JSON with this project; the chart below lists the schema keys.

| Key | Type | Notes |
|-----|------|-------|
| `canvas.width` | number | Canvas width in px |
| `canvas.height` | number | Canvas height in px |
| `canvas.backgroundColor` | string | Hex color (e.g. `#ffffff`) |
| `canvas.transparency` | number | Opacity 0–1 |
| `canvas.pattern` | string | `none`, `grid`, `dots`, `checkerboard` |
| `canvas.gridSize` | number | Grid spacing (if pattern uses it) |
| `canvas.gridColor` | string | Hex color for grid/dots |
| `elements[]` | array | List of placed SVG items |
| `elements[].id` | number | Timestamp-based unique id |
| `elements[].sourceId` | number | Original upload id (if tracked) |
| `elements[].name` | string | File/display name |
| `elements[].remoteUrl` | string | Original URL (optional) |
| `elements[].position.x` | number | X position in px |
| `elements[].position.y` | number | Y position in px |
| `elements[].dimensions.width` | number | Element width in px |
| `elements[].dimensions.height` | number | Element height in px |
| `elements[].content` | string | Raw or base64 SVG (sanitized) |
| `exportedAt` | string | ISO timestamp of export |
| `version` | string | Schema/version tag |

IDs can be replaced with UUIDs and always sanitize `content` when reloading.

## Contributing
See [CONTRIBUTING.md](CONTRIBUTING.md) for setup, standards, and PR guidelines. Feel free to open an issue for ideas, enhancements, bugs, or questions (include steps or a minimal SVG when relevant).

## License

This project is licensed under the MIT License. See [LICENSE](LICENSE) for details.

MergeSVG

MergeSVG Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

MergeSVG

MergeSVG Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README