Éditeur de code SVG en ligne avec aperçu en direct

Éditeur de code, visionneuse et aperçu SVG tout-en-un

Le SVG (Scalable Vector Graphics) est le format XML à l'origine des icônes, logos et illustrations de la plupart des sites web. Phoenix Code ouvre les fichiers .svg sous forme de code lisible et modifiable, et affiche l'image à côté, en la mettant à jour en direct au fur et à mesure de votre frappe.

Il fonctionne également comme une visionneuse SVG. Ouvrez n'importe quel fichier .svg pour voir son rendu réel et inspecter le balisage en même temps, au lieu de glisser les fichiers un par un dans un onglet de navigateur.

Et comme Phoenix Code est un véritable éditeur de code, vous bénéficiez de bien plus qu'une simple zone de texte pour coller et prévisualiser : la coloration syntaxique, les projets multi-fichiers, l'intégration Git et l'assistance IA de Claude Code sont tous intégrés, vous pouvez donc modifier les SVG au sein d'un véritable projet de site web ou d'application.

Tout ce dont vous avez besoin pour modifier les fichiers SVG

Modifiez manuellement les icônes, peaufinez les logos et nettoyez les vecteurs exportés sans ouvrir une lourde application de design.

Aperçu SVG en direct

Voyez l'image s'actualiser au fur et à mesure que vous tapez. Modifiez un remplissage, ajustez un tracé ou redimensionnez la viewBox et observez le résultat instantanément.

Complétion automatique des balises et attributs SVG

Suggestions de code pour les éléments et attributs SVG pendant que vous tapez, allant de path et viewBox aux dégradés, filtres et masques.

Nuanciers et sélecteur de couleurs

Les couleurs de remplissage et de contour affichent des échantillons intégrés à côté du code. Cliquez sur l'un d'eux pour ouvrir un sélecteur de couleur et ajuster les couleurs sans quitter l'éditeur.

Mise en forme du code SVG désordonné

Les SVG exportés se présentent souvent sous la forme d'une seule longue ligne. Un seul clic met en forme le balisage en un code propre, indenté et lisible, et les balises appariées sont renommées ensemble lorsque vous les modifiez.

Assistant de code IA Claude

Demandez à l'IA d'ajuster un tracé, de recolorer un jeu d'icônes ou d'expliquer le fonctionnement d'un filtre. Utilisez votre identifiant/clé existant ; vos fichiers restent en local.

De vrais projets, pas une simple zone de texte

Ouvrez un dossier d'icônes complet, modifiez plusieurs fichiers SVG côte à côte et validez les changements avec Git intégré. Fonctionne hors ligne dans l'application de bureau gratuite.

Ouvrir et visualiser des fichiers SVG en ligne

Besoin d'ouvrir un fichier SVG que quelqu'un vous a envoyé ? Ouvrez-le sur phcode.dev et vous verrez l'image rendue et son code source côte à côte, sans installation et sans compte. C'est un outil en ligne pour ouvrir et visualiser des fichiers SVG.

Survoler une référence SVG dans votre HTML ou CSS affiche une miniature de l'image avec ses dimensions, ce qui rend la recherche de la bonne icône dans un grand projet beaucoup plus rapide.

Éditez des SVG en ligne, en toute confidentialité

Rien n'est téléversé sur un serveur. Que vous utilisiez l'éditeur de navigateur ou l'application de bureau, vos fichiers SVG restent sur votre machine. Aucun compte, aucune inscription, aucun filigrane.

Une précision importante : Phoenix Code est un éditeur de code, pas un outil de dessin. Si vous voulez faire glisser des formes sur un canevas, un éditeur visuel comme Inkscape est plus adapté. Si vous voulez un contrôle précis sur le balisage intégré à votre produit, l'édition directe du code est précisément l'objectif.

Comment ouvrir et modifier un fichier SVG

D'un fichier .svg brut à une modification terminée en moins d'une minute.

Ouvrez Phoenix Code

Lancez l'éditeur instantanément sur phcode.dev, ou installez l'application de bureau gratuite pour Windows, macOS ou Linux.

Ouvrez votre fichier .svg

Ouvrez le dossier qui contient votre SVG, ou faites glisser le fichier dans l'éditeur. Il s'ouvre en tant que code modifiable avec l'aperçu de l'image à côté.

Éditez avec l'aperçu en direct

Modifiez les tracés, les couleurs, les tailles ou le texte et observez l'image s'actualiser en temps réel.

Enregistrez et intégrez

Enregistrez le fichier et déposez-le directement dans votre site web, application ou README. Le balisage que vous avez modifié est exactement celui qui est intégré.

Plus qu'un éditeur SVG

Phoenix Code propose la même astuce d'aperçu en direct pour le Markdown. Si vous écrivez de la documentation ou des README, essayez notre éditeur Markdown en ligne gratuit, ou parcourez nos outils de développement gratuits pour des convertisseurs, formateurs et générateurs.

Foire aux questions

Oui. L'édition de fichiers SVG avec aperçu en direct est entièrement gratuite dans Phoenix Code, aussi bien dans le navigateur sur phcode.dev que dans l'application de bureau. L'éditeur est open source.

Ouvrez phcode.dev dans votre navigateur, puis ouvrez le dossier contenant votre fichier .svg et cliquez dessus. Vous verrez l'image rendue et le code source modifiable côte à côte, sans installation ni compte requis.

Oui. L'image rendue se met à jour au fur et à mesure que vous tapez, vous pouvez donc ajuster un chemin ou une couleur et voir le résultat immédiatement dans le panneau d'aperçu.

Non. Phoenix Code modifie le code source SVG plutôt que de proposer une zone de dessin. Cela le rend idéal pour nettoyer des icônes, ajuster les couleurs et les chemins, et garder un contrôle précis du balisage. Pour l'illustration à main levée, un outil visuel comme Inkscape est plus adapté.

Commencez à éditer du SVG maintenant

Un éditeur et visualiseur de code SVG gratuit et open-source avec aperçu en direct, dans votre navigateur ou sur votre bureau.

Télécharger Phoenix Code Ouvrir l'éditeur SVG