Search code examples
csssvgd3.jsnvd3.jsbatik

Inline-Block error when using batik on NVD3 svg

I'm trying to use Batik Rasterizer with an NVD3 chart but it's giving me the following error

java -jar batik-rasterizer.jar samples/discreteBar.svg
Enclosed Exception:
file:/c:/batik-1.7/samples/nv.d3.css:
Invalid CSS document.
The "inline-block" identifier is not a valid value for the "display" property.

I'm using NVD3's default css file. The only modification I made was to add some header properties to the svg file. Stuff like "DOCTYPE" and "xml-stylesheet". Without those, batik didn't even attempt to build.

This is the NVD3 chart i'm trying to rasterize. http://nvd3.org/ghpages/discreteBar.html

This is the svg source (for some reason, its not appearing properly in my chrome browser but it work in IE, FF and safari. ) The SVG Code

This is the half finished png file it manages to generate Generated PNG file

This is the css file NV.D3.css

This is the full exception error Full Exception

Is NVD3 incompatible with Batik, is it a batik build settings issue, is NVD3 using non standard css? Has anyone manage to use Batik on NVD3 charts before? Any suggestions would be appreciated.

Solution

  • inline-block was invented after the SVG 1.1 specification was written.

    It seems that Batik does not support this so you'd have to change the NV.D3.css file to use one of the values from SVG 1.1

    Try swapping inline-block for either inline or block and see if it makes any difference and which one you'd rather have.