Studio vectoriel et icônes 3D
Studio complet d'édition spatiale 3D, décomposition SVG et création d'icônes dans le navigateur.
Direct canvas editing: select a part, then drag to move. Use the picker’s Replace selected or Add layer modes to build a composite SVG.
Épingler plusieurs icônes personnalisées et compiler une planche de symboles unique.
Aucune icône épinglée. Épinglez des icônes pour les réunir dans une planche.
Générez des prompts IA ou améliorez l’icône sur le canevas
Choisissez un preset, puis copiez le prompt dans votre outil IA ou améliorez l’icône sur le canevas.
Studio vectoriel et icônes 3D
Studio complet d'édition spatiale 3D, décomposition SVG et création d'icônes dans le navigateur.
Fichiers SVG 1.1/2.0, code XML brut ou icônes du catalogue intégré
SVG optimisé, PNG (64–2048 px), WebP, React TSX, Vue 3, Svelte, Data URI CSS et Sprite SVG
Réunit édition vectorielle, éclairage 3D, compression et export de code dans le navigateur
Comment utiliser Studio vectoriel et icônes 3D
-
1
Ouvrez l’espace Studio depuis le menu Outils et créez un visuel ou importez un fichier SVG.
-
2
Modifiez les calques, couleurs, dégradés et épaisseurs de contour dans l’inspecteur.
-
3
Appliquez un éclairage 3D ou activez une animation pour vos badges d’icônes.
-
4
Exportez en SVG propre, PNG ou WebP haute définition, ou copiez le code du composant.
shield.svg importé depuis le disque (calque de tracé unique)
SVG au dégradé ajusté accompagné d’un composant JSX acceptant className
Limites
- Les préréglages 3D rendent mieux sur les formes convexes à source lumineuse unique.
- L’historique d’annulation conserve jusqu’à 50 étapes par session.
- L’import est limité à 2 Mio par fichier.
Les fichiers que vous ouvrez ou collez dans cet atelier sont traités localement dans votre navigateur. Rien n’est envoyé vers un serveur.
Guides pour cet outil
- Comment Animer des Icônes SVG avec CSS
- Comment modifier un SVG dans Figma ou le Navigateur
- Le viewBox SVG expliqué : des icônes à l’échelle sans distorsion
- Comment centrer un SVG : horizontalement, verticalement, et dans les boutons
- Animer des tracés SVG avec stroke-dasharray, stroke-dashoffset et pathLength