SVG Studio

Infinite Resolution Analytics

Edit and preview SVG code instantly. Experience the magic of crisp vector graphics.

SVG Code Editor

Live Preview

SVG transforme des graphismes vectoriels nets en code éditable

Icônes, logos simples, schémas et détails d'interface sont souvent plus adaptés au SVG, car ils restent nets à toutes les tailles. SVG Studio permet de modifier le balisage, de voir le rendu en direct, de copier le code et d'enregistrer un fichier SVG.

Notions SVG

Vecteur

L'image est décrite par des formes, chemins et coordonnées plutôt que par des pixels fixes.

viewBox

Ce système de coordonnées interne contrôle l'adaptation du dessin aux différentes tailles d'affichage.

Aperçu nettoyé

Le composant utilise DOMPurify avec un profil SVG avant d'insérer le code modifié dans l'aperçu.

Comment l'utiliser

  1. Collez un balisage SVG dans l'éditeur ou modifiez l'exemple de départ.
  2. Vérifiez l'aperçu en direct lorsque vous changez formes, couleurs et dimensions.
  3. Copiez le code final ou enregistrez-le comme fichier SVG.

Questions fréquentes

Puis-je coller un SVG externe ?

Oui, mais inspectez tout SVG tiers avant production et retirez les éléments inutiles ou suspects.

Est-ce surtout un convertisseur PNG ?

Cette page se concentre sur l'édition, l'aperçu, la copie et l'enregistrement du SVG. La conversion raster peut demander une étape séparée.

Pourquoi l'aperçu peut-il différer de mon site ?

CSS parent, couleurs héritées, polices et contraintes de mise en page peuvent modifier l'apparence du même SVG.

Avant d'utiliser un SVG en production, vérifiez sécurité, accessibilité, licence et rendu dans le projet cible.