SVG Path Merger est un outil web gratuit qui fusionne tous les éléments <path> d’un fichier SVG en un seul chemin. Pensé pour les intégrateurs et les designers, il simplifie les icônes exportées depuis Figma ou Illustrator, réduit le poids des fichiers et facilite l’animation CSS.
Le problème
Les exports SVG contiennent souvent des dizaines de <path> distincts. Chaque élément alourdit le DOM, complique les styles et les animations, et augmente légèrement la taille du fichier. Fusionner manuellement les attributs d est fastidieux et source d’erreurs.
La solution
L’application lit votre SVG, concatène les chemins en un seul <path> (séparés par des commandes M), conserve les attributs du premier path (fill, stroke, etc.) et affiche le résultat en temps réel. Tout s’exécute dans le navigateur : aucun envoi de fichier vers un serveur.
Fonctionnalités
- Fusion automatique dès la saisie ou le collage du code SVG
- Prévisualisation double (original et résultat) avec fond configurable
- Statistiques : nombre de paths, taille en Ko, pourcentage de réduction
- Copie en un clic du SVG optimisé dans le presse-papiers
- Mode sombre et interface responsive
- Sanitisation des entrées (scripts, gestionnaires d’événements) pour limiter les risques XSS
Cas d’usage
- Préparer une icône mono-couleur pour une animation
stroke-dashoffsetou un morphing - Alléger un SVG utilisé en inline dans un thème WordPress ou un bloc
- Nettoyer un export design avant intégration front-end
Comment l’utiliser
- Coller le code SVG dans le champ « Original SVG ».
- Vérifier la prévisualisation et les statistiques à droite.
- Cliquer sur « Copy » pour récupérer le SVG fusionné.
Limites à connaître : si le SVG comporte plusieurs couleurs de remplissage ou de contour, tous les paths héritent des attributs du premier path. L’outil affiche un avertissement dans ce cas. Il est idéal pour les SVG mono-couleur ou les découpes avec fill-rule="evenodd".
Stack technique
- Vite — build et développement
- Tailwind CSS — interface
- JavaScript (ES modules) — logique de fusion et sanitisation côté client
- GitHub Actions — déploiement continu sur GitHub Pages
- Licence MIT — usage personnel et commercial libre
Confidentialité
Aucune donnée n’est transmise à un serveur tiers : le traitement reste local dans l’onglet du navigateur. Adapté aux fichiers clients ou aux maquettes non publiques.