我可以将 HTML 页面的一部分导出为 SVG 图像吗？

Can I export part of an HTML page to an SVG image?

提问by Esteis

I need a vector image of a Wikipedia navbox. Unfortunately, Inkscape can't open the HTML file, and neither Opera nor Chromium can save the page as SVG. Googling, googling, and yet more googling turned up nothing; in particular, 'HTML2svg' seems to mean functionality where the HTML 'talks to' an SVG image inside it. Does anybody how to turn HTML into SVG, either the entire page or a div on the page? I need the styled HTML, CSS and all.

我需要维基百科导航框的矢量图像。不幸的是，Inkscape 无法打开 HTML 文件，Opera 和 Chromium 都无法将页面保存为 SVG。谷歌搜索，谷歌搜索，还有更多的谷歌搜索什么也没有发现；特别是，“HTML2svg”似乎意味着 HTML 与其中的 SVG 图像“对话”的功能。有没有人如何将 HTML 转换为 SVG，无论是整个页面还是页面上的 div？我需要样式化的 HTML、CSS 等等。

采纳答案by JeremyFelix

I've come across the same need and found the following free utilities which hold promise that this is possible:

我遇到了同样的需求，并发现以下免费实用程序承诺这是可能的：

1. WebVectoris an HTML to SVG or PNG convertor. It converts a HTML document into a vector image in SVG format or a bitmap image in PNG format. The Standard Vector Graphics (SVG) files can be further edited by a variety of vector graphics editors such as Inkscape.
   http://cssbox.sourceforge.net/webvector/

2. CutyCaptis a small cross-platform command-line utility to capture WebKit's rendering of a web page into a variety of vector and bitmap formats, including SVG, PDF, PS, PNG, JPEG, TIFF, GIF, and BMP. See IECapt for a similar tool based on Internet Explorer.
   http://cutycapt.sourceforge.net/

3. wkhtmltopdfand wkhtmltoimageare open source (LGPL) command line tools to render HTML into PDF and various image formats using the QT Webkit rendering engine. These run entirely "headless" and do not require a display or display service. There is also a C library, if you're into that kind of thing.
   http://wkhtmltopdf.org/

1. WebVector是一个 HTML 到 SVG 或 PNG 的转换器。它将 HTML 文档转换为 SVG 格式的矢量图像或 PNG 格式的位图图像。标准矢量图形 (SVG) 文件可以通过各种矢量图形编辑器（例如 Inkscape）进一步编辑。
   http://cssbox.sourceforge.net/webvector/

2. CutyCapt是一个小型跨平台命令行实用程序，用于将 WebKit 对网页的渲染捕获为各种矢量和位图格式，包括 SVG、PDF、PS、PNG、JPEG、TIFF、GIF 和 BMP。有关基于 Internet Explorer 的类似工具，请参阅 IECapt。
   http://cutycapt.sourceforge.net/

3. wkhtmltopdf和wkhtmltoimage是开源 (LGPL) 命令行工具，可使用 QT Webkit 渲染引擎将 HTML 渲染为 PDF 和各种图像格式。这些完全“无头”运行，不需要显示或显示服务。如果您喜欢那种东西，还有一个 C 库。
   http://wkhtmltopdf.org/

--

——

Unanswered Questions: I know that you can use something like rasterize.jsto render DOM objects into <canvas>, but how are these libraries built such that they are able to export SVG? Specifically, can WebKit itself be used to output "pixel-perfect" editable SVG of web content and HTML snippets? Is this a relatively simple task for a library or is this something significantly more complex?

未回答的问题：我知道您可以使用rasterize.js 之类的东西将 DOM 对象渲染到<canvas>. 具体来说，WebKit 本身是否可以用于输出 Web 内容和 HTML 片段的“像素完美”可编辑 SVG？对于图书馆来说，这是一项相对简单的任务，还是要复杂得多？

回答by Bmize729

