Kendo pdf export issue - PNG export doesn't have SVG background image and doesn't respect font face

[Kamil]

Hi

I have simple page

<kendo-pdf-export #svgPrint>

<svg width="600" height="450" style="background-color: white">>

<defs>

<pattern id="colorBack" x="0" y="0" width="600" height="400" viewBox="0 0 600 400"

preserveAspectRatio="xMidYMax slice" patternUnits="userSpaceOnUse">

<image xlink:href="assets/anthrazit.png"></image>

</pattern>

</defs>

<rect class="profile" x="0" y="0" width="600" height="400" fill="url(#colorBack)" stroke="#555E5E"></rect>

<text fill="gray" class="dimensions-text" x="0" y="420" text-anchor="start"> 5890 </text>

</svg>

</kendo-pdf-export>

 

I see in a browser this:

But in exported PNG file, there is no background and there is default font instead of specified in css:

 

i created also a div with paragraph and it works fine.

<kendo-pdf-export #divPrint style="background-color: white; width: 600px; height: 450px;">

<div style="width: 600px; height: 400px; background-image: url('assets/anthrazit.png');">

&nbsp;

</div>

<p class="dimensions-text"> 5890 </p>

</kendo-pdf-export>

 

I attached example app with issue reproduction.

--

Best regards

Kamil Paszkiewicz

[Yanmario]

Hi Kamil,

Thank you for the provided example and context. That helps us to understand the issue at hand and provide a more precise response in return.

There are some limits to the PDF Export component using external images inside the svg element. In this specific use case, the developer might need to convert the image to base64 data URI and load it inside the svg element. I've managed to convert the image and will share the same example as the base64 string is quite big. 

I hope the provided information was helpful to resolve the issue.

Regards,
Yanmario
Progress Telerik

[Kamil]

Thank you for your answer. 

Background loaded as BASE64 works fine and it is quite good solution in my project.

But what about font in <text> tag?

 

--

Best regards

Kamil Paszkiewicz

[Yanmario]

Hi Kamil,

I'm glad to hear that the BASE64 solution proved to be useful. When it comes to styling related to SVG image exporting, it can be a bit challenging. To ensure proper styling, it is necessary to include a style element that specifies the font to be used within the SVG. This will help maintain consistent and accurate rendering of the SVG image.

Here is an updated version that works on my side with the shared example:

<kendo-pdf-export #svgPrint [imageResolution]="150">
  <svg width="620" height="460" style="background-color: white">>
    <style>
        .foo {
          font: italic 15px Dimensions;
        }
      </style>
    <defs>
      <pattern id="colorBack" x="0" y="0" width="600" height="400" viewBox="0 0 600 400"
        preserveAspectRatio="xMidYMax slice" patternUnits="userSpaceOnUse">
        
      </pattern>
    </defs>
    <rect class="profile" x="10" y="10" width="600" height="400" fill="url(#colorBack)" stroke="#555E5E"></rect>
    <text fill="gray" class="foo" x="10" y="440" text-anchor="start"> 5890 </text>
  </svg>
  
</kendo-pdf-export>

Regards,
Yanmario
Progress Telerik     

[Kamil]

Thank you very much, works great :-)

BR

Kamil