blog.schildbach.de

Schon länger hatte ich vor, die Spielfiguren auf meiner Brettspielseite 3moves.net neu zu gestalten. Zwar gefielen mir die alten Symbole sehr gut, jedoch lagen sie mir nur als viel zu kleine Bitmaps vor und obendrein war mir die Herkunft unbekannt, was irgendwann auf urheberrechtliche Probleme stoßen würde. Meine Wahl fiel auf das bei Wikipedia verwendete Figurenset. Diese gibt es als Vektorgrafiken (.svg) und sind frei verwendbar (GNU Free Documentation License).

Doch zum technischen Teil: Die SVG-Unterstützung der Browser ist immer noch mager. Der Platzhirsch Internet Explorer kann selbst in der neuesten Version 8 (Beta 1) noch gar nichts mit dem Format anfangen. Firefox (Gecko) ist da schon ein großes Stück weiter, und kann SVG entweder direkt in ein XHTML-Dokument einbinden, oder aber in Gestalt des <object/>-Tags als externe Resource nachladen - wie man es vom <img/>-Tag gewohnt ist. Safari und Opera habe ich nicht getestet.

Daher bin ich erstmal den unproblematischen Weg gegangen, und wandle die Vektor-Graphiken server-seitig in Bitmap-Graphiken um. Hierfür bemühe ich Apache Batik, für das es sogar ein Maven2-Plugin gibt:

<plugin>
  <groupId>org.codehaus.mojo</groupId>
  <artifactId>batik-maven-plugin</artifactId>
  <executions>
    <execution>
      <phase>generate-resources</phase>
      <configuration>
        <srcDir>web/chess</srcDir>
        <destDir>${project.build.directory}/images/chess</destDir>
        <width>46</width>
        <height>46</height>
      </configuration>
      <goals>
        <goal>rasterize</goal>
      </goals>
    </execution>
  </executions>
</plugin>

Dieser Auszug aus meinem pom.xml sorgt dafür, daß alle SVG-Schachfiguren in Bitmap-Figuren der Größe 46×46 Pixel umgewandelt werden. Sie landen erstmal in einem speziellen Zielverzeichnis; die folgenden Zeilen sorgen dann dafür, daß dieses Verzeichnis auch der Java-Web-Applikation hinzugefügt wird:

<plugin>
  <groupId>org.apache.maven.plugins</groupId>
  <artifactId>maven-war-plugin</artifactId>
  <configuration>
    <webResources>
      <resource>
        <directory>${project.build.directory}/images</directory>
      </resource>
    </webResources>
  </configuration>
</plugin>

Und das ist dann der Lohn der Mühen:

Sieht doch nicht schlecht aus, oder?

SVG-Dateien sind Textdateien, d.h. man kann zum Beispiel in Quelltextverwaltungen die Änderungen verfolgen. Oder man fügt sie modular zusammen, wie in folgendem Beispiel geschehen:

Man kann Grafiken quasi mathematisch beschreiben, was es mir als Programmierer einfacher macht, damit umzugehen.