TGS の書き出し結果がサイズ制限を超えたら、図案やアニメーションを表すために必要な情報を減らしましょう。プレビューを切り抜いたり、ファイル名を変えたりしても解決しません。コピーを使って一度に一つの原因を調整し、元の SVG のサイズだけでなく、実際に圧縮された TGS の出力を比較してください。

単純化の前に比較基準を記録する

SVG を保存し、プリセット、再生時間、最終的なファイルサイズ、表示された警告を記録します。目指す仕上がりのスクリーンショットか参考画像も残してください。最適化によってデザインが維持されたか、書き出しファイルに実際に変化があったかを判断するには、この基準が必要です。

Telegram は TGS アニメーションの上限を 64 KB と定めています。コンバーターは圧縮後の出力を確認して最適化を試みますが、複雑な図案では上限を超えたままになることもあります。書き出し結果が大きすぎるときは元の素材を見直すきっかけと捉え、拡張子を変えれば修正できるとは考えないでください。

不要な図形データから減らす

細かすぎる自動トレース、重複した輪郭、ごく小さな独立した図形、隠れた装飾を探します。写真をトレースしたものは、一見単純な SVG 画像でも膨大な図形データを含むことがあります。ステッカーの表示サイズで見たときに、シルエットや表情に役立たない細部を取り除きましょう。

例えば、マスコットの上着には縫い目、布の質感、小さなボタンがいくつも描かれているかもしれません。上着の主要な形と、デザインの特徴を示す一つのボタンを残します。通常の表示サイズで結果を比較してから、取り除いた質感が本当に役立っていたかを判断してください。

特徴を守りながらパスを単純化する

ベクターエディターの単純化機能は、図案全体に繰り返し適用するのではなく、選択したパスに使います。変更のたびに顔、ロゴの角、文字の内側の空間を確認してください。これらは多くの場合、人が最初に見分ける特徴です。

ほぼ一直線上に多数の点が並ぶ曲線は、単純化しても形を保ちやすいかもしれません。一方で、ブランドマークを特徴付ける小さな切り欠きは、そうとは限りません。段階ごとの保存データを残し、削除したすべての細部を戻さなくても、重要な輪郭だけを復元できるようにしましょう。

  1. 点の多いパスか装飾のグループを一つ選ぶ。
  2. 元データのコピーで単純化する。
  3. シルエットと内側の閉じた穴を確認する。
  4. 同じ動きの設定で再度書き出す。
  5. サイズまたは構造に納得できる改善がある場合だけ、変更を残す。

効果の小さい個別の動きを減らす

アニメーションは動きとともにデータも増やします。多くの装飾要素にそれぞれ別のタイミングが設定されているなら、個別に動く必要があるかを考えましょう。全体をまとまりのある動きにすることで、より単純な構造で同じ意図を伝えられるかもしれません。一部の高度なレイヤー操作は、選択した製品プランによって利用可否が異なります。

アニメーションを調整する前に、静止した基準版を試してください。静止版ですでに大きいなら、図形データの見直しに集中します。動きを付けたときに大きく増えるなら、動かす部分の数を減らすか、動きを単純化します。複雑さを解消する代わりに、TGS で必要とされるフレームレートを下げないでください。

出力、見た目、今後の編集しやすさを比較する

有望な候補をそれぞれ書き出し、結果のサイズを記録します。SVG のバイト数、パス数、圧縮後の TGS サイズの関係は、完全に比例するわけではありません。元の SVG から空白文字を取り除くよりも、余分な図形データを取り除くほうが、はるかに効果的な場合があります。

最後に、見た目を許容できる最小の候補を Telegram で確認します。顔の細部、文字、透明部分が単純化によって失われていないか確認してください。編集可能な原本と、うまくいった書き出し用コピーは一緒に保管します。上限以内のファイルでも、アニメーションが意図した内容を伝え、後から修正できてこそ役に立ちます。

出典・参考資料