SVGのrectで簡単な日本地図を描いてみました。
各都道府県のrectのfillを変えれば色を変えることができます。
参考：
SVG 1.1 仕様 （第２版） 日本語訳
Craft MAP (イラスト地図を参考にしました)
<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>