見出し画像

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 画像がぞうつくり、うごかしたりしていきたいとおもいます。

この記事が気に入ったらサポートをしてみませんか?