Optimiseur & Compresseur SVG

Outil visuel de compression et nettoyage de code SVG permettant d'éliminer les déclarations XML, les métadonnées d'éditeurs, d'ajuster la précision des coordonnées et de générer des composants React JSX.

Taille d'origine
968 B
Taille optimisée
523 B
Gain d'espace
-46% (445 B)
Éléments DOM
6
Code source SVG
Loading Editor...

Règles d'optimisation

2 dp

Aperçu visuel en direct

SVG Live Preview
SVG
Loading Editor...

Continuer avec

Poursuivez votre flux de travail avec ces étapes suivantes
Traceur Vectoriel SVG

Importez une image PNG/JPG/WebP ➔ Tracez et simplifiez les tracés localement ➔ Exportez un SVG modifiable

Convertisseur de Fichier Base64

Déposez des images ou fichiers ➔ Génère des DataURL intégrées ou du Base64 brut en local

Outils Associés

Studio de Couleur

Studio professionnel de conversion de couleurs et de génération de palettes avec prise en charge HEX, RGB, HSL, HSV, CMYK, échelle Tailwind 50-950, contraste WCAG 2.1 et harmonies de couleurs.

Palette de Couleurs d'Image

Extracteur intelligent de couleurs dominantes et pipette avec loupe au pixel près basé sur l'algorithme K-Means, avec export en variables CSS, tokens Tailwind et PNG.

Éditeur d'Image

Importez une image ➔ Recadrez, pivotez, appliquez des filtres et ajoutez des annotations

Traitement local en mémoire client · Aucun envoi de données

Guide d'Utilisation

  • 1. Collez le code XML SVG dans l'éditeur ou glissez-déposez un fichier .svg.
  • 2. Sélectionnez les règles d'optimisation (suppression des en-têtes XML, commentaires, balises balises g vides) et ajustez la précision des décimales.
  • 3. Vérifiez l'aperçu vectoriel en direct et copiez le code SVG minifié, le composant React JSX ou téléchargez le fichier optimisé.

Avantages Techniques & Confidentialité

  • 1. Supprime en toute sécurité les métadonnées de Figma, Illustrator, Inkscape et Sketch sans dénaturer le dessin.
  • 2. Précision ajustable des coordonnées (2 à 3 décimales) réduisant la taille de 30% à 50% tout en restant net sur écran Retina.
  • 3. Analyse DOM 100% locale dans le navigateur; vos logos et illustrations vectorielles restent strictement confidentiels.

Foire Aux Questions (FAQ)

Q: Pourquoi les fichiers SVG exportés de Figma ou Illustrator sont-ils si volumineux ?
A: Les logiciels de dessin intègrent des métadonnées d'édition, des espaces de noms XML superflus, des décimales superflues et des groupes balises g vides inutiles pour le rendu web.
Q: L'arrondi des décimales risque-t-il de déformer les formes vectorielles ?
A: Conserver 2 à 3 décimales garantit une fidélité visuelle parfaite sur tous les écrans tout en réduisant considérablement la longueur des attributs de chemin 'd'.
Q: Puis-je convertir directement le SVG optimisé en composant React ?
A: Oui. L'onglet React JSX génère un composant avec les attributs au format camelCase requis par React (ex. strokeWidth, fillRule).
Q: L'optimisation risque-t-elle de casser les animations CSS ou les dégradés ?
A: Le profil de nettoyage sécurisé conserve viewBox, les classes, identifiants, balises defs et balises linearGradient, préservant l'intégrité des styles et animations.