SVGを使う面白さはベクターベースであるために一回描いた図形をカスタマイズしやすいということです。さらにカスタマイズするのもXMLを直に編集するのではなく、プログラムからできるのが利点です。 今回紹介するCoördinatorは音楽サービスで知られるSpotifyが開発したSVGカスタマイズツールです。

Coördinatorの使い方

例えばウサギのイラストです。ドットで表現されています。

ドットをカラフルなものに変えてみました。

こちらは別なSVG。

目を粗くしてみました。

ドットの大きさを変えて縮小。

さらにカラフルに。

Coördinatorを使うとドットの大きさや粗さ、色などを自由に変更できます。それによって描かれる図形も印象が変わってきます。できあがった作品は画像として出力したり、Coördinatorで使えるJSONやCSVとしてダウンロードできます。

CoördinatorはJavaScript製のオープンソース・ソフトウェア(Apache Licnese 2.0)です。

Coördinator spotify/coordinator: A visual interface for turning an SVG into XY coördinates.