Les outils de développeur que vous utilisez chaque jour, tous au même endroit.

Convertisseurs, formateurs, hash, validateurs et les petits utilitaires que vous rouvrez sans cesse restent réunis au lieu de se perdre entre vos onglets.

GitHub

/ Outils

■

/ Chercheur d'outils

109 outils

/ Visualiseur SVG

Code SVG

Largeur de l'apercu (px)

Hauteur de l'apercu (px)

/ Outil sélectionné

■

Visualiseur SVG - outil de formatage gratuit

Afficher et prévisualiser du code SVG avec coloration syntaxique

■ 01

Qu'est-ce que le SVG ?

Le SVG (Scalable Vector Graphics) est un format d'image vectorielle basé sur XML pour les graphiques bidimensionnels. Contrairement aux images matricielles, les SVG peuvent être mis à l'échelle à n'importe quelle taille sans perte de qualité, ce qui les rend idéaux pour les logos, icônes et illus…

■ 02

Comment ça marche ?

Collez votre code SVG dans la zone de texte. L'outil affiche un aperçu en direct et présente le code avec coloration syntaxique. Ajustez les dimensions de l'aperçu pour voir comment le SVG s'adapte. Utilisez le bouton Copier pour copier le code SVG…

■ 03

Exemples de cas

Couvre Cercle simple et Élément path pour comparer rapidement les entrées et sorties courantes.

/ Outils associés

/ Code

■

Code source de l'outil sélectionné, affiché ici à côté de la version en direct sur la droite.

/ Code source

TypeScript

typescript

// No external dependencies needed - SVG is native to browsers

// Create an SVG programmatically
function createSvg(width: number, height: number): string {
  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
  <!-- Add your SVG elements here -->
</svg>`;
}

// Example: Create a circle SVG