General

Because HtmlUnit is a headless browsers you might think HtmlUnit can be agnostic to image formats. This is in general true but not if you look at the details. Even if HtmlUnit is headless there is still support for layout related methods like Element.getBoundingClientRect(). A second case is Canvas.drawImage(). To support this HtmlUnit has to be able to determine the dimensions of a given image (for the first case) and produce a raster version (for the second case).

For this HtmlUnit uses ImageIO. Sadly there is only support for JPEG, PNG, BMP, WBMP and GIF.

If HtmlUnit has to deal with the details of an unsupported image format a message is shown in the log and the image is (more or less) ignored.

To overcome this limitation you have to install support for more file formats from TwelveMonkeys

Example

Add svg support to be able to include SVG images into your canvas drawings

This is simply done by adding some dependencies to your project:

        <dependency>
            <groupId>com.twelvemonkeys.imageio</groupId>
            <artifactId>imageio-batik</artifactId>
            <version>3.6.4</version>
        </dependency>
        <dependency>
            <groupId>org.apache.xmlgraphics</groupId>
            <artifactId>batik-transcoder</artifactId>
            <version>1.17</version>
            <exclusions>
                <exclusion>
                    <groupId>commons-logging</groupId>
                    <artifactId>commons-logging</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>commons-io</groupId>
                    <artifactId>commons-io</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

To make sure everything is working you can execute this code and check if you get a BufferedImage.

        final String svg =  "<svg xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns=\"http://www.w3.org/2000/svg\">"
                           + "<circle cx=\"5\" cy=\"5\" r=\"4\" stroke=\"black\" stroke-width=\"1\" fill=\"red\" />"
                           + "</svg>";
        BufferedImage img = ImageIO.read(new ByteArrayInputStream(svg.getBytes(StandardCharsets.US_ASCII)));
        System.out.println(img);