Apache Batik を使って SVG 画像を PNG/GIF/JPEG に変換する

ベクタ形式の画像を手作りする方法としてはSVGが手っ取り早い。
まずは SVG 画像を用意し foo.svg として保存する。

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="100" cy="100" r="100" fill="red" />
</svg>

次に Batik のラスタライザを使って PNG に変換する(上記画像のサイズ 200×200 を指定)。

C:\batik-1.7>java -jar batik-rasterizer.jar -w 200 -h 200 ..\foo.svg
About to transcode 1 SVG file(s)

Converting foo.svg to ..\foo.png ... ... success

C:\batik-1.7>

これで 200px × 200px の png 画像が出来上がる。
Web用の画像を作成する際は、デバイス・ピクセル比(device-pixel-ratio)を考慮し、実際に表示したいサイズ(px)の3倍の画像を作成して HTML や CSS で縮小するのが吉か。

仕事上の事情などで Inkscape 等が使えない場合、PNG から GIF/JPEG への変換は Windows のペイントで実現できる。透過 GIF を作成したい場合は Excel を使えば可能。
画像のリサイズはペイントで可能。

参考URL
Apache(tm) Batik SVG Toolkit - a Java-based toolkit for applications or applets that want to use images in the Scalable Vector Graphics (SVG)
mieki256's diary - SVG→PNG変換

その他：文字入りのサンプル

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
<linearGradient
   id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
  <stop offset="0%" stop-color="#fb0" />
  <stop offset="50%" stop-color="#fc4" />
  <stop offset="51%" stop-color="#fb0" />
  <stop offset="100%" stop-color="#fd9" />
</linearGradient>
<rect x="0" y="0" width="200" height="80"
      rx="10" ry="10" fill="url(#grad1)" />
<text x="100" y="50" font-family="Meiryo UI" text-anchor="middle"
      font-size="32" fill="white" stroke="black">あいうえお</text>
</svg>