以前SVGでロケットのアニメを作ったことがあります。SVG とは Scalable Vector Graphics の略で、ベクトル画です。簡単なアニメーションも作れます。ただ、複雑な動きのアニメーションを SVG だけで作るのはちょっと大変そうです。
SVG は HTML に組み込めば、ブラウザが画像として表示してくれます。以下のコードはロケットの画像を表したSVGです。このブログの公開先である WordPress.com では残念ながら埋め込みHTMLでSVGがサポートされていないので、ここでは表示できないのですが、通常のHTMLに埋め込めばロケットの絵が出てきます。
<svg width="598" height="428" style="border: solid 1px lightgray">
<polygon points="92,0 22,96 162,96"
style="fill:#752424;stroke:#000000;stroke-width:2"/>
<polygon points="21,194 0,273 42,273"
style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
<polygon points="162,193 142,273 183,273"
style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
<polygon points="93,189 52,259 134,259"
style="fill:#1f1f1f;stroke:#000000;stroke-width:2"/>
<rect x="22" y="97" width="141" height="142"
style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
<polygon points="93,192 73,273 114,273"
style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
<ellipse cx="93" cy="145" rx="41" ry="43"
style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
<ellipse cx="93" cy="145" rx="33" ry="34"
style="fill:#217dbb;stroke:#000000;stroke-width:2"/>
<ellipse cx="37" cy="220" rx="7" ry="8"
style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
<ellipse cx="64" cy="221" rx="7" ry="7"
style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
<ellipse cx="122" cy="221" rx="6" ry="7"
style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
<ellipse cx="146" cy="220" rx="5" ry="6"
style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
</svg>
SVG には以前から注目していて、長年 Microsoft Office [※]で活用されていたクリップ アートのような画像や簡単なアニメとしてもっと流通してもよいと考えています。
SVG を直接作成できるツールとしては、Adobe Illustrator やオープンソースの Inkscape などがありますが、SVG をプログラムの出力として作成できると、複雑な画像やアニメも工夫次第では簡単に作れるようになります。
今回は JavaScript の Document インターフェイスを使って SVG を生成するプログラムを組んでみました。実行結果とソースコードはこちらです。上記の SVG は JavaScript のソースコードのコメントにも入れて対応させています。
今回は単純に図形を表示させただけですが、少しずつ改良してアニメにもできるようにしていく予定です。
[※] 最近、Microsoft Office は Microsoft 365 という名前に変わってしまいました。
のんきさんの年月記 
“” への1件の返信