我需要一个维基百科导航框的矢量图像。不幸的是，Inkscape 无法打开 HTML 文件，而且 Opera 和 Chromium 都无法将页面保存为 SVG。谷歌搜索，谷歌搜索，还有更多的谷歌搜索没有结果。特别是，“HTML2svg”似乎意味着 HTML 与其中的 SVG 图像“对话”的功能。有人如何将 HTML 转换为 SVG，无论是整个页面还是页面上的 div？我需要样式化的 HTML、CSS 等等。
问问题
75221 次
8 回答
47
我遇到了同样的需求，并发现了以下免费实用程序，它们承诺这是可能的：
WebVector是一个 HTML 到 SVG 或 PNG 的转换器。它将 HTML 文档转换为 SVG 格式的矢量图像或 PNG 格式的位图图像。标准矢量图形 (SVG) 文件可以通过 Inkscape 等各种矢量图形编辑器进行进一步编辑。
http://cssbox.sourceforge.net/webvector/CutyCapt是一个小型的跨平台命令行实用程序，用于将 WebKit 的网页渲染捕获为各种矢量和位图格式，包括 SVG、PDF、PS、PNG、JPEG、TIFF、GIF 和 BMP。有关基于 Internet Explorer 的类似工具，请参见 IECapt。
http://cutycapt.sourceforge.net/wkhtmltopdf和wkhtmltoimage是开源 (LGPL) 命令行工具，可使用 QT Webkit 渲染引擎将 HTML 渲染为 PDF 和各种图像格式。这些完全“无头”运行，不需要显示或显示服务。如果您喜欢这种东西，还有一个 C 库。
http://wkhtmltopdf.org/
--
未回答的问题：我知道您可以使用rasterize.js之类的东西将 DOM 对象渲染为<canvas>. 具体来说，WebKit 本身能否用于输出 Web 内容和 HTML 片段的“像素完美”可编辑 SVG？对于图书馆来说，这是一项相对简单的任务还是要复杂得多？
于 2014-11-17T00:20:04.210 回答
44
我设法找到一个可以为您进行转换的网站。您所要做的就是将 HTML 粘贴到换行符之间，然后它会完成其余的工作。网址是：http ://www.hiqpdf.com/demo/ConvertHtmlToSvg.aspx
于 2013-07-30T02:44:34.937 回答
11
你可以试试wkhtmltoimage它可以将 HTML 转换为 SVG 和许多不同的格式
于 2013-07-28T16:46:47.557 回答
4
尝试了 xthexder 的建议：打印到文件。（然后将 PDF 转换为 SVG。）我在 Linux 下尝试了 Opera、Firefox 和 Chromium；概述如下。真的很遗憾 Opera 的错误。
我已经制作了这个答案社区维基；欢迎添加其他操作系统。
歌剧 11.61 (Linux)
- 支持打印到 SVG(!)、PDF 和 PS
- 使用作者样式表（除非您从“视图”菜单中选择不同的样式表，或禁用 CSS）
- 使用 PDF 和 PS 输出，文件中没有文字！这很奇怪，一定是一个错误。
- 如果我选择 SVG 输出，Opera 会生成一个
.svg文件，但会在其中写入 PostScript 代码。:-(
火狐 11.0 (Linux)
- 支持打印到PDF和PS
- 忽略作者样式表，以黑白打印
- 使用较大尺寸的 DejaVu Serif 字体
铬 17 (Linux)
- 仅支持打印到 PDF
- 忽略作者样式表，以黑白打印
- 使用 Times New Roman
于 2012-08-20T09:14:29.787 回答
2
正如接受的答案中提到的，wkhtmltoimage库是一个不错的解决方案，尽管它并不总是完美的。起初我对如何使用它有点困惑，所以我想分享我目前的工作流程：
- 安装 wkhtmltopdf 并将其添加到您的路径 env var
- 打开您的网络应用程序并将其置于您想要捕获的任何状态
- 使用SingleFile 浏览器扩展对其进行静态 html 快照
- 跑
wkhtmltoimage mySnapshot.html mySnapshot.svg - 在 Inkscape 中打开它，取消组合图像并提取您感兴趣的现在矢量化页面的部分
于 2020-03-25T04:20:00.563 回答
1
我使用的最简单的方法是从 Google Chrome 以 PDF 格式打印网站，通常使用最大的页面大小、纵向模式和选中的背景图形。有时它有一些小错误，但它比其他答案中的所有解决方案都要好得多。
于 2020-11-11T08:51:31.830 回答
1
您可以在 svg 中使用 foreignObject 在 svg 中定义 html 元素。
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<foreignObject x="20" y="20" width="160" height="160">
<div xmlns="http://www.w3.org/1999/xhtml">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed mollis mollis mi ut ultricies. Nullam magna ipsum,
porta vel dui convallis, rutrum imperdiet eros. Aliquam
erat volutpat.
</div>
</foreignObject>
</svg>如果你想将你的 html 元素转换为 svg 元素，比如 rect、text、image，你可以使用 htmlsvg.js 来做到这一点。
于 2021-03-23T21:12:04.343 回答
-5
你可以试试http://www.letime.net/alpha/glm.html
它在 css3 中对 HTML5 进行文本绘制
于 2015-09-27T15:56:14.747 回答