是否可以将网页的屏幕截图作为SVG图像？

31

我有一个完全基于矢量的网页（文本，图标字体，SVG，但没有PNG，JPEG或GIF）。

有什么方法可以获取该网页的矢量屏幕快照并将其另存为可完全缩放的SVG文件？
（以便我可以在普通PC上截取屏幕截图，并使其在视网膜上看起来不错）

这应该是可能的，但我找不到能做到的任何事情。

额外的功劳：如果它有一些位图图像，我想要一个带有嵌入式位图的SVG。

html screenshot svg

— ak
source

看起来html2canvas.hertzen.com可能在这里有所帮助。

— SLaks

1

.html文件不是您真正想要的吗？

— Sparr 2013年

@Sparr：没有；我想在编辑器中操作SVG（例如，裁剪它，添加横幅），然后将其放在中<img>。（用于网络应用程序的帮助/游览页面）

— SLaks

如何将PNG或JPEG文件转换为SVG？

— HairOfTheDog

7

这是一个了不起的有用的想法。特别是对于必须处理现有网站演变的UI设计师。我将为具有SVG导出功能的工具付费，因为我不喜欢使用位图软件制作模型，这完全是胡说。

— smonff 2013年

10

截屏不是很多，但是如果页面打印良好，则可以将其打印为PDF。Inkscape和Illustrator都将加载PDF（并根据需要将其另存为SVG）。

— 担
source

当我尝试此操作时，Firefox将位图单选按钮打印到PDF文件。Chromium浏览器和wkhtmltopdf生成了所有矢量文件。

— 兰德尔·惠特曼

9

CSSBox WebVector会将HTML页面转换为SVG。这是一个Java命令行应用程序，您可以在此处查看其输出示例。

— 安德鲁
source

实际上，命令行和GUI模式都可以。我尝试使用WebVector将包含单选按钮的小型HTML表单导出到SVG。它生成了一个SVG文件，该文件完全包含所需的矢量内容-没有嵌入的位图内容。单选按钮呈现为正方形，看起来像典型呈现的复选框。

— 兰德尔·惠特曼

2

已在Chrome中捕获大型网页屏幕截图中对此进行了回答

我将使用CutyCapt它将webkit的渲染捕获到图像。

CutyCapt是一个小的跨平台命令行实用程序，用于将WebKit的网页呈现捕获为各种矢量和位图格式，包括SVG，PDF，PS，PNG，JPEG，TIFF，GIF和BMP。有关基于Internet Explorer的类似工具，请参见IECapt。

— chx
source

我尝试了CutyCapt将包含单选按钮的小型HTML表单导出到SVG。它生成了一个SVG文件，其中包含部分矢量和部分位图内容。

— 兰德尔·惠特曼

CutyCapt在ubuntu 18.04上的规范存储库中可用，因此sudo apt install cutycapt我需要做的所有尝试。延迟几秒钟（--delay=3000），甚至可以渲染mathjax ！！！

— cheshirekow

0

一种方法：如果您获取光栅屏幕快照（PNG，JPG等），则可以使用Inkscape中的“跟踪位图”将屏幕快照中某些相关颜色的字段“转换”为矢量对象。我确定Adobe Illustrator中有一个等效的工具。请注意指定要跟踪多少种单独的颜色-生成的矢量文件可能会迅速变得复杂。每种颜色都是一个单独的矢量对象，该矢量对象与其他颜色对象重叠以表示原始栅格图像，因此您可能需要进行一些清理。

— 亚当·凯克
source

1

要完成正确的设置，将花费大量的工作，我认为这是不可接受的。但是你永远不知道。Adobe Flash也可以做到这一点，并且具有不同的处理方式，可能会产生更好或更坏的结果。

— SPRBRN

-1

这可能对您有帮助。Firefox有一个很棒的插件，称为另存为PDF，它使用https://pdfcrowd.com/中的工具。对于最终的SVG输出，我将使用一种在线工具转换为SVG。

— 彼得·S
source