SVG入門

１．はじめに

フリー地図OSMにおいても、アイコンファイルは png から svg に徐々にシフトしている。 また、アイコンやパターンはより見栄えがいいものに変化している。

市民農園(landuse=allotments)もそのひとつである。 新しい allotments.png を使おうとしたが、色が違うなど、 自作地図システムにはそのままでは使用できないことが分かった。

そこで SVGファイルを自作することにした。

２．SVGファイルの作成

新しい市民農園のレンダリングは緑色の網目パターンである。 下に示す、サイズ 8 x 8 画素の井形(＃)の svgファイルを作成した。

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
  <line x1="2" y1="0" x2="2" y2="8" stroke="#cdebb0" width="2" />
  <line x1="0" y1="2" x2="8" y2="2" stroke="#cdebb0" width="2" />
  <line x1="6" y1="0" x2="6" y2="8" stroke="#cdebb0" width="2" />
  <line x1="0" y1="6" x2="8" y2="6" stroke="#cdebb0" width="2" />
</svg>

PolygonPatternSymbolizerにこのファイルを直接渡した場合、描画されなかった。 現在使っている Mapnik 2.2 が svg ファイルをサポートしていないか、何か別の問題かも知れない。

今回は文献[2]のサイトで allotments.svg を allotments.png に変換した。 下の画像はそれを縦横２倍に拡大したものである。

これで svg について、最低限のことは理解できた。

一般の建物と区別するため、グリーンハウスは灰色の網目にしよう。 上記と同様に文献[2]のサイトで greenhouse.svg を greenhouse.png に変換した。 buildingsレイヤを修正し、所望の結果が得られることを確認した。

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
  <line x1="2" y1="0" x2="2" y2="8" stroke="#e0d6d0" width="2" />
  <line x1="0" y1="2" x2="8" y2="2" stroke="#e0d6d0" width="2" />
  <line x1="6" y1="0" x2="6" y2="8" stroke="#e0d6d0" width="2" />
  <line x1="0" y1="6" x2="8" y2="6" stroke="#e0d6d0" width="2" />
</svg>

次に、ハッチに取り組む。１本の斜線でよい。 地図システムではガソリンスタンドの屋根の描画に使う。 これまで、建物より薄い色で描画してきたが、区別がつきにくいので、 こちらに変更する。地図システムではこの 6x6画素の画像をつなぎ合わせて、 任意の広さのエリアをハッチングする。

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6">
  <line x1="0" y1="0" x2="6" y2="6" stroke="#e0d6d0" width="2" />
</svg>

円の塗りつぶしの例を下に示す。

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="5" height="5">
  <circle cx="2.5" cy="2.5" r="2.5" fill="#888888" />
</svg>

同じようにしてジャングルジムのアイコンを作った。

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="10" viewBox="0 0 32 20">
  <line x1="13" y1="1"  x2="19" y2="1"  stroke="#0c8416" width="2" />
  <line x1="7"  y1="7"  x2="25" y2="7"  stroke="#0c8416" width="2" />
  <line x1="7"  y1="13" x2="25" y2="13" stroke="#0c8416" width="2" />
  <line x1="1"  y1="19" x2="31" y2="19" stroke="#0c8416" width="2" />
  <line x1="7"  y1="7"  x2="7"  y2="19" stroke="#0c8416" width="2" />
  <line x1="13" y1="1"  x2="13" y2="19" stroke="#0c8416" width="2" />
  <line x1="19" y1="1"  x2="19" y2="19" stroke="#0c8416" width="2" />
  <line x1="25" y1="7"  x2="25" y2="19" stroke="#0c8416" width="2" />
</svg>

natural=cliff用アイコン

標準OSM用アイコンは自作地図アプリMap４では使いずらいため、アイコンを自作することにした。

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="5" height="10" viewBox="0 0 60 132">
  <polygon points="1 66, 59 66, 30 131" fill="#999" />
</svg>

３．ブラウザで表示する

SVGは直接、htmlに記述できる[1]。

<svg width=200 height=120 
  viewBox="0 0 100 60"
  style="background-color: #ddd">
  <polygon points="50 10, 70 30, 50 50, 30 30" fill="#99f" />
</svg>

４．svgファイルをpngファイルに変換する

Ａ．リファレンス