Coller le SVG dans React provoque une erreur.

Le JSX exige des attributs en camelCase, par exemple strokeWidth au lieu de stroke-width. L'export JSX renomme les attributs à votre place.

Comment utiliser un SVG en arrière-plan CSS ?

Convertissez-le en Data URI et placez la chaîne directement dans background-image: url(...) ; aucune requête réseau supplémentaire n'est effectuée.

Éditeur & Convertisseur SVG

Éditez le code SVG, modifiez les couleurs, optimisez et convertissez en React JSX ou PNG.

SVG Preview ViewportWidth: 150px | Height: 150px

Drag SVG file inside or click Upload to select a file.

Dimensions & viewBox

Width (px)

Height (px)

viewBox (min-x, min-y, width, height)

Couleurs extraites (0)

No color attributes detected in this SVG.

Modifier un SVG et convertir son code

Un SVG est une image vectorielle écrite sous forme de texte : on peut donc la modifier directement. Changez les couleurs, supprimez les métadonnées pour alléger le fichier, puis exportez-le en composant React (JSX), en Data URI à intégrer dans du CSS ou en PNG matriciel.

Mode d'emploi

Collez le code SVG ou chargez un fichier.
Ajustez les couleurs et la taille, puis appliquez l'optimisation.
Exportez en JSX, en Data URI ou en PNG.

Questions fréquentes

Coller le SVG dans React provoque une erreur.: Le JSX exige des attributs en camelCase, par exemple strokeWidth au lieu de stroke-width. L'export JSX renomme les attributs à votre place.
Comment utiliser un SVG en arrière-plan CSS ?: Convertissez-le en Data URI et placez la chaîne directement dans background-image: url(...) ; aucune requête réseau supplémentaire n'est effectuée.