É possível tirar uma captura de tela de uma página da web como uma imagem SVG?

26

Eu tenho uma página da Web que é inteiramente baseada em vetores (texto, fontes de ícone, SVGs, mas não PNGs, JPEGs ou GIFs).

Existe alguma maneira de tirar uma captura de tela vetorial dessa página e salvá-la como um arquivo SVG totalmente escalável?
(para que eu possa tirar a captura de tela em um PC normal e ter uma boa aparência na retina)

Isso deve ser possível, mas não consigo encontrar nada que possa fazer isso.

Crédito extra: se houver algumas imagens de bitmap, quero um SVG com bitmaps incorporados.

html screenshot svg SLaks
fonte
Parece que html2canvas.hertzen.com pode ajudar aqui.
SLaks
1
é o arquivo .html em questão não é realmente o que você quer?
Sparr
@ Sparr: não; Eu quero manipular o SVG em um editor (por exemplo, cortá-lo, adicionar um banner), em seguida, colocá-lo em um <img>. (para a página de ajuda / passeio de um aplicativo da web)
SLaks
Como os arquivos PNG ou JPEG seriam convertidos em SVG?
HairOfTheDog
4
Esta é uma ideia útil incrível. Especialmente para designers de interface do usuário que precisam trabalhar em evoluções de sites existentes. Eu vou pagar por uma ferramenta que possui exportações SVG porque eu odeio trabalhar em maquetes com softwares bitmaps, isso é um absurdo total.
smonff

Respostas:

6

CSSBox WebVector converterá páginas HTML em SVG. É um aplicativo de linha de comando java e você pode ver uma amostra de sua saída Aqui .

Andrew
fonte
5

Não é bem uma captura de tela, mas se a página for impressa bem, você poderá imprimi-la como um PDF. Tanto o Inkscape quanto o Illustrator irão carregar um PDF (e salvá-lo como SVG, se necessário).

Dan
fonte
0

Uma abordagem: Se você pegar uma captura de tela rasterizada (PNG, JPG, etc.), poderá usar "Trace Bitmap" no Inkscape para "converter" os campos de determinadas cores relacionadas na captura de tela em objetos vetoriais. Tenho certeza de que existe uma ferramenta equivalente no Adobe Illustrator. Tome cuidado com quantas cores separadas você especificar para rastrear - os arquivos vetoriais resultantes podem se tornar complexos rapidamente. Cada cor é um objeto vetorial separado que se sobrepõe aos outros objetos de cor para representar a imagem rasterizada original, portanto, você provavelmente precisará fazer alguma limpeza.

Adam Keck
fonte
Isso exigirá muito trabalho para corrigir as configurações, não acho que isso seja aceitável. Mas você nunca sabe. O Adobe Flash também pode fazer isso e tem uma maneira diferente de fazer as coisas, o que poderia ter resultados melhores ou piores.
SPRBRN
0

Isso já está respondido em Capture uma captura de tela grande da Web no Chrome

eu usaria CutyCapt captura a renderização do webkit para uma imagem.

O CutyCapt é um pequeno utilitário de linha de comando multiplataforma para capturar   Renderização do WebKit de uma página da Web em uma variedade de vetores e bitmap   formatos, incluindo SVG, PDF, PS, PNG, JPEG, TIFF, GIF e BMP. Vejo   IECapt para uma ferramenta semelhante baseada no Internet Explorer.

chx
fonte
-1

Isso pode ajudar você. Há um ótimo complemento para o Firefox, chamado Save as PDF, que usa as ferramentas de https://pdfcrowd.com/ . Para a saída final do SVG, eu usaria uma das ferramentas on-line para converter em SVG.

Petr S
fonte