Vous avez des SVG qui pèsent trop lourd pour votre site web ?

C’est pas graaaave, parce qu’il y a Tiny SVG est un outil en ligne qui compresse vos fichiers vectoriels directement depuis votre navigateur comme ça, pas besoin d’uploader vos œuvres sur un serveur externe puisque vos fichiers ne quittent jamais votre machine.

L’outil utilise SVGO en arrière-plan avec plus de 40 plugins configurables. Vous pouvez ainsi activer ou désactiver chaque optimisation selon vos besoins : Suppression des métadonnées inutiles, fusion des paths, simplification des transformations, et plein d’autres trucs. Le tout avec une prévisualisation en temps réel qui montre le SVG avant et après compression.

J’ai testé sur mon logo mais comme il est déjà super optimisé, ça ne m’a fait gagné que -0,5 % mais les résultats sont plutôt impressionnants car sur certains fichiers, Tiny SVG peut réduire la taille jusqu’à 70%. Ça dépend évidemment de la complexité du SVG d’origine et des optimisations que vous activez, mais globalement c’est très efficace.

Et y’a pas que la compression puisque Tiny SVG génère aussi du code prêt à l’emploi pour vos frameworks préférés. Vous pouvez ainsi exporter votre SVG optimisé en composant React (JSX ou TSX), Vue, Svelte, React Native ou même Flutter. Trop pratique pour ne plus avoir besoin de convertir manuellement vos icônes en composants.

Y’a aussi des fonctionnalités de transformation telles que la rotation, flip horizontal et vertical, redimensionnement…etc et vous pouvez exporter en Data URI dans plusieurs formats, et également générer des PNG ou JPEG avec les dimensions de votre choix. Le diff viewer intégré permet aussi de comparer le code SVG avant et après optimisation pour voir exactement ce qui a changé.

Côté technique, c’est une Progressive Web App qui fonctionne même hors ligne et le traitement se fait via Web Workers pour ne pas bloquer l’interface. Le projet est développé par hehehai, distribué sous licence MIT, et le code source est sur GitHub donc vous pouvez l’héberger vous-même sur Vercel, Netlify ou Docker si vous préférez avoir votre propre instance.

A tester ici : Tiny SVG !