Editeur SVG
Editez des fichiers SVG dans votre navigateur. Collez le code, apercu en direct, modifiez les dimensions et couleurs, telechargez le SVG modifie.
Fonctionnalites principales
- Aperçu en direct du code SVG
- Édition de la largeur, hauteur et viewBox
- Rechercher et remplacer des couleurs
- Télécharger ou copier le SVG modifié
Guide
SVG (Scalable Vector Graphics) est un format d'image basé sur XML qui décrit des formes, des tracés et du texte à l'aide de coordonnées mathématiques plutôt que de grilles de pixels. Contrairement aux formats matriciels (PNG, JPEG, WebP), les images SVG sont mises à l'échelle à n'importe quelle taille sans perte de qualité. Une icône de 24px et un logo grandeur nature sur un panneau peuvent utiliser le même fichier SVG. Cela fait de SVG le format standard pour les icônes, logos, illustrations, graphiques et tout visuel devant s'afficher nettement à plusieurs tailles. Ce guide couvre la structure SVG, les techniques d'édition, les stratégies d'optimisation et l'utilisation pratique en développement web. Un fichier SVG est un document texte. Vous pouvez l'ouvrir dans n'importe quel éditeur de code et le lire. L'élément racine est <svg> avec des attributs pour width, height et viewBox. Le viewBox définit le système de coordonnées : viewBox="0 0 100 100" signifie que la zone de dessin s'étend de (0,0) à (100,100). À l'intérieur de l'élément <svg>, vous trouvez des éléments de forme comme <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon> et <path>. Chaque élément possède des attributs qui définissent sa géométrie, sa couleur de remplissage, sa couleur de contour, son épaisseur de trait et d'autres propriétés visuelles. Comprendre cette structure est essentiel pour éditer les SVG efficacement parce que chaque changement visuel que vous effectuez dans un éditeur graphique correspond à une modification de ce balisage XML. L'élément <path> est l'élément SVG le plus puissant et le plus complexe. Il utilise une chaîne compacte de commandes dans son attribut d pour décrire n'importe quelle forme arbitraire. Les commandes sont : M (move to), L (line to), H (ligne horizontale), V (ligne verticale), C (courbe de Bézier cubique), S (courbe de Bézier cubique lissée), Q (courbe de Bézier quadratique), T (courbe de Bézier quadratique lissée), A (arc elliptique) et Z (fermer le tracé). Les lettres majuscules utilisent des coordonnées absolues. Les lettres minuscules utilisent des coordonnées relatives. Un tracé typique ressemble à d="M10 10 L90 10 L90 90 L10 90 Z\
Questions frequentes
Mes données SVG sont-elles en sécurité ?
Oui, tout le traitement se fait dans votre navigateur. Aucune donnée n'est envoyée vers un serveur.
Puis-je éditer des SVG complexes ?
Oui, vous pouvez éditer n'importe quel code SVG valide. L'outil prend en charge tous les éléments et attributs SVG standards.
