General
- Example

General

Because HtmlUnit is a headless browser, you might think HtmlUnit can be agnostic to image formats. This is generally true, but not when inspecting layout-related details. Even though HtmlUnit is headless, there is still support for layout-related methods like Element.getBoundingClientRect(). A second case is Canvas.drawImage(). To support these, HtmlUnit must determine the dimensions of a given image (for layout calculations) and render a rasterized version (for canvas operations).

For image processing, HtmlUnit uses Java's ImageIO. Out of the box, standard ImageIO only supports JPEG, PNG, BMP, WBMP, and GIF.

When HtmlUnit encounters an unsupported image format, a warning is recorded in the log and the image is generally ignored.

To overcome this limitation, you can install additional format plugins, such as those provided by TwelveMonkeys.

Example

To enable SVG support for drawing SVG images onto HTML5 canvases, add the required dependencies to your project's pom.xml file:

<dependency>
            <groupId>com.twelvemonkeys.imageio</groupId>
            <artifactId>imageio-batik</artifactId>
            <version>3.14.0</version>
        </dependency>
        <dependency>
            <groupId>org.apache.xmlgraphics</groupId>
            <artifactId>batik-transcoder</artifactId>
            <version>1.19</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 verify that image decoding works as expected, run this snippet to confirm a valid BufferedImage is created:

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);