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

我可以将HTML页面的一部分导出到SVG图像吗?,html,browser,svg,rendering,Html,Browser,Svg,Rendering,我需要一个维基百科导航框的矢量图像。不幸的是,Inkscape无法打开HTML文件,Opera和Chromium都无法将页面保存为SVG。谷歌搜索,谷歌搜索,甚至更多的谷歌搜索都没有发现任何结果;特别是,“HTML2svg”似乎意味着HTML与其中的SVG图像“对话”的功能。有没有人知道如何将HTML转换成SVG,可以是整个页面,也可以是页面上的一个div?我需要样式化的HTML、CSS和所有内容。尝试了Xthexter的建议:打印到文件。(然后将PDF转换为SVG。) 我在Linux下尝试了O

我需要一个维基百科导航框的矢量图像。不幸的是,Inkscape无法打开HTML文件,Opera和Chromium都无法将页面保存为SVG。谷歌搜索,谷歌搜索,甚至更多的谷歌搜索都没有发现任何结果;特别是,“HTML2svg”似乎意味着HTML与其中的SVG图像“对话”的功能。有没有人知道如何将HTML转换成SVG,可以是整个页面,也可以是页面上的一个div?我需要样式化的HTML、CSS和所有内容。

尝试了Xthexter的建议:打印到文件。(然后将PDF转换为SVG。) 我在Linux下尝试了Opera、Firefox和Chromium;概述如下。真可怜歌剧院的虫子

我在社区维基上给出了这个答案;欢迎添加其他操作系统

Opera 11.61(Linux)
  • 支持打印到SVG(!)、PDF和PS
  • 使用作者样式表(除非从“视图”菜单中选择其他样式表或禁用CSS)
  • 使用PDF和PS输出,文件中不会放入任何文本!这是v。奇怪,一定是个虫子
  • 如果选择SVG输出,Opera将生成一个
    .SVG
    文件,但会在其中写入PostScript代码:-(
Firefox11.0(Linux)
  • 支持打印为PDF和PS
  • 忽略作者样式表,以黑白打印
  • 使用DejaVu衬线字体,字体大小略大
Chromium 17(Linux)
  • 仅支持打印为PDF
  • 忽略作者样式表,以黑白打印
  • 使用新罗马时代

您可以尝试将HTML转换为SVG和许多不同的格式

我设法找到了一个网站,可以为您进行转换。您所要做的就是在换行符之间粘贴HTML,然后它会完成其余的工作。URL是:

我遇到了同样的需求,并找到了以下免费实用程序,它们承诺这是可行的可能的:

  • WebVector是一种HTML到SVG或PNG的转换器。它将HTML文档转换为SVG格式的矢量图像或PNG格式的位图图像。标准矢量图形(SVG)文件可由各种矢量图形编辑器(如Inkscape)进一步编辑。

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

  • wkhtmltopdfwkhtmltoimage是开源(LGPL)命令行工具,可使用QT Webkit渲染引擎将HTML渲染为PDF和各种图像格式。这些工具完全“无头”运行,不需要显示或显示服务。如果您喜欢这类工具,还可以使用C库。

  • --

    未回答的问题:我知道您可以使用类似的方法将DOM对象渲染成
    ,但这些库是如何构建的,以便能够导出SVG的?具体来说,WebKit本身是否可以用于输出“像素完美”web内容和HTML片段的可编辑SVG?对于库来说,这是一项相对简单的任务,还是更复杂的任务?

    您可以尝试


    it do text to HTML5在css3中绘制

    正如公认的答案中提到的,该库是一个不错的解决方案,尽管它并不总是完美的。起初我对如何使用它有点困惑,所以我想分享我当前的工作流程:

  • 安装wkhtmltopdf并将其添加到路径环境变量中
  • 打开您的web应用程序,并将其置于您想要捕获的任何状态
  • 用于创建它的静态html快照
  • 运行
    wkhtmltoimage mySnapshot.html mySnapshot.svg
  • 在Inkscape中打开它,解组图像并提取您感兴趣的现在矢量化的页面部分

  • 我使用的最简单的方法是以PDF格式从Google Chrome打印网站,通常使用最大的页面大小、纵向模式和检查的背景图形。有时它有一些小错误,但它比其他答案中的所有解决方案要好得多。

    您可以使用svg中的foreignObject在svg中定义html元素

    
    Lorem ipsum dolor sit amet,是一位杰出的献身者。
    莫利斯·莫利斯·米乌特·尤里西斯,
    康沃尔之门,帝王之路
    埃拉特·帕特。
    
    问得好,但我怀疑是否存在任何问题。这取决于Webkit或其他引擎是否能够以矢量形式输出。我怀疑它输出的是直光栅,但不确定其内部结构。可能会将页面呈现为pdf,然后再呈现为svg?这将取决于浏览器如何将页面呈现为pdf。有些人实际上会插入文本,有些人会将文本和图像渲染到pdf中。不过值得一试。Opera本身在打印时不会生成SVG输出,但打印机驱动程序(不受Opera控制)可以翻译绘图命令并允许保存为不同的文件格式,例如svg。太完美了!只为我节省了几个小时!并且提高了我所做的工作的质量!非常好,它将文本作为字体和所有内容!我非常高兴我不喜欢这不是一个免费的解决方案:(Boo昂贵的许可证。一人许可证的395美元是难以置信的昂贵。当我接受这个答案时,这肯定不存在。我仍然会接受这个答案,但如果有类似的和更便宜的东西(或libre)来了,我想我会重新更改已接受的答案。那么我们可以更改已接受的答案吗?必须滚动到第三个答案真是太遗憾了:)@Bmize729上帝保佑您欢迎使用Stack Overflow!虽然这可能会回答问题,但请在此处包含答案的基本部分,并提供链接以供参考。嗨,Pierre,非常感谢您的回答。glm似乎是一个将文本转换为HTML的程序,对吗?我的问题是寻找一个