¿Es posible tomar una captura de pantalla de una página web como una imagen SVG?

31

Tengo una página web que está completamente basada en vectores (texto, fuentes de iconos, SVG, pero no PNG, JPEG o GIF).

¿Hay alguna forma de tomar una captura de pantalla vectorial de esa página web y guardarla como un archivo SVG totalmente escalable?
(para que pueda tomar la captura de pantalla en una PC normal y que se vea bien en la retina)

Esto debería ser posible, pero no puedo encontrar nada que lo haga.

Crédito adicional: si tiene algunas imágenes de mapa de bits, quiero un SVG con mapas de bits incrustados.

html screenshot svg SLaks
fuente
Parece que html2canvas.hertzen.com podría ayudar aquí.
SLaks
1
¿el archivo .html en cuestión no es realmente lo que quieres?
Sparr
@Sparr: No; Quiero manipular el SVG en un editor (por ejemplo, recortarlo, agregar un banner), luego ponerlo en un <img>. (para la página de ayuda / recorrido de una aplicación web)
SLaks
¿Cómo se convertirían los archivos PNG o JPEG a SVG?
HairOfTheDog
77
Esta es una idea increíblemente útil. Especialmente para los diseñadores de UI que tienen que trabajar en las evoluciones de sitios web existentes. Pagaré por una herramienta que incluya exportaciones de SVG porque odio trabajar en maquetas con software de mapas de bits, esto es una tontería total.
smonff

Respuestas:

10

No es una captura de pantalla, pero si la página se imprime bien, podría imprimirla como PDF. Tanto Inkscape como Illustrator cargarán un PDF (y lo guardarán como SVG si es necesario).

Dan
fuente
Cuando probé esto, Firefox imprimió botones de radio de mapa de bits en el archivo PDF. Chromium-browser y wkhtmltopdf produjeron archivos completamente vectoriales.
Randall Whitman
9

CSSBox WebVector convertirá páginas HTML a SVG. Es una aplicación de línea de comandos de Java, y puede ver una muestra de su salida aquí .

Andrés
fuente
Ambos modos de línea de comandos y GUI, de hecho. Probé WebVector para exportar a SVG un pequeño formulario HTML que contiene botones de radio. Produjo un archivo SVG que contenía contenido completamente vectorial, según lo deseado, sin contenido de mapa de bits incrustado. Los botones de opción se muestran como cuadrados, que parecen casillas de verificación de representación típica.
Randall Whitman
2

Esto ya se respondió en Capture captura de pantalla de página web grande en Chrome

Me gustaría utilizar CutyCapt captura WebKit de renderizado a una imagen.

CutyCapt es una pequeña utilidad de línea de comandos multiplataforma para capturar la representación de WebKit de una página web en una variedad de formatos de vectores y mapas de bits, incluidos SVG, PDF, PS, PNG, JPEG, TIFF, GIF y BMP. Ver IECapt para una herramienta similar basada en Internet Explorer.

chx
fuente
Probé CutyCapt para exportar a SVG un pequeño formulario HTML que contiene botones de radio. Produjo un archivo SVG que contiene contenido en parte vectorial y en parte mapa de bits.
Randall Whitman
CutyCapt está disponible en los repositorios canónicos en ubuntu 18.04, por lo que sudo apt install cutycaptes todo lo que necesitaba hacer para probarlo. Con un par de segundos de retraso ( --delay=3000), ¡incluso hace mathjax!
Cheshirekow
0

Un enfoque: si toma una captura de pantalla ráster (PNG, JPG, etc.), puede usar "Trazar mapa de bits" en Inkscape para "convertir" los campos de ciertos colores relacionados en la captura de pantalla en objetos vectoriales. Estoy seguro de que hay una herramienta equivalente en Adobe Illustrator. Tenga cuidado con la cantidad de colores separados que especifica para trazar: los archivos vectoriales resultantes pueden volverse complejos rápidamente. Cada color es un objeto vectorial separado que se superpone a los otros objetos de color para representar la imagen ráster original, por lo que probablemente tendrá que limpiar un poco.

Adam Keck
fuente
1
Esto llevará mucho trabajo para que la configuración sea correcta, no creo que esto sea aceptable. Pero nunca se sabe. Adobe Flash también puede hacer esto, y tiene una forma diferente de hacer las cosas, lo que podría tener mejores o peores resultados.
SPRBRN
-1

Esto te puede ayudar. Hay un gran complemento para Firefox, llamado Guardar como PDF, que utiliza las herramientas de https://pdfcrowd.com/ . Para la salida final de SVG, usaría una de las herramientas en línea para convertir a SVG.

Petr S
fuente