SVG.js(エスブイジードットジェーエス) 使(つか)ってみた

SVGエスブイジーというベクトル画がのタグをプログラムで作成さくせいしたい、ということで今回こんかいは SVG のライブラリを探さがして使つかってみることにしました。

オープンソースの SVG.jsエスブイジードットジェーエス が使つかいやすそうだったので、試ためしてみました。

SVG.js

SVG.js のインストール（導入どうにゅう）は GitHubギットハブ の最新版さいしんばん 3.1.2 から ZIPジップ ファイルをダウンロード・解凍かいとうし、その中なかの svg.min.jsエスブイジードットミンドットジェーエス と svg.min.js.mapエスブイジードットミンドットジェーエスドットマップ というファイルを作つくった JavaScriptジャバスクリプト のプログラムのフォルダにコピーして呼よび出だすようにしました。

これらのファイルは SVG.js のミニマムセット（最小部分さいしょうぶぶん）で、処理しょりの負担ふたんを減へらせる版はんです。

今回こんかい作つくったプログラムの一部いちぶはこんな感かんじです。これはロケットの頭部とうぶの三角形さんかくけいを生成せいせいしているところです。グレーの2行ぎょうはコメントで生成せいせいする SVG の polygonポリゴン 要素ようそを表あらわしています。3行ぎょう目めでこの polygon 要素ようそを作つくるためのライブラリ関数かんすうを呼よび出だしています。

    //  <polygon points="92,0 22,96 162,96" 
    //    style="fill:#752424;stroke:#000000;stroke-width:2"/>
    draw.polygon('92,0 22,96 162,96').fill('#752424').stroke({color: '#000000', width: 2})

この取とり組くみの詳細しょうさいについてはブログ記事きじ「JavaScript (50) SVG.jsライブラリを使用しよう」に書かきましたので、読よんでみてください。

これでプログラムから SVG 画像がぞうを作つくれるようになりました。今後こんごはこの SVG.js を使つかったプログラムでいろいろな SVG 画像がぞうを作つくり、動うごかしたりしていきたいと思おもいます。