YouTubeで昨日、次の動画を見ました。
私も利用しているGoogleのAI Geminiが3.1になり、進化したことを伝える動画です。その中から、SVGの活用事例を紹介しています。
私は2カ月前からGeminiを使い出したばかりです。私が主に使うのは、いろいろなことを質問して教えてもらうことと、画像生成をしたのちに動画生成をしてもらうことです。
SVGというのは知りませんでした。そこで、GeminiにSVGのことを訊き、次のように教えてもらいました。
SVG（Scalable Vector Graphics：スケーラブル・ベクター・グラフィックス）とは、一言でいうと「数式とテキスト（コード）で描かれた画像」です。
普段ストロボなどを使って撮影されている写真（JPEG形式など）と比較すると、その特殊性がとてもよくわかります。大きく3つの特徴があります。
Shutterstock
1. 拡大しても絶対に荒れない（ベクター形式）
- 写真（JPEGやPNGなど）： 小さな色の点（ピクセル）が集まった「モザイクアート」のようなものです。そのため、ズームしていくと四角いドットが見えて、輪郭がガビガビに荒れてしまいます（ラスター画像と呼びます）。
- SVG： 「X座標100から200まで直線を引く」「半径50の赤い円を描く」といった「図形の設計図（数式）」として記録されています。いくらズームしても、PCのブラウザがその都度計算して線を引き直すため、輪郭が常にくっきりと滑らかなままです。
2. 中身はただの「テキストデータ」
写真のデータは複雑なバイナリデータ（人間が読めない機械の言葉）ですが、SVGの中身は、普通のテキスト（英数字の文字列）です。 テキストファイルなのでデータ容量が非常に軽く、今回のようにWordPressの「カスタムHTML」の枠に直接文字として書き込むだけで、ブラウザがそれを読み取って絵にしてくれます。
3. だからアニメーションが得意
中身が「図形を構成する数値」の集まりであるため、アニメーションにするのが非常に簡単です。 パラパラ漫画のように何枚も画像を用意する必要はなく、テキストの中で「この円の角度（数値）を、2秒かけて0から360に変更して」と指示を書くだけで、ブラウザがその間の数値を自動で計算し、滑らかに動かしてくれます。先ほどのロータリーシャッターの回転は、まさにこの仕組みです。
実はこの説明は、私があることをしたあとに訊きました。ですので、ロータリーシャッターの回転とか、わからないことが出てきます。これは、あとで紹介します。
SVGは2001年頃に登場した技術だそうです。その頃から、作成したSVGを動かすことはできたそうですが、エンジニアが職人技のようにして、動きを与えたそうです。
そのあたりのことも、Geminiが次のように教えてくれました。
SVGはAIがブームになるずっと前（2001年頃）から存在していましたし、当時からアニメーションさせることも可能でした。
AIが新しく「SVGアニメーションという技術を発明した」わけではなく、「人間が手作業で書くには面倒すぎた数式やコードを、AIが代わりに一瞬で計算して書いてくれるようになった」というのが正確なところです。
AI以前のSVGアニメーションはどう作っていたか？
SVGの実態は、先ほど見ていただいたような
<rect>（四角）や<circle>（円）といったHTMLに似たタグと数値の集まりです。AIがない時代、これをアニメーションさせるには以下のような大変な労力が必要でした。
- 職人技の手書き: X座標、Y座標、回転する角度などの数値を、エンジニアが方眼紙と電卓を使って計算しながら、一つ一つテキストエディタで手打ちする。（今回のような規則的な動きなら可能ですが、非常に骨が折れる作業です）
- 高価な専用ソフトを使う: Adobe Illustratorなどのプロ向けデザインツールで図形を描画してSVG形式で書き出し、そこにプログラマーが「JavaScript」というプログラミング言語や、CSSを使って「何秒かけてどう動くか」という指示を後から書き足す。
つまり、専門的な知識とツール、そして多くの時間を持つプロのWebデザイナーやエンジニアにしか作れない、ハードルの高いものでした。
SVGがどいうものか、大体わかってきました。SVGを使ったアニメは、テレビのアニメなどとは違い、図形のようなものを動かすのが得意なのですね。
本ページで紹介する動画を見るうち、私が以前から作りたいと思いつつ、作れずにいたアニメーションを、SVGを使えば作れそうだ、と直感しました。
そのようにして作ってもらったのが、次のアニメーションです。生成されたコードを埋め込んで、アニメーションの表現を得ています。
これが何を示すアニメーションかわかりますか。フィルムのムービーカメラの仕組みを簡単なアニメーションにしたものです。
Geminiの解説の中にある「ロータリーシャッター」が、回転している赤い半円形です。そして、そのうしろで規則的に動くのがフィルムを模したものです。
フィルムを使うムービーカメラについては、本コーナーで以前から何度も書いています。
今回、SVGで作ったアニメーションは、構造的には違っている点があると思います。フィルムが移動する中央に、観点式シャッターの回転軸があるのはヘンです。
私は、構造を頭では理解しているつもりですが、内部の構造を実際に自分の目で見たことがありません。
回転式のシャッターを使うという考え方は、このアニメーションでわかってもらえるのではないかと思います。
回転するシャッターと、うしろのフィルムの動きを見て下さい。
白く光っている部分が、レンズから入った光を露光する1コマです。回転シャッターが、露光口を塞いだときに、フィルムが1コマ送られ、開いたときに露光しているのがわかります。
このような動きが、商業映画用ムービーカメラは、半円の回転シャッターが1秒間に24回転し、1回転ごとに1コマの静止画を撮影しています。私が昔使った8ミリ映画用カメラは、1秒間に18回転し、18コマの撮影をします。
このことから、毎秒24コマのムービーカメラの定速シャッター速度が、シャッター開角度（シャッターアングル）が180度の場合は、1/24の半分の時間（2倍の速さ）、1/48秒であることがわかります。
シャッター開角度を意図的に変化させることで、固有の表現を狙うこともできます。
今回紹介した回転シャッターのアニメーションは、完成するまでに合計7回の生成をしてもらいました。1回目の生成で、最終的に使用するアニメーションに近い出来でした。
そのアニメは、露光するコマが白くなっていなかったので、白くなるように指示をしました。そのあと、こちらの意図がうまく伝わらなかったのか、「迷路」に迷い込んでしまいました。
それが5回ぐらい続き、最後に、一番最初に生成してもらったアニメを基に、露光するコマを白くしてくれるよう頼み、今回のアニメが完成しました。
部分の色や、動く速さを簡単に変えられることも教えてもらいました。
本更新を終えたら、生成してもらったコードをもう一度「観察」し、より、本物に近いローリングシャッターの構造を示すアニメーションに改良してみたいと思います。
本更新の中で紹介している「アナログな映像」さんの動画を参考にして、回転シャッターの回転軸を向かって左にずらすなど、改良できればと考えています。
今回、Geminiと交わした「対話」は、いつもの、質問調とは違います。アニメーションのコードをGeminiに生成してもらい、私の要望を伝え、生成し直してもらうことを何度も繰り返した過程が記録されているからです。
それを、NotebookLMに読み込ませ、動画を生成してもらいました。文章を読むのが面倒な人は、動画をご覧ください。
今回、Geminiとやり取りしてSVGアニメを作る過程をイメージし、音楽生成AIのSunoに音楽を生成してもらいました。よかったら聴いてください。