🗺️ Welcome to SVG World Maps
Build beautiful, interactive, and lightweight SVG maps in seconds. No heavy dependencies, no complex build steps—just pure, framework-agnostic JavaScript.
Whether you are building a global dashboard in React, a localized landing page in Vue, or a simple vanilla JS project, svg-world-maps gives you the tools to visualize geographic data effortlessly.
⚡ Quick Start
Get a map on your screen in three simple steps:
- 1. Install
- 2. Import
- 3. Render
npm install svg-world-maps
import { createMap } from "svg-world-maps";
const map = createMap("world", {
tooltip: true,
hoverColor: "lightblue"
});
document.getElementById("app").innerHTML = map;
You now have a fully scalable, interactive SVG map. No extra CSS or JS required.
🌟 Why Choose SVG World Maps?
🌍 35+ Maps
From the entire world down to specific countries and regions (USA, Germany, Iran, Canada, and more).
🪶 Zero Dependencies
Pure SVG output. No runtime overhead, no bloated node_modules, just clean markup.
👆 Interactive by Default
Built-in tooltips, region labels, and data-code / data-name attributes for easy click handling.
📦 Tiny Bundles
Optional maps system ensures you only bundle the specific countries you actually need.
🧭 Explore the Documentation
Not sure where to go next? Choose your path:
| Resource | Description |
|---|---|
| 🚀 Getting Started | The complete guide to installation, basic usage, and framework integration. |
| 🗺️ Optional Maps | How to add specific country maps (like usa or germany) using npx add-map to keep your bundle small. |
💡 Need Help?
We are here to support you! If you run into issues or have ideas for new features:
- 🐛 Report a Bug: Found something broken? Let us know.
- 💬 GitHub Discussions: Ask questions, share your implementations, or request new country maps.
- ⭐ Star on GitHub: Support the project and stay updated on new releases.
Jump straight into the action: Read the Getting Started guide →