Est-il possible de prendre une capture d'écran d'une page Web en tant qu'image SVG?

31

J'ai une page Web entièrement basée sur des vecteurs (texte, polices d'icônes, SVG, mais pas de PNG, JPEG ou GIF).

Existe-t-il un moyen de prendre une capture d'écran vectorielle de cette page Web et de l'enregistrer en tant que fichier SVG entièrement évolutif?
(pour que je puisse prendre la capture d'écran sur un PC normal et la faire bien paraître sur la rétine)

Cela devrait être possible, mais je ne trouve rien qui puisse le faire.

Crédit supplémentaire: s'il a quelques images bitmap, je veux un SVG avec des bitmaps intégrés.

html screenshot svg SLaks
la source
Il semble que html2canvas.hertzen.com pourrait vous aider ici.
SLaks le
1
le fichier .html en question n'est-il pas vraiment ce que vous voulez?
Sparr
@Sparr: Non; Je veux manipuler le SVG dans un éditeur (par exemple, le recadrer, ajouter une bannière), puis le mettre dans un fichier <img>. (pour la page d'aide / visite guidée d'une application Web)
SLaks
Comment les fichiers PNG ou JPEG seraient-ils convertis en SVG?
HairOfTheDog
7
Ceci est une idée utile incroyable. Surtout pour les concepteurs d'interface utilisateur qui doivent travailler sur les évolutions des sites Web existants. Je paierai pour un outil qui propose des exportations SVG parce que je déteste travailler sur des maquettes avec des logiciels bitmaps, c'est un non-sens total.
smonff

Réponses:

10

Pas tout à fait une capture d'écran, mais si la page s'imprime bien, vous pouvez l'imprimer au format PDF. Inkscape et Illustrator chargeront un PDF (et l'enregistreront au format SVG si nécessaire).

Dan
la source
Lorsque j'ai essayé, Firefox a imprimé des boutons radio bitmap dans le fichier PDF. Chrome-browser et wkhtmltopdf ont produit des fichiers tout vecteur.
Randall Whitman
9

CSSBox WebVector convertira les pages HTML en SVG. Il s'agit d'une application en ligne de commande java, et vous pouvez voir un exemple de sa sortie ici .

Andrew
la source
Les deux modes de ligne de commande et GUI en fait. J'ai essayé WebVector pour exporter vers SVG un petit formulaire HTML contenant des boutons radio. Il a produit un fichier SVG contenant un contenu entièrement vectoriel, comme souhaité - aucun contenu bitmap intégré. Les boutons radio sont rendus sous forme de carrés, qui ressemblent à des cases à cocher de rendu typique.
Randall Whitman
2

Cela est déjà répondu à Capture d'écran de capture d'une grande page Web dans Chrome

J'utiliserais CutyCapt, il capture le rendu du webkit sur une image.

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.

chx
la source
J'ai essayé CutyCapt pour exporter en SVG un petit formulaire HTML contenant des boutons radio. Il a produit un fichier SVG contenant en partie du contenu vectoriel et en partie bitmap.
Randall Whitman
CutyCapt est disponible dans les référentiels canoniques sur Ubuntu 18.04, donc sudo apt install cutycapttout ce que je devais faire pour l'essayer. Avec quelques secondes de retard ( --delay=3000), cela rend même mathjax !!!
cheshirekow
0

Une approche: si vous prenez une capture d'écran raster (PNG, JPG, etc.), vous pouvez ensuite utiliser "Trace Bitmap" dans Inkscape pour "convertir" les champs de certaines couleurs associées dans la capture d'écran en objets vectoriels. Je suis sûr qu'il existe un outil équivalent dans Adobe Illustrator. Faites attention au nombre de couleurs distinctes que vous spécifiez pour tracer - les fichiers vectoriels résultants peuvent devenir complexes rapidement. Chaque couleur est un objet vectoriel distinct qui chevauche les autres objets de couleur pour représenter l'image raster d'origine, vous devrez donc probablement faire un peu de nettoyage.

Adam Keck
la source
1
Cela prendra tellement de travail pour obtenir les paramètres corrects, je ne pense pas que ce sera acceptable. Mais tu ne sais jamais. Adobe Flash peut également le faire et a une manière différente de faire les choses, ce qui pourrait avoir des résultats meilleurs ou pires.
SPRBRN
-1

Cela pourrait vous aider. Il existe un excellent module complémentaire pour Firefox, appelé Enregistrer au format PDF, qui utilise les outils de https://pdfcrowd.com/ . Pour la sortie SVG finale, j'utiliserais alors l'un des outils en ligne pour convertir en SVG.

Petr S
la source