Pages

Tuesday, September 23, 2014

Rasterizing scalable images during build


In most web projects your content does not only include code, html or css but also images. Those images are typically delivered as non-scalable graphics to the clients (i.e. jpg, png, gif). But ususally those images are created from a scalable image that allows to "design" the actual image and produce versions of various sizes from the scalable image. The process of transforming a scalable graphic to a non-scalable graphic is called rasterization and fortunately the process can be automated when you're running your build with Maven.

The Batik Maven plugin allows you to convert your svg (Scalable Vector Graphics) images to non-scalable images, supported types are png, jpeg, tiff or pdf. The plugin can be added to your build lifecycle. The plugin documentation states that adding the following snippet to your pom.xml

<plugin>
  <groupId>org.codehaus.mojo</groupId>
  <artifactId>batik-maven-plugin</artifactId>
  <version>1.0-beta-1</version>
  <executions>
    <execution>
      <goals>
        <goal>rasterize</goal>
      </goals>
    </execution>
  </executions>
</plugin>
Unfortunately that's not sufficient as not all dependencies seem to be satisfied. But the following snippet worked for me (see also https://jira.codehaus.org/browse/MOJO-1670 )

<build>
  <plugins>
    <plugin>
      <groupId>org.codehaus.mojo</groupId>
      <artifactId>batik-maven-plugin</artifactId>
      <version>1.0-beta-1</version>
      <executions>
        <execution>
          <goals>
            <goal>rasterize</goal>
          </goals>
        </execution>
      </executions>
      <dependencies>
        <dependency>
          <groupId>batik</groupId>
          <artifactId>batik-rasterizer</artifactId>
          <version>1.6</version>
        </dependency>
        <dependency>
          <groupId>org.axsl.org.w3c.dom.svg</groupId>
          <artifactId>svg-dom-java</artifactId>
          <version>1.1</version>
        </dependency>
        <dependency>
          <groupId>org.w3c.css</groupId>
          <artifactId>sac</artifactId>
          <version>1.3</version>
        </dependency>
      </dependencies>
      </plugin>
    </plugins>
</build>

With that snippet I could place my svg files into /src/main/svg and during the build those files are rasterized to png files in the /target/generated-resources/images (locations and type are default settings and can be configured). From now on it's quite easy to "compile" your images during the build and you never have to paint your images by pixel anymore.

If you're looking for a free and powerful SVG "editor", try Inkscape.