web-dev-qa-db-fra.com

Puis-je exporter une partie d'une page HTML vers une image SVG?

J'ai besoin d'une image vectorielle d'une boîte de navigation Wikipedia. Malheureusement, Inkscape ne peut pas ouvrir le fichier HTML, et ni Opera ni Chromium ne peuvent enregistrer la page au format SVG. semble signifier une fonctionnalité où le HTML "parle" à une image SVG à l'intérieur. Est-ce que quelqu'un comment transformer HTML en SVG, soit la page entière ou un div sur la page? J'ai besoin du style HTML, CSS et tout.

htmlbrowsersvgrendering
45
Esteis

J'ai rencontré le même besoin et j'ai trouvé les utilitaires gratuits suivants qui promettent que cela est possible:

  1. WebVector est un convertisseur HTML en SVG ou PNG. Il convertit un document HTML en une image vectorielle au format SVG ou une image bitmap au format PNG. Les fichiers SVG (Standard Vector Graphics) peuvent être modifiés ultérieurement par divers éditeurs de graphiques vectoriels tels qu'Inkscape.
    http://cssbox.sourceforge.net/webvector/

  2. CutyCapt est un petit utilitaire de ligne de commande multiplateforme pour capturer le rendu WebKit d'une page Web dans une variété de formats vectoriels et bitmap, y compris SVG, PDF , PS, PNG, JPEG, TIFF, GIF et BMP. Voir IECapt pour un outil similaire basé sur Internet Explorer.
    http://cutycapt.sourceforge.net/

  3. wkhtmltopdf et wkhtmltoimage sont des outils de ligne de commande open source (LGPL) pour le rendu HTML en PDF et divers formats d'image utilisant le moteur de rendu QT Webkit. Ceux-ci fonctionnent entièrement "sans tête" et ne nécessitent pas d'affichage ou de service d'affichage. Il y a aussi une bibliothèque C, si vous êtes dans ce genre de chose.
    http://wkhtmltopdf.org/

-

Questions sans réponse: je sais que vous pouvez utiliser quelque chose comme rasterize.js pour rendre les objets DOM en <canvas>, mais comment ces bibliothèques sont-elles construites de manière à pouvoir exporter SVG? Plus précisément, WebKit lui-même peut-il être utilisé pour produire des SVG modifiables "au pixel près" de contenu Web et d'extraits HTML? Est-ce une tâche relativement simple pour une bibliothèque ou est-ce quelque chose de beaucoup plus complexe?

34
JeremyFelix

J'ai réussi à trouver un site Web qui fera la conversion pour vous. Tout ce que vous avez à faire est de coller le code HTML entre les sauts de ligne et il fait le reste. L'URL est: http://www.hiqpdf.com/demo/ConvertHtmlToSvg.aspx

31
Bmize729

Vous pouvez essayer wkhtmltoimage Il peut convertir du HTML en SVG et de nombreux formats différents

8
user1566713

Conseil de xthexder essayé: impression dans un fichier. (Et puis conversion PDF en SVG.) J'ai essayé Opera, Firefox et Chromium sous Linux; aperçu ci-dessous. Dommage pour les bugs d'Opera.

J'ai créé ce wiki communautaire de réponse; les ajouts pour d'autres OS sont les bienvenus.

Opera 11.61 (Linux)

  • prend en charge l'impression en SVG (!), PDF et PS
  • utilise une feuille de style d'auteur (sauf si vous choisissez une feuille de style différente dans le menu Affichage ou désactivez CSS)
  • Avec PDF et sortie PS, aucun texte n'est mis dans le fichier! C'est étrange et cela doit être un bug.
  • Si je choisis la sortie SVG, Opera produit un .svg fichier mais y écrit du code PostScript. :-(

Firefox 11.0 (Linux)

  • prend en charge l'impression vers PDF et PS
  • ignore la feuille de style de l'auteur, imprime en noir et blanc
  • Utilise la police DejaVu Serif dans une taille assez grande

Chromium 17 (Linux)

  • prend en charge l'impression vers PDF uniquement
  • ignore la feuille de style de l'auteur, imprime en noir et blanc
  • Utilise Times New Roman
3
Esteis