是否可以将网页截图为 SVG 图像？

Question

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

有没有办法截取该网页的矢量截图并将其保存为完全可缩放的 SVG 文件？
（这样我就可以在普通电脑上截取截图并使其在视网膜上看起来不错）

这应该是可能的，但我找不到任何可以做到这一点的方法。

额外积分：如果它有几个位图图像，我想要一个嵌入位图的 SVG。

Answer 1

我编写了一个开源浏览器扩展程序，它正是为此而生。它的工作原理是遍历 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 2

不是截图，但如果页面打印效果好，您可以将其打印为 PDF。Inkscape 和 Illustrator 都可以加载 PDF（并在需要时将其保存为 SVG）。

Answer 3

CSSBox Web矢量将 HTML 页面转换为 SVG。这是一个 Java 命令行应用程序，您可以查看其输出示例这里。

Answer 4

有一个 FireFox 插件：SVG 截图