埋め込みCSSを使用したSVGをPythonでPDFに変換

Question

私はPythonを使用してSVG画像からPDF画像を生成しようとしています。私はCairoSVGとsvglibの両方を試しました。問題は、どちらの場合でも、生成されたPDFに埋め込みCSSスタイルが適用されていないことです。

<?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の画像が黒い長方形としてレンダリングされます。

は、ここで黒の境界線と青い四角形を描画する必要があり、単純なSVGファイルです。 svglibを使用すると、矩形に適用されるストロークやスタイルがないので、表示されません。誰でも、CSSスタイルを持つSVG をPythonのPDF画像に変換する方法を知っていますか？

Answer 1

documentationによると、

CairoSVGは、SVGファイルを解析するためにlxmlのを使用し、tinycssプラスcssselectすることができますタグのスタイル属性に含まれていないCSSを適用します。これらのパッケージが利用できない場合、CSSはスタイル属性でのみサポートされます。

を始めるために、私はその後、私は、次の内容でimage.svgを作成し

$ pip3 install cairosvg lxml tinycss cssselect 

、すべての依存関係をインストール：

<?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 image.svg -o image.pdf 

cairosvg

を実行

そして確かに、それは青い再ctangle。

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を使用することをおすすめします。

基本的には、Javascriptで駆動されるヘッドレスWebKitです。

rasterize.jsスクリプトを参照してください。

座標を取得し、そのセクションを画像としてエクスポート（ラスタライズ）することができます。次に、画像を埋め込むことによって、基本的に任意のPDFジェネレータを使用することができます。また、別のスクリプトを使用してPhantomJSでPDFファイルを生成することもできます。 （@MonkeyWrenchからの助けを借りて、彼は答えを投稿していないからです。）