Optimiseur SVG
Optimisez les SVG, retirez métadonnées et scripts et convertissez-les en React JSX.
Entrée SVG
Glissez et déposez les fichiers SVG ici
Possibilités
Sortie
CSS d’arrière-plan SVG
Aperçu
Aucun aperçu disponible pour la sortie JSX
Pourquoi utiliser un optimiseur SVG en ligne ?
Les graphiques vectoriels évolutifs (SVG) sont essentiels à la conception Web moderne, offrant des visuels nets à n'importe quelle résolution. Cependant, les fichiers SVG bruts exportés à partir d'outils tels qu'Illustrator, Figma ou Sketch contiennent souvent des métadonnées, des commentaires et des attributs cachés inutiles qui gonflent la taille du fichier. Notre outil SVG Pro vous aide à nettoyer, réduire et optimiser les SVG pour des chargements de pages plus rapides et des bases de code plus propres.
Fonctionnalités pour les développeurs
- Conversion SVG en JSX : Convertissez automatiquement les attributs SVG standard (comme
class,stroke-width) en JSX compatible React (className,strokeWidth). Parfait pour les applications Next.js et React. - Désinfection de sécurité : Supprimez le code malveillant tel que les balises
<script>et les gestionnaires d'événements en ligne (onclick, etc.) pour empêcher les attaques XSS lors de l'utilisation de SVG téléchargés par l'utilisateur. - Générateur d'arrière-plan CSS : Générez instantanément des extraits d'URI de données optimisés pour utiliser les SVG comme images d'arrière-plan CSS.
Techniques d'optimisation
- Supprimer les métadonnées : Supprimez les en-têtes XML, les doctypes et les métadonnées de l'éditeur (Adobe Illustrator, Inkscape) dont les navigateurs n'ont pas besoin.
- Attributs propres : Supprimez les valeurs par défaut explicites et les identifiants inutiles pour réduire la taille du fichier.
- Réduire la structure : Supprimez les commentaires et réduisez les espaces en toute sécurité.
Foire aux questions
Comment convertir SVG en composant React ?
Téléchargez simplement votre SVG ou collez le code, puis cochez l'option "Convertir en JSX". L'outil utilisera les attributs camelCase et remplacera class par className, vous offrant ainsi un composant React prêt à coller.
Cet optimiseur SVG est-il sûr à utiliser ?
Oui. SVG Pro fonctionne entièrement dans votre navigateur. Vos fichiers ne sont jamais téléchargés sur aucun serveur, garantissant ainsi que vos actifs et données propriétaires restent privés et sécurisés.
Pourquoi la taille de mon fichier SVG est-elle si grande ?
Les fichiers SVG contiennent souvent des « éléments brutaux » laissés par les logiciels de conception, tels que des couches cachées, des métadonnées spécifiques à l'éditeur et une précision excessive dans les données de chemin. La validation et la réduction de vos SVG peuvent souvent réduire la taille du fichier de 30 à 70 % sans perte visuelle.