I managed to find a website that will do the conversion for you. All you have to do is paste the HTML in between line breaks and it does the rest. The URL is: http://www.hiqpdf.com/demo/ConvertHtmlToSvg.aspx

我设法找到了一个可以为您进行转换的网站。您所要做的就是将 HTML 粘贴到换行符之间，剩下的就交给它了。网址是：http: //www.hiqpdf.com/demo/ConvertHtmlToSvg.aspx

回答by user1566713

You can try wkhtmltoimageIt can convert HTML to SVG and many different formats

你可以试试wkhtmltoimage它可以将 HTML 转换为 SVG 和许多不同的格式

回答by Esteis

Tried xthexder's advice: printing to file. (And then converting PDF to SVG.) I tried Opera, Firefox, and Chromium under Linux; overview below. Real pity about Opera's bugs.

尝试了 xthexder 的建议：打印到文件。（然后将 PDF 转换为 SVG。）我在 Linux 下尝试了 Opera、Firefox 和 Chromium；概述如下。真可惜 Opera 的错误。

I've made this answer community wiki; additions for other OSes welcome.

我已经制作了这个答案社区维基；欢迎添加其他操作系统。

Opera 11.61 (Linux)

歌剧 11.61 (Linux)

• supports printing to SVG(!), PDF, and PS
• uses author style sheet (unless you choose a different style sheet from the View menu, or disable CSS)
• With PDF and PS output, no text is put in the file! This is v. strange and must be a bug.
• If I choose SVG output, Opera produce a .svgfile but writes PostScript code in it. :-(

• 支持打印到 SVG(!)、PDF 和 PS
• 使用作者样式表（除非您从“视图”菜单中选择不同的样式表，或禁用 CSS）
• 使用 PDF 和 PS 输出，文件中没有文本！这很奇怪，一定是一个错误。
• 如果我选择 SVG 输出，Opera 会生成一个.svg文件，但会在其中写入 PostScript 代码。:-(

Firefox 11.0 (Linux)

火狐 11.0 (Linux)

• supports printing to PDF and PS
• ignores author style sheet, prints in black and white
• Uses DejaVu Serif font in a somewhat large size

• 支持打印到 PDF 和 PS
• 忽略作者样式表，以黑白打印
• 使用稍大的 DejaVu Serif 字体

Chromium 17 (Linux)

Chromium 17 (Linux)

• supports printing to PDF only
• ignores author style sheet, prints in black and white
• Uses Times New Roman

• 仅支持打印为 PDF
• 忽略作者样式表，以黑白打印
• 使用 Times New Roman

回答by Andrew Ulrich

As mentioned in the accepted answer, the wkhtmltoimagelibrary is a decent solution, though it isn't always perfect. I was at first a little confused about how to use it, so I'd like to share my current workflow:

正如接受的答案中所述，wkhtmltoimage库是一个不错的解决方案，尽管它并不总是完美的。起初我对如何使用它有点困惑，所以我想分享我目前的工作流程：

1. install wkhtmltopdf and add it to your path env var
2. open your web app and put it in whatever state you want to capture
3. use the SingleFile browser extensionto make a static html snapshot of it
4. run wkhtmltoimage mySnapshot.html mySnapshot.svg
5. open it in Inkscape, ungroup the image and extract the part of the now-vectorized page you're interested in

1. 安装 wkhtmltopdf 并将其添加到您的路径 env var
2. 打开您的网络应用程序并将其置于您想要捕获的任何状态
3. 使用SingleFile 浏览器扩展制作它的静态 html 快照
4. 跑 wkhtmltoimage mySnapshot.html mySnapshot.svg
5. 在 Inkscape 中打开它，取消组合图像并提取您感兴趣的现在矢量化页面的部分

回答by pierre jocelyn andre

You can try http://www.letime.net/alpha/glm.html

你可以试试http://www.letime.net/alpha/glm.html

it do text to HTML5 draws in css3

它在 css3 中将文本转换为 HTML5 绘制