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

Question

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

有没有办法对该网页进行矢量截图并将其保存为完全可扩展的 SVG 文件？
（以便我可以在普通 PC 上截取屏幕截图并使其在视网膜上看起来不错）

这应该是可能的，但我找不到任何可以做到的东西。

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

Answer 1

不是屏幕截图，但如果页面打印良好，您可以将其打印为 PDF。Inkscape 和 Illustrator 都会加载 PDF（如果需要，还可以将其另存为 SVG）。

Answer 2

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

Answer 3

我写了一个开源浏览器扩展，就是这样做的。它的工作原理是遍历 DOM 并将元素转换为 SVG 元素，使用浏览器计算的样式和坐标。SVG 层次结构将反映 DOM 层次结构。

SVG 在嵌入浏览器时运行良好，但我也努力使其尽可能导入到 Figma 等设计工具中（这里要注意的是，设计工具通常不支持完整的 SVG 规范）。

• 铬：https : //chrome.google.com/webstore/detail/svg-screenshot/nfakpcpmhhilkdpphcjgnokknpbpdllg
• 火狐：https : //addons.mozilla.org/en-US/firefox/addon/svg-screenshots/
• 来源：https : //github.com/felixfbecker/svg-screenshots
• 底层库：https : //github.com/felixfbecker/dom-to-svg

Answer 4

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