Wiki

Clone wiki

svg-out / Using PhantomJS instead of the embedded Batik transcoder

Background

In case you export a page containing SVGs those have to be converted to PNGs prior to export as Confluence's PDF and Word generator are not able to deal with SVGs.

Therefore the plugin contains an embedded SVG to PNG converted based on the Apache Batik library. It perfectly handles "standard SVGs" but as soon as it gets more complex it will fail to render properly (e.g. embedded foreignObjects). To improve the output quality SVG Out 2.5.0 onwards allows the usage of an external (not embedded) PhantomJS based conversion script as a replacement for Batik.

You have the following options:

  • Stay with the embedded Batik library
  • Use the existing cloud based conversion script
  • Install PhantomJS and the conversion script on your own server

Use the existing cloud based conversion script

For our cloud users we have an existing conversion script running on Heroku. You may use it in case you answer all of the below questions with yes:

  • You don't have pages containing multiple big SVGs you want to export.
  • You don't use PDF and Word export frequently.
  • Your Confluence instance has access to the Internet.
  • Export speed does not matter.

In case all of the above is true you may enter the following in the SVG Out configuration field "Link to PhantomJS conversion server":

https://svg-out-phantom.herokuapp.com

‼ We do not guarantee any service level for the above service. It might also be discontinued without prior notice.

Install PhantomJS and the conversion script on your own server

Foreword

In order to perform the below steps you need to have access to your Confluence server. PhantomJS and the script you are going to install start a small web server on your server which accepts an incoming POST request containing the SVG and returns the PNG in base64 format. This server is called by the SVG Out plugin.

Download necessary files

Download the following things:

Arrange files

Perform the following steps:

  • Create a folder anywhere you like
  • Extract the PhantomJS executable (on Windows phantomjs.exe) from the zip file and place it the folder
  • Move the jquery-xxx.min.js in the folder
  • Remove the jquery version from the file name so that you just get jquery.min.js
  • Copy the conversion script into the folder

In the end your folder should look similar to:

phantomjs.exe
jquery.min.js
svg-out-phantom-direct.js

Start PhantomJS

Now it is time to start PhantomJS with out script the first time. Navigate to the folder and execute the following command in case you run on a Windows server:

phantomjs.exe svg-out-phantom-direct.js server_port

Replace server_port by the port you want the server listen to (default 8095).

Configure SVG Out and try

Navigate to your SVG Out configuration screen and enter your server address in the text field "Link to PhantomJS conversion server". Example:

http://localhost:8095

Now try whether e.g. PDF export works as expected.

Let PhantomJS run as service

❗ We do not support issues related to starting PhantomJS as service.

Starting PhantomJS from the command line is probably not want you would like to do in a production environment. You may let PhantomJS run as service. The steps necessary depend on you operating system:

  • Windows: we used this guidance to set-up our conversion service on Windows
  • Linux: you will find multiple guidance documents when asking e.g. google on how to install PhantomJS as service on your Linux distribution

Updated