CODEWITHSUNDEEP
pdfsvgwebkitwkhtmltopdfpimcore
Sonnenbrand
Sonnenbrand

Reputation: 46

Some SVGs do not get rendererd in PDF using wkhtmltopdf

we are at the end of our knowledge. We are using a twig template that is generating a html page which is then rendered by wkhtmltopdf as a PDF on an Ubuntu 18.04 machine. The current issue is, that we also moved a lot of old EPS files to SVG by using Inkscape and everything works as expected. The images are shown on the PDFs. Now all our new images are created with AI and saved as well working SVGs like this one:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 411.02 411.02" style="enable-background:new 0 0 411.02 411.02;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#575756;}
    .st1{fill:none;stroke:#575756;stroke-width:2.8347;stroke-linejoin:round;stroke-miterlimit:3.8637;}
    .st2{fill:#A8A8A7;stroke:#FFFFFF;stroke-width:0.5536;stroke-linejoin:round;stroke-miterlimit:22.9256;}
    .st3{fill:none;stroke:#FFFFFF;stroke-width:0.5536;stroke-linejoin:round;stroke-miterlimit:22.9256;}
    .st4{fill:#DADADA;stroke:#FFFFFF;stroke-width:0.5536;stroke-linejoin:round;stroke-miterlimit:22.9256;}
    .st5{fill:#FFFFFF;}
    .st6{display:none;}
    .st7{display:inline;}
    .st8{font-family:'HelveticaNeueLTPro-Roman';}
    .st9{font-size:29.5px;}
    .st10{letter-spacing:2;}
    .st11{letter-spacing:-2;}
</style>
<g id="elements">
    <g>
        <polygon class="st0" points="368.71,103 365.16,111.5 361.62,103 368.71,103 368.71,103       "/>
        <polygon class="st0" points="368.71,78.61 365.16,70.11 361.62,78.61 368.71,78.61 368.71,78.61       "/>
        <line class="st1" x1="365.16" y1="75.86" x2="365.16" y2="106.24"/>
    </g>
    <g>
        <polygon class="st0" points="368.71,324.49 365.16,332.99 361.62,324.49 368.71,324.49 368.71,324.49      "/>
        <polygon class="st0" points="368.71,203.75 365.16,195.25 361.62,203.75 368.71,203.75 368.71,203.75      "/>
        <line class="st1" x1="365.16" y1="200.99" x2="365.16" y2="327.73"/>
    </g>
    <g>
        <polygon class="st0" points="81.42,345.6 72.92,342.06 81.42,338.52 81.42,345.6 81.42,345.6      "/>
        <polygon class="st0" points="349.57,345.6 358.08,342.06 349.57,338.52 349.57,345.6 349.57,345.6         "/>
        <line class="st1" x1="352.33" y1="342.06" x2="78.19" y2="342.06"/>
    </g>
    <g>
        <path class="st2" d="M118.14,334.55l-40.3-3.91l-4.91-5.86v-32.87h4.68v-54.02h-4.68v-32.87l4.91-5.86l40.3-3.91h227.47
            c7.75,0,14.03,6.28,14.03,14.0
...

But those SVGs do not get rendered. There is always a white space and we tried all possible embed/img/iframe/object/... methods. I know there could be several reasons but maybe someone encountered a similiar issue. If anything else is needed as information please let me know.

Thanks!

Upvotes: 1

Views: 1022

Answers (2)

jmaties
jmaties

Reputation: 21

I had the same problem, my solution is :-

Add size internally to SVG.

In your example: width="411.02px" height="411.02px"

Answer use

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="411.02px" height="411.02px" viewBox="0 0 411.02 411.02" style="enable-background:new 0 0 411.02 411.02;" xml:space="preserve">

Upvotes: 2

K J
K J

Reputation: 11940

It may be difficult to see but here is the SVG you posted. I wont repeat the snippet but for others testing, mention the last <g> needs to be changed to </g></svg> and remove unfinished last section.

Showing just the top half of each A4 page (my default)

On the Left is the way it would appear printed from Microsoft Edge. On the right is the WkhtmltoPDF output (wkhtmltox-0.12.6-1.mxe-cross-win64 in Windows 10) from the same page but with some noticeable problems.

You are using Ubuntu 18.04 thus depending on that compiled version may get different results.

![enter image description here

You can see on the left I asked the SVG be placed in the <centre>
But on the right WkhtmltoPDF has offset it further right
However, this may be in part due to the second problem.

The Output on the left was at 1:1 scale, however to get similar proportions in Wkhtmltopdf I had to scale the x:y value 2:1 (which value is actually more units than the notional page width) anyway here is the code for that output.

<!DOCTYPE html><html><head><style>
body {background: transparent; width=794px}
</style></head><body>Hello<center>
<img src="testing.svg" width=822px height=411px />
<br>Figure 1</center><br>World</body></html>

command line wkhtmltopdf.exe --enable-local-file-access local.htm testing.pdf

Upvotes: 0

Related Questions