SVG en HTML

Convertir un SVG en HTML en ligne

Importez un fichier SVG ou collez son code pour obtenir un SVG inline à intégrer dans une page HTML. Vérifiez le résultat dans l’aperçu, ajustez les réglages d’optimisation et copiez le code. L’analyse, l’optimisation et la conversion s’effectuent en local dans votre navigateur, sans que votre SVG soit transmis à un serveur.

Préparer un SVG inline responsive

Conservez le viewBox pour préserver le système de coordonnées du SVG. Supprimez la largeur et la hauteur fixes lorsque le SVG dispose d’un viewBox exploitable, puis dimensionnez-le dans votre propre CSS.

Comprendre la taille du SVG et le gain obtenu

« Taille d’origine » correspond à la taille du SVG que vous fournissez. « Taille du SVG optimisé » correspond à sa taille après traitement selon les options choisies, comme la suppression des commentaires, l’arrondi des coordonnées ou la minification du code. Les tailles sont indiquées en ko, 1 ko valant 1 000 octets. « Gain » indique la réduction en pourcentage : passer de 10 ko à 7 ko représente un gain de 30 %. Si le résultat est plus volumineux, par exemple à cause d’une mise en forme lisible, c’est « Augmentation de taille » qui s’affiche. Ces chiffres comparent le code SVG, et non la taille des exports JSX, React, Data URI CSS ou Base64.

Précision décimale et indentation

La précision décimale définit le nombre de chiffres conservés après la virgule dans les coordonnées et les attributs numériques. Avec une précision de 2, 12,34567 devient 12,35. Réduire le nombre de décimales peut alléger le fichier, mais risque d’altérer les détails fins ; la valeur par défaut, 3, n’est qu’un point de départ, alors vérifiez l’aperçu. L’indentation utilise 2 espaces, 4 espaces ou des tabulations pour rendre le code HTML et JSX plus lisible, sans modifier l’image. « Minifier le SVG » supprime les espaces de mise en forme inutiles pour compacter le résultat ; l’indentation est donc désactivée tant que la minification est active.

HTML, JSX, React et Data URI SVG

Le format HTML fournit du code SVG inline, qui se télécharge sous forme de fichier SVG. JSX adapte les noms d’attributs et les styles inline pour React. « Composant React » l’enveloppe dans une fonction TypeScript qui accepte les props SVG standard. « Data URI CSS » produit une déclaration background-image ; Base64 produit une URI d’image SVG encodée. Les statistiques de taille portent sur le SVG optimisé, et non sur les formats encodés, plus volumineux. Vérifiez les ID avant d’insérer plusieurs copies inline sur une même page.

Un traitement SVG statique et local

L’aperçu est une image isolée, et non du code exécutable intégré à la page. Les scripts, le HTML intégré, les animations, les images externes et les feuilles de style sont supprimés. Les styles de présentation inline pris en charge et les références à des fragments locaux sont conservés. Cet outil est conçu pour des illustrations statiques ; les fonctionnalités non prises en charge peuvent en modifier l’apparence. currentColor modifie les remplissages et contours unis, et hérite de la couleur du contexte lorsque le SVG est utilisé inline ; un aperçu sous forme d’image utilise son propre contexte de couleur.