レスポンシブ対応を考えて、クリッカブルマップではなく、イラストレーターの地図をSVGで書きだして、ホバーの設定をしてみる

「地図をクリックしたら~」というものを制作したい場合
以前はクリッカブルマップを使っていました。

それだとスマホ対応が難しいので
イラストレーターからSVGで書きだすのが良いかなと。

ただし、あんまり地図が細かくなると、タップしづらくなるので
そういう場合はリストでのボタンにしたほうがいいと思います。

↓ 参考 こちらの地図の細かさではスマホで見た時はタップしづらいです(笑)
» SVGで地図。こんな感じ(別画面で開きます)

手順は以下の通り
① イラストレーターで地図を作成
② SVG書き出し用に、ボタンになる部分ごとにレイヤー分けをして、
レイヤーの名前がHTML上の「id」になるので、名前は英数半角文字にします。
③ ファイル → 書き出し → スクリーン用に書き出し

④「書き出されるファイルの種類の詳細設定です」のところに行きます。

⑤ SVG の縮小のチェックを外して、設定を保存

⑥ どこに保存先にされるのかを見てから、SVGでアートボードを書き出し。

⑦ 書き出されたデータはダブルクリックするとブラウザが開いてしまいます。
コーディング用のテキストエディターで開いてください。

⑧ コードまるごと、任意のHTMLファイルにコピペします。
CSSは通常のCSSと同じように扱えますので、CSSファイルに移動させます。
CSSを移動させたあと残った<defs><style></style></defs>は消して大丈夫です。

⑨ <g>から</g>までがひとかたまりなので、リンクなどを付け加えます。
※ここでリンクは「 a href=”ファイルパス” 」ではなく「 a xlink:href=”ファイルパス” 」とするのが良いそうです。

⑩ CSSを記述します。

CSSはSVG独自のものがあるので
それを使用します。

塗りつぶし
fill 塗りつぶしの色
例)fill: #ffffff;
fill-opacity 塗りつぶしの透過度。0~1
例)stroke-width: 0.3;
stroke 線の色
例) stroke: #000000;
stroke-width 線の幅。px は不要。小数点OK
例)stroke-width: 3

参考サイト:HTMLとCSSでSVGを使うためのメモ

» SVGで地図。こんな感じ(別画面で開きます)