How to get rid off annoying border around SVG images in AsciiDoctorPDF

AsciiDoctorPDF inserts an annoying black border around SVG images generated by graphviz. E.g., given this SVG image which was generated by graphviz, if you open it in chrome you can see it has no black border as shown below:

but if the same image is included in an asciidoc document like so:


and then converted to PDF using AsciiDoctorPDF the result looks like this:

Upon investigation the reason for this has to do with this line in the SVG:

<polygon fill="white" stroke="transparent" points="-4,4 -4,-403 220,-403 220,4 -4,4"/>

Chrome and other programs correctly interpret transparent to mean a transparent border but AsciiDoctorPDF – or rather the Prawn library it uses under the covers – does not. The fix for this is simple. I use the asciidoctor/docker-asciidoctor:1.2.0 image. There is a file /usr/lib/ruby/gems/2.7.0/gems/prawn-svg-0.30.0/lib/prawn/svg/color.rb in the container. Open this file in a text editor and just add following line to it:

'transparent' => 'ffffff',

under HTML_COLORS dictionary. Voila! That’s it! Problem solved! You are welcome. This will render transparent stroke as white which works for me as my page background is white. Change it if needed to adapt to colour of your page background.

Ideally graphviz should not be generating any polygons with transparent stroke as transparent is not part of the SVG 1.1 spec, but being the sucker it does. So the root cause of the problem is with GraphViz.

This entry was posted in Software and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s