Enveloppez votre HTML et votre CSS en ligne dans un SVG redimensionnable grâce à foreignObject. Prévisualisez-le en direct et téléchargez un fichier .svg prêt à l’emploi. Tout s’exécute dans votre navigateur.
L’élément foreignObject du SVG permet d’intégrer du HTML et du CSS vivants dans une image vectorielle. Le résultat se redimensionne proprement et s’utilise partout où un SVG est accepté : parfait pour les badges, les cartes et les étiquettes soignées.
Un SVG construit avec foreignObject n’est pas une capture d’écran : votre balisage reste vivant à l’intérieur du fichier. Le texte demeure du vrai texte, votre CSS en ligne continue de le mettre en forme et rien n’est rastérisé — le graphique reste donc parfaitement net à n’importe quel niveau de zoom, alors que le fichier ne pèse généralement que quelques kilo-octets. Cette approche convient donc idéalement aux badges de README, aux cartes de profil, aux widgets de tableau de bord et à tout autre usage où vous voulez qu’un extrait de HTML mis en forme se comporte comme un fichier image unique, que vous pouvez héberger, intégrer ou versionner.
Utilisez cet outil lorsque le résultat sera affiché dans un navigateur web, car les navigateurs rendent foreignObject nativement et le gardent net. Si vous avez besoin d’une image matricielle qui fonctionne partout — messageries, documents ou logiciels de création —, rendez plutôt le même balisage avec notre convertisseur HTML vers image, qui produit un PNG, un JPG ou un PDF. Les deux outils sont complémentaires : l’un conserve votre HTML sous forme de vecteur redimensionnable, l’autre le fige en image matricielle.
Tout ce qu’il faut savoir sur la conversion du HTML en SVG.
Votre HTML est placé dans un <foreignObject> SVG, que les navigateurs rendent comme partie intégrante du vectoriel. L’ensemble se redimensionne sans pixellisation.
Le CSS en ligne et les images en URI de données donnent les meilleurs résultats. Les ressources externes risquent de ne pas se charger lorsque le SVG est ouvert en dehors de votre site : intégrez donc tout ce que vous pouvez.
Non. Le SVG est généré entièrement dans votre navigateur.
Oui. Saisissez la largeur et la hauteur de votre choix en pixels avant de générer le fichier. Elles définissent le canevas du SVG et son viewBox et, comme le fichier est vectoriel, vous pourrez le redimensionner ensuite sans perdre en netteté.
foreignObject est rendu par les navigateurs web, mais de nombreux éditeurs graphiques comme Inkscape ou Illustrator ne le prennent pas totalement en charge. Pour un résultat optimal, utilisez le SVG sur des pages web ou dans des outils fonctionnant dans le navigateur.
Cet outil conserve votre balisage sous forme vectorielle et ne le rastérise jamais. S’il vous faut une image matricielle, rendez le même HTML avec notre outil HTML vers image, qui produit du PNG, du JPG ou du PDF.