Conversione di SVG con CSS incorporato in PDF in Python

Question

Sto provando a generare un'immagine PDF da un'immagine SVG utilizzando Python. Ho provato sia CairoSVG e svglib. Il problema è che in entrambi i casi i PDF generati non hanno nessuno degli stili CSS incorporati applicati.

Ecco un semplice file in formato SVG, che dovrebbe rendere un rettangolo blu con un bordo nero:

<?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> 

Durante il rendering del PDF di questo file SVG usando CairoSVG, l'immagine PDF viene visualizzato come un rettangolo nero. Usando svglib, non vi è alcun tratto o stile applicato al rettangolo, quindi non è visibile. Qualcuno è a conoscenza di un modo per convertire un SVG con stili CSS in un'immagine PDF in Python?

Answer 1

(Con l'aiuto di @MonkeyWrench, dal momento che non inviare una risposta.)

Secondo il documentation,

CairoSVG può utilizzare lxml per analizzare il file in formato SVG, e tinycss più cssselect per applicare CSS non incluso nell'attributo style dei tag. Se questi pacchetti non sono disponibili, i CSS saranno supportati solo negli attributi di stile.

Per iniziare, ho installato tutte le dipendenze,

$ pip3 install cairosvg lxml tinycss cssselect 

Poi ho creato image.svg con il seguente contenuto:

<?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> 

Infine, ho eseguito cairosvg

$ cairosvg image.svg -o image.pdf 

E abbastanza sicuro, era un re blu ctangle.

Answer 2

Hai provato a utilizzare l'attributo di stile?

<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> 

È in definitiva lo stesso di già, ma forse CairoSVG salta gli elementi di stile nel codice HTML.

Answer 3

Suggerirei di utilizzare PhantomJS.

Fondamentalmente si tratta di un WebKit senza testa, guidato da Javascript.

Cerca nello script rasterize.js.

È possibile prendere le coordinate ed esportare (rasterizzare) quella sezione come un'immagine. Quindi è possibile utilizzare praticamente qualsiasi generatore di PDF, incorporando l'immagine. In alternativa, è possibile utilizzare un altro script per generare il file PDF con PhantomJS.