お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

ちょっとこの画像をみてくれ。こいつをどう思う？

拡大 縮小

SVG画像を調べる機会があったので少し調べてみました。

SVGって何ぞや。

SVGはXMLをベースにしたベクトルグラフィックスの記述言語です。
PNGのような画像フォーマットの1つでもありますが、実際にはXMLを記述したテキストファイルであり
HTMLと同様にJavaScript（DOM API）による制御も行えます。
HTMLがタグによって文書の構造を記述するのと同様に、SVGはタグで図形を記述します。

その前に、SVGファイルのhtml記述方法について

記述言語とか言われて意味が分からないのですが、まずはhtml上にどのように記述すればいいのか？
至って普通な記述方法のようです。(一部のぞく)

imgタグ

他画像と同じように、imgタグを使用する事ができるようです
※JSでの操作が一切できない表示専用 

<img src="logomark.svg" width="32" height="32">

cssで背景画像

imgと同じく、cssで背景画像として指定することもできるようですね。
※JSでの操作が一切できない表示専用 

#testSvg
{
 width:32px;
 height:32px;
 background-image:url(logomark.svg);
 background-size:100%;
}

html内にインラインで記述

さて、突然こいつは何を言いだしているのでしょうか。
【記述言語】と言われるのはつまりこういう感じの事なんざんすね。
詳しい内容は後述しますので、ここでは
SVGはhtmlタグ内に書けるんだ(*^◯^*)
が分かってればいいと思います。 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <polygon id="logomark-polyline" fill-rule="evenodd" clip-rule="evenodd" fill="#0CB9C7" points="128.25,26 147.19,96.69 95.44,148.44 24.75,129.5 5.81,58.81 57.56,7.06 "/>
</svg>

objectタグを使う

swfファイルみたいな使い方ですね。
jQueryで操作するならこの指定方法が一番いいような、気がします。めいびー 

<object type="image/svg+xml" data="logomark.svg" width="256" height="256"></object>

ライブラリを使う

今回この方法にシフトしました。
PC/SPでの切り替えがあったのと、SVG要素の取得が楽だったからです。

ライブラリについて

今回ライブラリは以下を使用しています。

jquery-ui.min.js
jquery.ui.touch-punch.min.js
snap.svg.js

jquery-ui.min.js

伝家の宝刀jquery-ui.min.js。ドラッグイベント用で使用しています。

jquery.ui.touch-punch.min.js

スマホサイトでのドラッグイベントの適用はこれです。

snap.svg.js

今回は【拡大縮小】【ドラッグでの移動】【特定パスをクリッカブル処理】の３つを実装しましたので
それらを踏まえて書いていきますね。

【2015/06/19追記】
【拡大縮小】【ドラッグでの移動】に関してはSVG関数を使うのをヤメました。
色々辛いからです。
なので、CSSのwidthとheightとtopとleftを使って制御してます。
ドラッグはjQuery UI を使うと３秒でできました。(ジーザス)

snap.svg.jsの読み込み

外部ファイル自体はもうペペッと読み込んであげてください。

SVG表示用タグの取得

※SVGファイルが外部ファイルとしての前提でお話します。
外部ファイルSVGをロード後、DOM構造の中にブッ込む必要があります。
タグは何でもいいんじゃないかと思います。 

// Snapで囲むことによって、SVG操作のタグって感じになります。
s = Snap("#svgArea");

SVG画像のロード

普通にloadでSVG画像を指定します。
読み込み完了後、そのタグ自体を、先ほどのSVG表示用タグの所にappendしてあげます。
で、SVGタグ自体には何かしようとしても動かないっぽいので、その下にあるgタグ(SVG固有タグ、グループ)を指定し
こいつをベースに色々触ってあげることになります。
ここまでで、DOM構造へのブチ込みとSVGの操作準備が整いました。 

Snap.load("./img/map.svg", function (f)
{
 // loadしたsvgファイルを要素に書き込み
 s.append(f);
 // svgタグの次、gタグを指定してベースオブジェクトの取得
 g = f.select("g");
});

拡大縮小処理について

文字で表すのは至難の業なのでソースでも見ておいてください。

SVG画像サイズについて

SVGサイズが大きいとドラッグ処理が大変な事になるようです。 900kbでもうほとんど動かない状態
目安としては400kb以内になんとか抑えないといけない感じです。

SVGについて