JavaのWebアプリケーション開発フレームワークによる、Webサイト開発の顛末記です。

EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、
備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、
これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。
■応用の森　jQueryでSVG形式データをいじってみたよ
最近の画像データは、jpegとか、gifとか、pngとかの拡張子ファイルじゃなくて、
SVG(Scalable Vector Graphics）形式とかいうフォーマットがトレンドらしい。。。
また勉強しなければいけないことが増えたょ。やれやれ、ふぅ。

少しかじった程度なので、嘘ついてるかもしれませんが、
SVGファイルをテキストエディタで開くと、基本的にはXMLフォーマットで構成されています。
画像データ自体は、XMLの中にbase64形式で保持しています(画像があれば)。

拡張性が高いだ、なんたらかんたらとうれしいことがWikipedia当たりに書いてあるので
興味のある人は勉強してみてください。
では、まずサンプルデータです。
１）最初は、SVGデータを単純に <img>タグに埋め込んだ状態
<img src="./svg/japanmap2.svg" width="200"/>

jpegとか、pngとかと見た目はまったく一緒です。マウス右ボタンクリックで、
svgファイルが保存できますので、ダウンロードしてテキストエディタで開いてみてください。
jpegとか、pngとかと同じく、jQueryで拾えるイベントは限られています。（これまでの常識の範囲内）
click/ mouseover/mouseout　あたりですね。
次は、<div>タグに、JavaScriptを使って、SVGファイルをロードする例。

見た目は、<img>タグに埋め込み方式となんら変わりはありませんが、
この方式は、JavaScriptで色々いじることができるところが違います。

  ←の好きな色を選択して、上の地図の適当なエリアをクリックしてみてください。

JavaScriptで読み込まれた、SVGのタグがあたかもjQueryのオブジェクトのように扱われ
SVGの属性を好き勝手（操作可能なものだけですが）に書き換えることが可能です。
ここでは、視覚的な変化を挙げてみましたが、画像上の特定箇所のイベントが拾えるわけなので
クリックした場所によって、特定のサイトにジャンプするなどという使い方もできそうです。

ソースを見たい人は、このページの適当なところで、マウス右ボタンをクリックして
「ページのソースを表示」、ないしは「フレームのソースを表示」を選択して内容を確認してください。
そんなに大したステップのソースではないので、見ればわかると思います。

 

※）SVG編集ソフトについて　2019/Jul/09 追記
SVGフォーマット形式のファイルを編集できるソフトとしては、
2017年中ごろまでは、Googleアプリで Boxy SVG という
簡単かつ使い勝手の良いソフトが無料で提供されていたのですが、
いつの頃からか有料化されてしまい、その後たまぁにBoxy SVGに代わるエディタを探していましたが、
なかなか良いソフトに出会うことができませんでした。

しばらくぶりに、SVGをさわる機会があったので、またぞろなんかないかなぁ、、、、
と半分あきらめモードでネットを漁ってみたところ、
INKSCAPE（インクスケープと読むのかな？）というフリーソフトを
見つけました！　v(^^)v
ちょっと触ってみたところでは、多機能／高性能で言ことなし。
これでまた色々遊べそうです。
jQuery/JavaScriptの小技集  jQueryで、SVG形式ファイルの操作
HOME