こんにちは、 @kz_morita です。 今回は，SVG を JavaScript から簡単に扱える， Snap.svg について紹介します． Snap.svg とは Snap.svg は，adobe が オープンソースで提供している，SVG ライブラリで，JavaScript から手軽に SVG の操作ができます． http://snapsvg.io/ Snap.svg の使い方 まずは，SVGを描画するために，空の <svg> タグを用意します． <svg id="svg"> </svg> これで，HTML側は準備OKです． 次に，JavaScript側から該当の svg に対して四角を書いてみます． const s = Snap('#svg'); // 左上 (10, 10) の座標に，(40, 40) の大きさの四角を描画 s.rect(10, 10, 40, 40); 上記のように，Snap('#svg') とすると，id が svg の svg タグを取得し，準備をします． 四角形などを描画をするのは簡単で，s.rect を呼び出せばそれだけで描画されます． 他にも便利な機能として，描画した svg の Element を簡単に Drag & Drop できるようにすることができます． 以下のように，drag() メソッドを呼び出すだけです． s.rect(10, 10, 40, 40); s.