Converting SVG with styles to PDF

Question

Having difficulty preserving style when converting an SVG to PDF. I am using cssToPdf from cloudFormatter.com.

But I need to use the style mix-blend-mode: multiply; but it is not preserved when I create the pdf.

I have tried using the style inline on the svg elements, also by putting style into the HTML head and by using an external style.css file. But in each case I do not get the 'mutliply effect'.

How do I get the pdf generation to recognise the SVG element's style?

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>csstopdf</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!-- <style>
      circle {
        mix-blend-mode: multiply;
      }
    </style> -->
  </head>
  <body>
    <div>
      <svg id="svgCircles" version="1.1" xmlns="http://www.w3.org/2000/svg" width="300" height="300" x="0" y="0" viewBox="0 0 150 150">
        <!-- <circle cx="50" cy="50" r="40" stroke-width="4" fill="green" style="mix-blend-mode: multiply;"/>
        <circle cx="75" cy="75" r="40" stroke-width="4" fill="red" style="mix-blend-mode: multiply;"/>
        <circle cx="100" cy="50" r="40" stroke-width="4" fill="blue" style="mix-blend-mode: multiply;"/> -->
        <circle cx="50" cy="50" r="40" stroke-width="4" fill="green" />
        <circle cx="75" cy="75" r="40" stroke-width="4" fill="red" />
        <circle cx="100" cy="50" r="40" stroke-width="4" fill="blue" />
      </svg>
    </div>
    <div class="btn-group" onclick="xepOnline.Formatter.Format('svgCircles');" role="group" aria-label="...">
      <button type="button" class="btn btn-warning">Generate svgCircles!</button>
    </div>
     <script src="xepOnline.jqPlugin.js"></script>
  </body>
</html>

The xepOnline.jqPlugin.js file is too large to include here. But it can be found at http://www.cloudformatter.com/Resources/Pages/CSS2Pdf/Script/xepOnline.jqPlugin.js or downloaded from cloudformatter.com

The style.css file,

circle {
  mix-blend-mode: multiply;
}

There is a working example of this on gh-pages

The repo is at https://github.com/shanegibney/csstopdf

Any help with this would be greatly appreciated,

Thanks,

SVG in PDF is useful. Results are good if you do it right, but I am admittedly unfamiliar with the conversion software you mention. If what I use interests you, I use [Cairo](https://www.cairographics.org/) for this. — thb, Feb 09 '19 at 21:58
Seems Cairo generates pdf primitives but does not convert svg elements to pdf or eps. — Shane G, Feb 09 '19 at 22:11
Cairo is not a javascript library but a C library and can not be used in the front end? — Shane G, Feb 09 '19 at 22:54
The @cloudformatter css2pdf application is based on top of RenderX's XEP engine. Their support for conversion of SVG is detailed here: http://www.renderx.com/reference.html#SVG. If what you desire is not in that list then it will not be supported. — Kevin Brown, Feb 10 '19 at 04:47

Kevin Brown · Accepted Answer · 2019-02-10T04:56:05.053

2

I will add this as an answer because I am one of the authors of this application.

The @cloudformatter css2pdf application is based on top of RenderX's XEP engine. Their support for conversion of SVG is detailed here:

RenderX's SVG Support

If what you desire is not in that list then it is not currently supported.

Essentially, @cloudformatter takes your HTML+CSS with included SVGs if any and sends to a remote server. That server does some cleanup and converts the content to XSL FO for a formatting engine. The formatting engine used is RenderX XEP. So it is doing all the formatting from content to output (PDF, Postscript, AFP, XPS, other). What that underlying engine supports is what is supported.

In your case, it looks like mix-blend-mode is not supported.

edited Feb 10 '19 at 04:56

answered Feb 10 '19 at 04:50

Kevin Brown

8,805
2
20
38

thanks for your answer and I am delighted to receive an answer from one of the authors. It is an excellent application but unfortunately it does not currently seem to do what I need. Thank you very much – Shane G Feb 10 '19 at 18:51
What would it take to add mix blend mode capabilities to the library? Would it be hugely difficult? I mean for myself to do. Is there a huge ab=mount to learn to figure out this application. Most of the code is on the server right? – Shane G Feb 10 '19 at 19:00

Converting SVG with styles to PDF

1 Answers1