使用嵌入式CSS将SVG转换为Python中的PDF

Question

我正在尝试使用Python从SVG图像生成PDF图像。我已经尝试了CairoSVG和svglib。问题是，在这两种情况下，生成的PDF都没有应用任何嵌入的CSS样式。

这是一个简单的SVG文件，它应该呈现一个带黑色边框的蓝色矩形：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style type="text/css"><![CDATA[
      rect {
        fill: #1f77b4;
        stroke: black;
        stroke-width: 1;
        shape-rendering: crispEdges;
      }
    ]]></style>
  </defs>
  <rect x="50" y="50" width="100" height="100"></rect>
</svg>

使用CairoSVG渲染此SVG的PDF时，PDF图像将呈现为黑色矩形。使用svglib时，没有应用于矩形的笔触或样式，因此它不可见。是否有人知道在Python中将SVG 与CSS样式转换为PDF图像的方法？

Answer 1

（在@MonkeyWrench的帮助下，因为他没有发表答案。）

根据documentation，

  

CairoSVG可以使用lxml来解析SVG文件，并使用tinycss和cssselect来应用不包含在标签的style属性中的CSS。如果这些包不可用，则仅在样式属性中支持CSS。

首先，我安装了所有依赖项

$ pip3 install cairosvg lxml tinycss cssselect

然后我使用以下内容创建了image.svg：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style type="text/css"><![CDATA[
      rect {
        fill: #1f77b4;
        stroke: black;
        stroke-width: 1;
        shape-rendering: crispEdges;
      }
    ]]></style>
  </defs>
  <rect x="50" y="50" width="100" height="100"></rect>
</svg>

最后，我执行了cairosvg

$ cairosvg image.svg -o image.pdf

果然，这是一个蓝色的矩形。

Answer 2

您是否尝试过使用style属性？

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="100" height="100"
  style="fill:#1f77b4;stroke:black;stroke-width:1;shape-rendering: crispEdges;"
  stroke-opacity:0.9"/>
</svg> 

它最终与您已经相同，但也许CairoSVG会跳过HTML中的样式元素。

Answer 3

我建议使用PhantomJS。

基本上它是一个无头的WebKit，由Javascript驱动。

查看rasterize.js脚本。

您可以抓取坐标并将该部分导出（栅格化）为图像。然后，您可以通过嵌入图像基本上使用任何PDF生成器。或者，您可以使用另一个脚本使用PhantomJS生成PDF文件。