Search code examples
pdfsvgitext

IText, PDF Export: why it changes SVG height?

Here's my basic SVG:

<div style="padding:0px; width:500px; height:100px; background-color:#cdc8c8;">
  <svg width="100%" height="100%" viewBox="0 0 380 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(0.979791,0,0,1.03566,-56.9337,-435.053)">
      <rect x="58.108" y="420.073" width="387.838" height="28.967" style="fill:rgb(103,177,193);" />
    </g>
  </svg>
</div>

which renders as:

enter image description here

Now, if I wrote the same on an html page and I export the PDF with this code:

ConverterProperties converterProperties = new ConverterProperties();
converterProperties.SetBaseUri(AppDomain.CurrentDomain.BaseDirectory + "templates/report/");
using (var newFileStream = new FileStream(reportPathPDF, FileMode.Create))
{
    var pdfWriter = new PdfWriter(newFileStream);
    PdfDocument pdf = new PdfDocument(pdfWriter);
    pdf.SetDefaultPageSize(PageSize.A4);
    var document = HtmlConverter.ConvertToDocument(htmlContent, pdf, converterProperties);
    document.Close();
}

When I open the PDF, here's the result:

enter image description here

Why this? Where am I wrong?

The same happens if I use "flatten" transform:

<svg width="100%" height="100%" viewBox="0 0 380 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <rect x="0" y="0" width="380" height="30" style="fill:rgb(103,177,193);"/>
</svg>
Solution

  • You don't mention witch version you are using so I'm going to explain it as I see it in the latest 8.0.4

    The issue is the width, height attributes in the svg tag.

    If you look at the logging you will see you will get the following warning message

    com.itextpdf.styledxmlparser.css.util.CssDimensionParsingUtils ERROR Unknown absolute metric length parsed "%".

    So it is not yet supported, so to fix it you could do you can use the height and width values from your surrounding div

    Something like this:

    <div style="padding:0px; width:500px; height:100px; background-color:#cdc8c8;">
    <svg  width="500px" height="100px"  viewBox="0 0 380 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
         xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <rect x="0" y="0" width="380" height="30" style="fill:rgb(103,177,193);"/>
</svg>
</div>

    And then when I run it it gives the following result. Which I think is what you expected.

    enter image description here

    It also seems to work with your transform code, the first sample you have given