{"id":1661,"date":"2025-11-24T10:20:14","date_gmt":"2025-11-24T09:20:14","guid":{"rendered":"https:\/\/elearningsamba.com\/index.php\/tiny-svg-compressez-vos-svg-sans-rien-uploader\/"},"modified":"2025-11-24T10:20:14","modified_gmt":"2025-11-24T09:20:14","slug":"tiny-svg-compressez-vos-svg-sans-rien-uploader","status":"publish","type":"page","link":"https:\/\/elearningsamba.com\/index.php\/tiny-svg-compressez-vos-svg-sans-rien-uploader\/","title":{"rendered":"Tiny SVG &#8211; Compressez vos SVG sans rien uploader"},"content":{"rendered":"<p>Vous avez des SVG qui p\u00e8sent trop lourd pour votre site web ?<\/p>\n<p>C\u2019est pas graaaave, parce qu\u2019il y a<br \/>\n<a href=\"https:\/\/tiny-svg.actnow.dev\/\">Tiny SVG<\/a><br \/>\nest un outil en ligne qui compresse vos fichiers vectoriels directement depuis votre navigateur comme \u00e7a, pas besoin d\u2019uploader vos \u0153uvres sur un serveur externe puisque vos fichiers ne quittent jamais votre machine.<\/p>\n<p>L\u2019outil utilise SVGO en arri\u00e8re-plan avec plus de 40 plugins configurables. Vous pouvez ainsi activer ou d\u00e9sactiver chaque optimisation selon vos besoins : Suppression des m\u00e9tadonn\u00e9es inutiles, fusion des paths, simplification des transformations, et plein d\u2019autres trucs. Le tout avec une pr\u00e9visualisation en temps r\u00e9el qui montre le SVG avant et apr\u00e8s compression.<\/p>\n<p>\n<img decoding=\"async\" src=\"https:\/\/korben.info\/cdn-cgi\/image\/width=1200,fit=scale-down,quality=90,f=avif\/tiny-svg-compression-optimisation-navigateur\/tiny-svg-compression-optimisation-navigateur-2.png\" alt=\"\" loading=\"lazy\">\n<\/p>\n<p>J\u2019ai test\u00e9 sur mon logo mais comme il est d\u00e9j\u00e0 super optimis\u00e9, \u00e7a ne m\u2019a fait gagn\u00e9 que -0,5 % mais les r\u00e9sultats sont plut\u00f4t impressionnants car sur certains fichiers, Tiny SVG peut r\u00e9duire la taille jusqu\u2019\u00e0 70%. \u00c7a d\u00e9pend \u00e9videmment de la complexit\u00e9 du SVG d\u2019origine et des optimisations que vous activez, mais globalement c\u2019est tr\u00e8s efficace.<\/p>\n<p>Et y\u2019a pas que la compression puisque Tiny SVG g\u00e9n\u00e8re aussi du code pr\u00eat \u00e0 l\u2019emploi pour vos frameworks pr\u00e9f\u00e9r\u00e9s. Vous pouvez ainsi exporter votre SVG optimis\u00e9 en composant React (JSX ou TSX), Vue, Svelte, React Native ou m\u00eame Flutter. Trop pratique pour ne plus avoir besoin de convertir manuellement vos ic\u00f4nes en composants.<\/p>\n<p>\n<img decoding=\"async\" src=\"https:\/\/korben.info\/cdn-cgi\/image\/width=1200,fit=scale-down,quality=90,f=avif\/tiny-svg-compression-optimisation-navigateur\/tiny-svg-compression-optimisation-navigateur-3.png\" alt=\"\" loading=\"lazy\">\n<\/p>\n<p>Y\u2019a aussi des fonctionnalit\u00e9s de transformation telles que la rotation, flip horizontal et vertical, redimensionnement\u2026etc et vous pouvez exporter en Data URI dans plusieurs formats, et \u00e9galement g\u00e9n\u00e9rer des PNG ou JPEG avec les dimensions de votre choix. Le diff viewer int\u00e9gr\u00e9 permet aussi de comparer le code SVG avant et apr\u00e8s optimisation pour voir exactement ce qui a chang\u00e9.<\/p>\n<p>C\u00f4t\u00e9 technique, c\u2019est une Progressive Web App qui fonctionne m\u00eame hors ligne et le traitement se fait via Web Workers pour ne pas bloquer l\u2019interface. Le projet est d\u00e9velopp\u00e9 par hehehai, distribu\u00e9 sous licence MIT, et le<br \/>\n<a href=\"https:\/\/github.com\/hehehai\/tiny-svg\">code source est sur GitHub<\/a><br \/>\ndonc vous pouvez l\u2019h\u00e9berger vous-m\u00eame sur Vercel, Netlify ou Docker si vous pr\u00e9f\u00e9rez avoir votre propre instance.<\/p>\n<p>A tester ici :<br \/>\n<a href=\"https:\/\/tiny-svg.actnow.dev\/\">Tiny SVG<\/a><br \/>\n!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vous avez des SVG qui p\u00e8sent trop lourd pour votre site web ? C\u2019est pas graaaave, parce qu\u2019il y a Tiny SVG est un outil en ligne qui compresse vos fichiers vectoriels directement depuis votre navigateur comme \u00e7a, pas besoin d\u2019uploader vos \u0153uvres sur un serveur externe puisque vos fichiers ne quittent jamais votre machine. L\u2019outil utilise SVGO en arri\u00e8re-plan avec plus de 40 plugins configurables. Vous pouvez ainsi activer ou d\u00e9sactiver chaque optimisation selon vos besoins : Suppression des m\u00e9tadonn\u00e9es inutiles, fusion des paths, simplification des transformations, et plein d\u2019autres trucs. Le tout avec une pr\u00e9visualisation en temps r\u00e9el qui montre le SVG avant et apr\u00e8s compression. J\u2019ai test\u00e9 sur mon logo mais comme il est d\u00e9j\u00e0 super optimis\u00e9, \u00e7a ne m\u2019a fait gagn\u00e9 que -0,5 % mais les r\u00e9sultats sont plut\u00f4t impressionnants car sur certains fichiers, Tiny SVG peut r\u00e9duire la taille jusqu\u2019\u00e0 70%. \u00c7a d\u00e9pend \u00e9videmment de la complexit\u00e9 du SVG d\u2019origine et des optimisations que vous activez, mais globalement c\u2019est tr\u00e8s efficace. Et y\u2019a pas que la compression puisque Tiny SVG g\u00e9n\u00e8re aussi du code pr\u00eat \u00e0 l\u2019emploi pour vos frameworks pr\u00e9f\u00e9r\u00e9s. Vous pouvez ainsi exporter votre SVG optimis\u00e9 en composant React (JSX ou TSX), Vue, Svelte, React Native ou m\u00eame Flutter. Trop pratique pour ne plus avoir besoin de convertir manuellement vos ic\u00f4nes en composants. Y\u2019a aussi des fonctionnalit\u00e9s de transformation telles que la rotation, flip horizontal et vertical, redimensionnement\u2026etc et vous pouvez exporter en Data URI dans plusieurs formats, et \u00e9galement g\u00e9n\u00e9rer des PNG ou JPEG avec les dimensions de votre choix. Le diff viewer int\u00e9gr\u00e9 permet aussi de comparer le code SVG avant et apr\u00e8s optimisation pour voir exactement ce qui a chang\u00e9. C\u00f4t\u00e9 technique, c\u2019est une Progressive Web App qui fonctionne m\u00eame hors ligne et le traitement se fait via Web Workers pour ne pas bloquer l\u2019interface. Le projet est d\u00e9velopp\u00e9 par hehehai, distribu\u00e9 sous licence MIT, et le code source est sur GitHub donc vous pouvez l\u2019h\u00e9berger vous-m\u00eame sur Vercel, Netlify ou Docker si vous pr\u00e9f\u00e9rez avoir votre propre instance. A tester ici : Tiny SVG !<\/p>\n","protected":false},"author":1,"featured_media":1662,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-1661","page","type-page","status-publish","has-post-thumbnail","hentry"],"campaignId":"","_links":{"self":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages\/1661","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/comments?post=1661"}],"version-history":[{"count":0,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages\/1661\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/media\/1662"}],"wp:attachment":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/media?parent=1661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}