SVGのrectで日本地図を描く

SVGのrectで簡単な日本地図を描いてみました。
各都道府県のrectのfillを変えれば色を変えることができます。

参考：
[SVG 1.1 仕様 （第２版） 日本語訳](https://triple-underscore.github.io/SVG11/index.html)
[Craft MAP](http://www.craftmap.box-i.net/) (イラスト地図を参考にしました)

![svg_japan.png](https://qiita-image-store.s3.amazonaws.com/0/75498/a2df5cda-8d3d-61ad-9d3e-04fed741c79a.png)

```html
<html>
<head>
  <meta charset="utf-8">
  <title>SVG map</title>
  <style type="text/css">
  #japan-map {
    width: 100%;
    max-width: 640px;
    border: 1px solid #ccc;
  }
  rect {
    fill: #ECF4D9;
    stroke: #999;
    stroke-width: 1;
  }
  </style>
</head>
<body>
<div id="japan-map">
<svg viewBox="0 0 610 550" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect id="pref01" width="150" height="110" x="450" y="10" />
  <text x="525" y="65" text-anchor="middle" dominant-baseline="central">北海道</text>
  <rect id="pref02" width="128" height="40" x="450" y="130" />
  <text x="514" y="150" text-anchor="middle" dominant-baseline="central">青森</text>
  <rect id="pref03" width="64" height="40" x="514" y="170" />
  <text x="546" y="190" text-anchor="middle" dominant-baseline="central">岩手</text>
  <rect id="pref04" width="64" height="40" x="514" y="210" />
  <text x="546" y="230" text-anchor="middle" dominant-baseline="central">宮城</text>
  <rect id="pref05" width="64" height="40" x="450" y="170" />
  <text x="483" y="190" text-anchor="middle" dominant-baseline="central">秋田</text>
  <rect id="pref06" width="64" height="40" x="450" y="210" />
  <text x="483" y="230" text-anchor="middle" dominant-baseline="central">山形</text>
  <rect id="pref07" width="128" height="40" x="450" y="250" />
  <text x="514" y="270" text-anchor="middle" dominant-baseline="central">福島</text>
  <rect id="pref08" width="36" height="80" x="542" y="290" />
  <text x="560" y="330" text-anchor="middle" dominant-baseline="central" writing-mode="tb">茨城</text>
  <rect id="pref09" width="56" height="40" x="486" y="290" />
  <text x="514" y="310" text-anchor="middle" dominant-baseline="central">栃木</text>
  <rect id="pref10" width="36" height="80" x="450" y="290" />
  <text x="468" y="330" text-anchor="middle" dominant-baseline="central" writing-mode="tb">群馬</text>
  <rect id="pref11" width="56" height="40" x="486" y="330" />
  <text x="514" y="350" text-anchor="middle" dominant-baseline="central">埼玉</text>
  <rect id="pref12" width="36" height="70" x="542" y="370" />
  <text x="560" y="405" text-anchor="middle" dominant-baseline="central" writing-mode="tb">千葉</text>
  <rect id="pref13" width="56" height="40" x="486" y="370" />
  <text x="514" y="390" text-anchor="middle" dominant-baseline="central">東京</text>
  <rect id="pref14" width="36" height="70" x="450" y="370" />
  <text x="468" y="405" text-anchor="middle" dominant-baseline="central" writing-mode="tb">神奈川</text>
  <rect id="pref15" width="30" height="70" x="420" y="250" />
  <text x="435" y="285" text-anchor="middle" dominant-baseline="central" writing-mode="tb">新潟</text>
  <rect id="pref16" width="30" height="70" x="390" y="250" />
  <text x="405" y="285" text-anchor="middle" dominant-baseline="central" writing-mode="tb">富山</text>
  <rect id="pref17" width="30" height="70" x="360" y="250" />
  <text x="375" y="285" text-anchor="middle" dominant-baseline="central" writing-mode="tb">石川</text>
  <rect id="pref18" width="30" height="70" x="330" y="250" />
  <text x="345" y="285" text-anchor="middle" dominant-baseline="central" writing-mode="tb">福井</text>
  <rect id="pref19" width="40" height="60" x="410" y="320" />
  <text x="430" y="350" text-anchor="middle" dominant-baseline="central" writing-mode="tb">山梨</text>
  <rect id="pref20" width="40" height="60" x="370" y="320" />
  <text x="390" y="350" text-anchor="middle" dominant-baseline="central" writing-mode="tb">長野</text>
  <rect id="pref21" width="40" height="60" x="330" y="320" />
  <text x="350" y="350" text-anchor="middle" dominant-baseline="central" writing-mode="tb">岐阜</text>
  <rect id="pref22" width="40" height="60" x="410" y="380" />
  <text x="430" y="410" text-anchor="middle" dominant-baseline="central" writing-mode="tb">静岡</text>
  <rect id="pref23" width="40" height="60" x="370" y="380" />
  <text x="390" y="410" text-anchor="middle" dominant-baseline="central" writing-mode="tb">愛知</text>
  <rect id="pref24" width="40" height="60" x="330" y="380" />
  <text x="350" y="410" text-anchor="middle" dominant-baseline="central" writing-mode="tb">三重</text>
  <rect id="pref25" width="40" height="50" x="290" y="300" />
  <text x="310" y="325" text-anchor="middle" dominant-baseline="central" writing-mode="tb">滋賀</text>
  <rect id="pref26" width="40" height="50" x="290" y="250" />
  <text x="310" y="275" text-anchor="middle" dominant-baseline="central" writing-mode="tb">京都</text>
  <rect id="pref27" width="40" height="50" x="250" y="350" />
  <text x="270" y="375" text-anchor="middle" dominant-baseline="central" writing-mode="tb">大阪</text>
  <rect id="pref28" width="40" height="100" x="250" y="250" />
  <text x="270" y="300" text-anchor="middle" dominant-baseline="central" writing-mode="tb">兵庫</text>
  <rect id="pref29" width="40" height="50" x="290" y="350" />
  <text x="310" y="375" text-anchor="middle" dominant-baseline="central" writing-mode="tb">奈良</text>
  <rect id="pref30" width="80" height="50" x="250" y="400" />
  <text x="290" y="425" text-anchor="middle" dominant-baseline="central">和歌山</text>
  <rect id="pref31" width="40" height="50" x="210" y="250" />
  <text x="230" y="275" text-anchor="middle" dominant-baseline="central" writing-mode="tb">鳥取</text>
  <rect id="pref32" width="40" height="50" x="170" y="250" />
  <text x="190" y="275" text-anchor="middle" dominant-baseline="central" writing-mode="tb">島根</text>
  <rect id="pref33" width="40" height="50" x="210" y="300" />
  <text x="230" y="325" text-anchor="middle" dominant-baseline="central" writing-mode="tb">岡山</text>
  <rect id="pref34" width="40" height="50" x="170" y="300" />
  <text x="190" y="325" text-anchor="middle" dominant-baseline="central" writing-mode="tb">広島</text>
  <rect id="pref35" width="40" height="100" x="130" y="250" />
  <text x="150" y="300" text-anchor="middle" dominant-baseline="central" writing-mode="tb">山口</text>
  <rect id="pref36" width="54" height="40" x="186" y="400" />
  <text x="213" y="420" text-anchor="middle" dominant-baseline="central">徳島</text>
  <rect id="pref37" width="54" height="40" x="186" y="360" />
  <text x="213" y="380" text-anchor="middle" dominant-baseline="central">香川</text>
  <rect id="pref38" width="56" height="40" x="130" y="360" />
  <text x="158" y="380" text-anchor="middle" dominant-baseline="central">愛媛</text>
  <rect id="pref39" width="56" height="40" x="130" y="400" />
  <text x="158" y="420" text-anchor="middle" dominant-baseline="central">高知</text>
  <rect id="pref40" width="36" height="70" x="84" y="260" />
  <text x="102" y="295" text-anchor="middle" dominant-baseline="central" writing-mode="tb">福岡</text>
  <rect id="pref41" width="36" height="70" x="48" y="260" />
  <text x="66" y="295" text-anchor="middle" dominant-baseline="central" writing-mode="tb">佐賀</text>
  <rect id="pref42" width="36" height="70" x="12" y="260" />
  <text x="30" y="295" text-anchor="middle" dominant-baseline="central" writing-mode="tb">長崎</text>
  <rect id="pref43" width="36" height="70" x="48" y="330" />
  <text x="66" y="365" text-anchor="middle" dominant-baseline="central" writing-mode="tb">熊本</text>
  <rect id="pref44" width="36" height="70" x="84" y="330" />
  <text x="102" y="365" text-anchor="middle" dominant-baseline="central" writing-mode="tb">大分</text>
  <rect id="pref45" width="36" height="70" x="84" y="400" />
  <text x="102" y="435" text-anchor="middle" dominant-baseline="central" writing-mode="tb">宮崎</text>
  <rect id="pref46" width="36" height="70" x="48" y="400" />
  <text x="66" y="435" text-anchor="middle" dominant-baseline="central" writing-mode="tb">鹿児島</text>
  <rect id="pref47" width="60" height="40" x="10" y="500" />
  <text x="40" y="520" text-anchor="middle" dominant-baseline="central">沖縄</text>
</svg>
</div>
</body>
</html>
```