link: https://mergesvg.vercel.app/
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.
- 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.
- Visit the site: https://mergesvg.vercel.app/
- Upload one or more SVG files to the right sidebar.
- Drag and drop the uploaded SVGs onto the canvas.
- Customize the canvas background using the left control panel (optional).
- Move, resize, and arrange SVGs to create your composition.
- Click "Export" to download your final merged SVG file.
- Star this repo ~ 😄
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:
-
Sign in or create a Vercel account at vercel.
-
Click the "Deploy to Vercel" button below
-
Follow the prompts to deploy the application to your Vercel account.
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.
See 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).
This project is licensed under the MIT License. See LICENSE for details.