SVG部(エスブイジーぶ) 事始(ことはじ)め

学校がっこうのクラブ活動かつどうのように、noteノート のコミュニティの中なかで SVGエスブイジー 部ぶを始はじめようと思おもいます。

というのは SVG というベクトル画がの規格きかくはこれからどんどん使つかわれていくのではないか、SVG でもっと面白おもしろいことができるのではないか、と私わたしが以前いぜんから考かんがえているからです。

みなさまが興味きょうみを示しめしてくれるか分わからないのですが、まずは一人ひとりでコツコツとやっていこうと思おもいます。最初さいしょに取とり組くむのは SVG をプログラムで生成せいせいできるようにすることです。

私わたしは長ながい間あいだ、Small Basicスモールベーシック という入門にゅうもん用ようのプログラミング言語げんごで簡単かんたんな絵えを描かくプログラムをたくさん書かいてきました。出来上できあがるのはプログラム画面がめん上じょうの画像がぞうです。画像がぞうはスクリーンショットを取とればラスター画が（ビットマップ）にすることができます。でもプログラムでは長方形ちょうほうけいや楕円だえんなどを組くみ合あわせて描えがいているので、本来ほんらいはベクトル画がにできるはずです。それで、Shapesシェイプス という SVG を出力しゅつりょくするプログラムも作つくりました。

ただ、それだけではどうも満足まんぞくがいきません。SVG 自体じたい、長方形ちょうほうけいや楕円だえんなどを組くみ合あわせてベクトル画がとして表示ひょうじされるので Small Basic のプログラムと基本的きほんてきに近ちかいのですが、例たとえば Small Basic では乱数らんすうを発生はっせいさせて花吹雪はなふぶきを描えがいたり、ロジックを組くんで絵えを動うごかしたりすることができます。SVG でも簡単かんたんなアニメーションは作つくれますが、制限せいげんがあります。

それで、事始ことはじめとして、JavaScriptジャバスクリプト で SVG を生成せいせいしてみることにしました。note とは別べつに以前いぜんから書かいているブログで JavaScript の連載れんさいがあるので、まずはそこに「SVGを生成せいせい」という記事きじを書かきました。しばらくはこの連載れんさいを続つづけていこうと考かんがえています。

JavaScript (49) SVGを生成