Convertir HTML en SVG

Un éditeur graphique ou un système de publication peut accepter des illustrations vectorielles, mais pas une page HTML. Le rendu de la page au format SVG vous fournit une illustration redimensionnable, mais ne conserve pas son interactivité sur le Web.

Qu’est-ce que HTML ?

HTML est un langage de balisage qui structure les pages Web, souvent mises en forme avec CSS et rendues interactives avec JavaScript. Les développeurs Web, les systèmes de gestion de contenu et les outils de création de sites produisent des fichiers HTML ; les pages peuvent également dépendre de polices, d’images, de feuilles de style ou de scripts externes.

Qu’est-ce que SVG ?

SVG est un format fondé sur XML pour les graphiques vectoriels. Les tracés, les formes et le texte peuvent être redimensionnés sans pixellisation, et de nombreux éléments peuvent être modifiés dans un logiciel vectoriel. SVG est couramment utilisé pour les logos, les diagrammes et les illustrations. Les photographies et autres images matricielles restent composées de pixels lorsqu’elles sont intégrées dans un fichier SVG.

Comment convertir une page HTML en SVG

Pour effectuer une capture directe hors ligne, utilisez CutyCapt, un moteur de rendu WebKit en ligne de commande qui peut générer des fichiers SVG. Ouvrez un terminal dans le dossier contenant la page et exécutez :

CutyCapt --url="file:///absolute/path/page.html" --out="page.svg" --min-width=1200 --min-height=1600

Remplacez l’URL du fichier et les dimensions par l’emplacement de la page et la taille de fenêtre de rendu souhaitée. Sous Windows, utilisez une URL telle que file:///C:/folder/page.html. Conservez les ressources référencées localement dans les dossiers prévus. Ajoutez --delay=1000 si la page a besoin de temps pour finir de se charger avant la capture. CutyCapt utilise l’ancien moteur Qt WebKit ; vérifiez donc son rendu du CSS et du JavaScript modernes en le comparant à celui d’un navigateur récent.

Si CutyCapt ne rend pas correctement certaines pages, utilisez une version récente de Firefox ou de Chrome et Inkscape :

1. Ouvrez le fichier HTML dans le navigateur et vérifiez que les polices, les images et les styles se chargent correctement.
2. Imprimez la page au format PDF avec Print → Save to PDF ou Print → Microsoft Print to PDF. Définissez le format et l’orientation du papier, activez les graphiques d’arrière-plan si nécessaire, puis désactivez les en-têtes et pieds de page du navigateur.
3. Ouvrez le PDF dans Inkscape avec File → Open, choisissez les options de page et d’importation du texte, puis sélectionnez File → Save As et choisissez Plain SVG ou Inkscape SVG.
4. Vérifiez le fichier SVG dans un navigateur ou un éditeur vectoriel pour repérer les éléments tronqués, le texte mal positionné et les images manquantes.

Qualité et compatibilité

Ces deux méthodes capturent le rendu d’une page au lieu de convertir sa structure HTML. Les liens, les formulaires, les scripts, les animations et le comportement adaptatif ne sont pas conservés. Le résultat dépend de la taille de la fenêtre d’affichage ou de la page PDF, des paramètres d’impression du navigateur, des ressources chargées et des polices disponibles ; le contenu situé hors de la zone capturée peut être tronqué. Le texte et les formes peuvent rester des objets vectoriels, mais les images matricielles le restent également. SVG peut intégrer du HTML avec foreignObject, mais la prise en charge varie selon les visionneuses et les éditeurs : ce n’est donc pas une méthode fiable pour préserver une page Web complète.