cssとsvgを使って日本地図のイメージマップを作ってみた話 #svg #css

cssとsvgを使って日本地図のイメージマップを作ってみた話 #svg #css

svgことScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)は、web上でも扱える二次元ベクター画像です。今までは対応しているブラウザに限りがあったので使うに使えない感じでしたが、IE9~10のサポート終了のこともあっていよいよ期は熟したと言ってもいいでしょう。(最近、こればっかりw)

まぁ、うちのブログでもロゴ画像に使ってたり、アイコンに使ってたりして、実はちょいちょい使うようにはしてたのですが、なかなか大っぴらには使えなかったのが、ついに解禁ですよ。ベクター画像のいいところといえば、イラレを使ってる方ならご存知のとおり、拡大しても縮小しても画像が劣化しないことにあります。そこらへんがいわゆるラスター画像(png、gif、jpeg)などとの違いですね。

ということで、今日はsvgを使って日本地図のクリッカブル・マップを作ってみたというお話しです。

SVGファイルの日本地図のxmlをいじる

今回は「日本地図 svg」でググったらでてきた「日本の白地図」さんのデータをお借りしています。ダウンロードした日本地図のsvgファイルをテキストエディタで開いて、xmlを編集しました。

都道府県別にパスが作られていたのでそのパスごとにリンクを貼ったり、外部スタイルの読み込みを設定したりした程度ですけど。

日本地図編集版

で、それを読み込んだのが下。今回はimgで読出しております。

japan

さて、お気付きのとおり、このままでは真っ黒ですし、imgで読み込んでいますのでクリッカブル・マップとして機能はしません。実際にクリッカブル・マップとして使うときは、テンプレートファイルに直接<svg>~</svg>として書き込むか、<iframe>や<object>、<embed>を使うかのどちらかになります。

黒い地図に対応したCSSファイルを準備

この地図が上のように黒いのは、外部スタイルで地図の色を設定しているからです。そのCSSとSCSSの両方が以下のコードです。

SCSSのサンプルコード

スマートな書き方が思いつかなかったので誰か分かる人がいたら教えてもらいたいくらいです。

コンパイルしたCSSは大変な長さだったので、サンプルコードを掲載するのがめんどくさいですが、を掲載しておきます。誰もがSCSS使えるわけじゃないですしね。

CSSのサンプルコード

わーい、やっぱり半端なく長かった。fillやstroke、stroke-widthというのが、svgならではスタイルです。使い慣れているものと多少違うので気をつけてください。

先ほどの日本地図のsvgファイルと、css、scssファイルを一緒にしたzipを用意したので、使ってみたい方はご自由にどうぞ。

日本地図SVG+CSS+SCSS圧縮ファイル

もともとのデータがクリエイティブ・コモンズなので、商用はお控えくださいませ。


コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)

Back to Top