ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Web上でSVGが多く使われるようになってきました。SVGの利点の一つに挙げられるのが、ベクターなので拡大しても綺麗ということです。拡大や縮小するというのは、情報の粒度を自分で変更したいという時に便利です。

そこで紹介したいのがSVG panzoomです。その名の通り、SVGのズームイン/アウトを実現するためのライブラリです。

SVG panzoomの使い方

サンプルです。多くの情報が散りばめられています。

拡大しました。マウスでできます。

逆にパンしました。これでも綺麗な線で描かれるのがSVGの良さですね。

実際の動きです。

実際の使用例です。書籍同士の関連度を可視化しています。

SVGはJavaScriptと組み合わせたインタラクティブなコンテンツを作るのに向いています。また、ベクターなので軽量であり、それでいて高解像度にも対応できるなどモバイルなどにも向いています。こうしたライブラリが増えればより使われていくようになるでしょう。

SVG panzoomはHTML5/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

SVG panzoom demo

anvaka/panzoom: Pan and zoom SVG elements

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2