È possibile fare uno screenshot di una pagina Web come immagine SVG?

31

Ho una pagina web interamente basata su vettori (testo, caratteri icona, SVG, ma non PNG, JPEG o GIF).

Esiste un modo per acquisire uno screenshot vettoriale di quella pagina Web e salvarlo come file SVG completamente scalabile?
(in modo che io possa prendere lo screenshot su un normale PC e farlo apparire bene sulla retina)

Questo dovrebbe essere possibile, ma non riesco a trovare nulla che lo farà.

Credito extra: se ha alcune immagini bitmap, voglio un SVG con bitmap incorporate.

html screenshot svg

— SLaks
fonte

Sembra che html2canvas.hertzen.com possa aiutare qui.

— SLaks

1

il file .html in questione non è effettivamente quello che vuoi?

— Sparr

@Sparr: No; Voglio manipolare l'SVG in un editor (ad esempio, ritagliarlo, aggiungere un banner), quindi inserirlo in un <img>. (per la pagina di aiuto / tour di un'app Web)

— SLaks

In che modo i file PNG o JPEG vengono convertiti in SVG?

— HairOfTheDog

7

Questa è una fantastica idea utile. Soprattutto per i progettisti dell'interfaccia utente che devono lavorare sulle evoluzioni dei siti Web esistenti. Pagherò per uno strumento che presenta le esportazioni SVG perché odio lavorare su modelli con software bitmap, questa è una totale assurdità.

— smonff

10

Non proprio uno screenshot, ma se la pagina viene stampata bene potresti stamparla come PDF. Sia Inkscape che Illustrator caricheranno un PDF (e lo salveranno come SVG se necessario).

— Dan
fonte

Quando l'ho provato, Firefox ha stampato i pulsanti di opzione bitmap nel file PDF. Chromium-browser e wkhtmltopdf hanno prodotto file interamente vettoriali.

— Randall Whitman,

9

CSSBox WebVector convertirà le pagine HTML in SVG. Si tratta di un'applicazione a riga di comando java, e si può vedere un esempio della sua produzione qui .

— Andrea
fonte

Entrambe le modalità da riga di comando e GUI in effetti. Ho provato WebVector per esportare in SVG un piccolo modulo HTML contenente pulsanti di opzione. Ha prodotto un file SVG contenente contenuti interamente vettoriali, come desiderato - nessun contenuto bitmap incorporato. I pulsanti di opzione vengono visualizzati come quadrati, che sembrano caselle di controllo del rendering tipico.

— Randall Whitman,

2

Questa è la risposta già alla schermata Capture grande pagina Web in Chrome

Vorrei usare CutyCapt che cattura il rendering di webkit su un'immagine.

CutyCapt è una piccola utility da riga di comando multipiattaforma per acquisire il rendering WebKit di una pagina Web in una varietà di formati vettoriali e bitmap, tra cui SVG, PDF, PS, PNG, JPEG, TIFF, GIF e BMP. Vedi IECapt per uno strumento simile basato su Internet Explorer.

— CHX
fonte

Ho provato CutyCapt per esportare in SVG un piccolo modulo HTML contenente pulsanti di opzione. Ha prodotto un file SVG contenente contenuto parzialmente vettoriale e parzialmente bitmap.

— Randall Whitman,

CutyCapt è disponibile nei repository canonici su Ubuntu 18.04, quindi sudo apt install cutycaptè tutto ciò che dovevo fare per provarlo. Con un paio di secondi di ritardo ( --delay=3000) rende anche mathjax !!!

— Cheshirekow,

0

Un approccio: se si acquisisce uno screenshot raster (PNG, JPG, ecc.), È quindi possibile utilizzare "Traccia bitmap" in Inkscape per "convertire" i campi di determinati colori correlati nello screenshot in oggetti vettoriali. Sono sicuro che esiste uno strumento equivalente in Adobe Illustrator. Fai attenzione a quanti colori separati specifichi per tracciare: i file vettoriali risultanti possono diventare complessi rapidamente. Ogni colore è un oggetto vettoriale separato che si sovrappone agli altri oggetti colore per rappresentare l'immagine raster originale, quindi probabilmente dovrai fare un po 'di pulizia.

— Adam Keck
fonte

1

Ci vorrà così tanto lavoro per ottenere le impostazioni corrette, non penso che questo sarà accettabile. Ma non lo sai mai. Anche Adobe Flash può fare questo e ha un modo diverso di fare le cose, che potrebbe avere risultati migliori o peggiori.

— SPRBRN,

-1

Questo potrebbe aiutarti. Esiste un ottimo componente aggiuntivo per Firefox, chiamato Save as PDF, che utilizza gli strumenti di https://pdfcrowd.com/ . Per l'output SVG finale utilizzerei quindi uno degli strumenti online per la conversione in SVG.

— Petr S
fonte