cloudformatter format requests: 6,189,049    pages delivered: 14,122,078


xportability LLC



Images in web pages can be linked via absolute or relative references or they can be embedded directly in the web page using a data-uri scheme. All of these methods are supported. In addition, modern browsers make significant use of SVG as a format that can be directly included in the page. This is why we selected XSL FO for back-end processing of the information. XSL FO and specifically XEPOnline supports SVG not by converting the SVG to an image, but by processing SVG to the output, retaining all the vector-based information.

Static SVG

This is a static SVG inserted directly in the HTML page.

Cash Compensation - $105,400,000 Health & Welfare Benefits - $16,700,000 Retirement Benefits - $8,200,000 Government Benefits - $8,000,000

Local and Remote PNG

This is a PNG inserted using "src" attribute of the <img> tag. When formatting, XEPOnline needs to be able to access the image in question so the path of the web page is sent using xml:base to provide XEPOnline with the ability to resolve the path to the image.

Notice: Since XEPOnline is an REST-based remote service, it will not be able to access the images if you are testing on a localhost system. If you choose, you can implement custom javascript that base-64 encodes images and injects them into the <img> tag's "src" attribute and eliminate the need for XEPOnline to reach back to your server for the image assets.

Processing the <img> also requires special handling because HTML5 allows non-closed tags. Since XSL FO is an XML-based processing solution, the XEPOnline javascript handles this by creating valid XML first before submitting.

Take special care if using auto-scaling of images. If you desire an exact size of the image, it should be specified in the HTML or css. The width is carried through to the PDF. The following two images are one locally referenced on the submit website and the same image remotely referenced.


Base-64 Encoded and Embedded

embedded folder icon This image of a folder icon is directly in the web page as base-64 encoded.

Anychart Javascript-based SVG Chart

The following chart is dynamically generated using Anychart JavaScript library. This shows that even page-based dynamic information can be sent to the engine after processing in its full SVG format. There is not pre-processing of this SVG to image format at any time. The full vector information is carried through to the PDF.

d3 Javascript-based SVG Chart

The following chart is dynamically generated using d3 JavaScript library. You can even see that dynamic SVG is printed as it exists at any time. This sample is dynamic, click this paragraph and the pie chart data changes. The print file will represent what is on the screen at that time.