SVG TOP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

記事更新の通知はXでアナウンス٩(๑❛ᴗ❛๑)
→ @maru6o6をフォロー

概要 📖 – ベクター画像を読み込む

SVG TOPは、ベクター形式の SVG ファイルを読み込んでラスタライズし、解像度に依存せず鮮明なテクスチャ画像として出力する TOPです。ロゴやアイコンなど輪郭の鮮明さが求められる素材に向いており、アンチエイリアスのレベルと背景色を指定したうえで、トランスフォームで配置を整えられます。

主な用途 🎯

ベクター形式の .svg ファイルを読み込んでテクスチャ画像に変換
ロゴ・アイコン・図形をどの解像度でも輪郭が崩れず鮮明に表示
アンチエイリアス設定で輪郭の滑らかさと描画コストを調整
背景色・背景の透明度を指定して合成用の素材を生成
トランスフォームでベクター素材の回転・移動・拡縮を制御

データフロー 🔄

入力: ベクター形式の SVG ファイル (.svg)
 ↓
ラスタライズ (アンチエイリアス + 背景色合成)
 ↓
トランスフォーム (回転・移動・拡縮)
 ↓
出力: テクスチャ画像

Tips

初心者の方は、以下日本語書籍も手元にあると安心です。

リンク

まる。

実際の案件事例まで踏み込んで紹介されていて、効率よくスキルアップするなら必携の二冊です！

パラメータ解説 ⚙️

Load Page 📁

ファイル読み込み 📂

File .file
File (ファイルパス) — 読み込む SVG ファイルのパスと名前を指定します。対応形式は .svg です。

DAT .dat
DAT (DAT 参照) — 現在は使用されていません (公式 docs 記載: Not currently used)。

Reload .reload
Reload (再読み込み) — 0 から 1 に変えるとファイルを強制的に再読み込みします。ファイルが変更されたとき、または起動時にファイルが存在しなかったときに役立ちます。

Anti-Alias `.antialias` 🎚️

輪郭の滑らかさ (アンチエイリアス) のレベル指定

項目	内部名	説明
1x (Off)	`.aa1`	アンチエイリアスなし (最軽量、輪郭にジャギーが残る)
2x	`.aa2`	2 倍サンプリング
4x	`.aa4`	4 倍サンプリング
8x (Medium)	`.aa8mid`	8 倍サンプリング (中品質)
8x (High)	`.aa8high`	8 倍サンプリング (高品質)
16x (Low)	`.aa16low`	16 倍サンプリング (低品質)
16x (Medium)	`.aa16mid`	16 倍サンプリング (中品質)
16x (High)	`.aa16high`	16 倍サンプリング (高品質)
32x	`.aa32`	32 倍サンプリング (最高品質、GPU メモリ消費大)

背景設定 🎨

Background Color .bgcolor
Background Color (背景色) — 出力画像の背景色を設定します。R / G / B の 3 成分 (bgcolorr / bgcolorg / bgcolorb) で指定します。

Background Alpha .bgalpha
Background Alpha (背景の透明度) — 出力画像の背景アルファ値を設定します。0 にすると背景が透明になり、合成用素材として上重ねしやすくなります。

Transform Page 🎯

Transform Order `.xord` 🔢

拡縮・回転・移動を適用する順序

項目	内部名	説明
Scale Rotate Translate	`.srt`	拡縮 → 回転 → 移動の順 (デフォルト)
Scale Translate Rotate	`.str`	拡縮 → 移動 → 回転の順
Rotate Scale Translate	`.rst`	回転 → 拡縮 → 移動の順
Rotate Translate Scale	`.rts`	回転 → 移動 → 拡縮の順
Translate Scale Rotate	`.tsr`	移動 → 拡縮 → 回転の順
Translate Rotate Scale	`.trs`	移動 → 回転 → 拡縮の順

Rotate Order `.rord` 🔄

X / Y / Z 各軸の回転を適用する順序

項目	内部名	説明
Rx Ry Rz	`.xyz`	X 軸 → Y 軸 → Z 軸の順で回転
Rx Rz Ry	`.xzy`	X 軸 → Z 軸 → Y 軸の順で回転
Ry Rx Rz	`.yxz`	Y 軸 → X 軸 → Z 軸の順で回転
Ry Rz Rx	`.yzx`	Y 軸 → Z 軸 → X 軸の順で回転
Rz Rx Ry	`.zxy`	Z 軸 → X 軸 → Y 軸の順で回転
Rz Ry Rx	`.zyx`	Z 軸 → Y 軸 → X 軸の順で回転

トランスフォーム値 🎚️

Translate .t
Translate (平行移動) — X / Y 軸方向への平行移動量を指定します (tx / ty)。

Translate Unit .tunit
Translate Unit (移動単位) — Translate の単位を Pixels (ピクセル) / Fraction (0-1) / Fraction Aspect (アスペクト考慮の 0-1) から選択します。

Rotate .r
Rotate (回転) — X / Y / Z の 3 軸まわりの回転量を指定します (rx / ry / rz)。

Scale .s
Scale (拡縮) — X / Y 軸方向の拡大縮小率を指定します (sx / sy)。

Pivot .p
Pivot (基準点) — 拡縮・回転の中心となる基準点を定義します (px / py)。基準点を動かすと、拡縮や回転の結果の位置が変わります。

Pivot Unit .punit
Pivot Unit (基準点単位) — Pivot の単位を Pixels (ピクセル) / Fraction (0-1) / Fraction Aspect (アスペクト考慮の 0-1) から選択します。

Common Page 🔧

Output Resolution `.outputresolution` 🖼️

出力解像度の決定方式

項目	内部名	説明
Use Input	`.useinput`	入力 TOP の解像度をそのまま継承
Eighth	`.eighth`	入力解像度の 1/8
Quarter	`.quarter`	入力解像度の 1/4
Half	`.half`	入力解像度の 1/2
2X	`.2x`	入力解像度の 2 倍
4X	`.4x`	入力解像度の 4 倍
8X	`.8x`	入力解像度の 8 倍
Fit Resolution	`.fit`	指定解像度に縦横比を保持して収める
Limit Resolution	`.limit`	指定解像度を上限としてクランプ
Custom Resolution	`.custom`	`Resolution` パラメータで任意指定

Resolution `.resolution` 📐

カスタム解像度の幅・高さ指定 (Output Resolution = Custom 等の時のみ有効):

Resolution W: 出力幅 (ピクセル単位)。Output Resolution が Custom Resolution / Fit Resolution / Limit Resolution の時に有効
Resolution H: 出力高 (ピクセル単位)。同上

Resolution Menu `.resmenu` 📋

よく使う解像度プリセットのドロップダウン:

Resolution Menu: NTSC / PAL / HDTV 720 / HDTV 1080 / 4K UHD 等のプリセットから選択すると Resolution W / Resolution H が自動セットされる

Use Global Res Multiplier `.resmult` 🔢

プロジェクト全体の解像度倍率の適用:

Use Global Res Multiplier: Project Settings の Global Resolution Multiplier をこの TOP に適用するかどうか。プロトタイプを低解像度で動かしつつ最終出力で一括フル解像度化する運用に便利

Output Aspect `.outputaspect` 📏

出力アスペクト比の決定方式

項目	内部名	説明
Use Input	`.useinput`	入力 TOP のアスペクトを継承 (伝播事故の元、非推奨)
Resolution	`.resolution`	解像度から自動導出 (推奨デフォルト)
Custom Aspect	`.custom`	`Aspect1` / `Aspect2` で手動指定

Aspect `.aspect` 📐

カスタムアスペクト比の指定 (Output Aspect = Custom Aspect の時のみ有効):

Aspect1: 横方向アスペクト値 (Output Aspect = Custom Aspect の時のみ有効)
Aspect2: 縦方向アスペクト値 (同上)

Input Smoothness `.inputfiltertype` 🎚️

入力テクスチャのサンプリング方式

項目	内部名	説明
Nearest Pixel	`.nearest`	最近傍ピクセルサンプリング (ピクセルアート向け、ジャギーが残る)
Interpolate Pixels	`.linear`	バイリニア補間 (滑らか、デフォルト)
Mipmap Pixels	`.mipmap`	ミップマップ補間 (縮小時のモアレ抑制、わずかにコスト高)

Fill Viewer `.fillmode` 🖥️

ビューア内でのテクスチャの収め方

項目	内部名	説明
Use Input	`.useinput`	入力 TOP の Fill Viewer 設定を継承
Fill	`.fill`	ビューアいっぱいに引き伸ばす (アスペクト無視)
Fit Horizontal	`.width`	横幅に合わせて収める (上下に余白)
Fit Vertical	`.height`	縦幅に合わせて収める (左右に余白)
Fit Best	`.best`	アスペクト保持で内側に収まる最大サイズ
Fit Outside	`.outside`	アスペクト保持で外側まで覆う最小サイズ (はみ出しあり)
Native Resolution	`.nativeres`	テクスチャのネイティブ解像度のまま等倍表示

Viewer Smoothness `.filtertype` 🎛️

ビューア表示時のサンプリング方式

項目	内部名	説明
Nearest Pixel	`.nearest`	最近傍ピクセルサンプリング (ピクセル単位での確認向け)
Interpolate Pixels	`.linear`	バイリニア補間 (滑らか、デフォルト)
Mipmap Pixels	`.mipmap`	ミップマップ補間 (縮小ビュー時のモアレ抑制)

Passes `.npasses` 🔁

オペレータの反復実行回数:

Passes: TOP の処理を何パス繰り返すかの整数値。前回パスの結果が次回パスの入力になる。ブラー反復やフィードバック処理に利用

Channel Mask `.chanmask` 🎨

処理対象のチャンネルマスク (R/G/B/A 個別トグル):

Channel Mask: R / G / B / A 各チャンネルのオン/オフトグル。オフのチャンネルは TOP の処理を受けず入力値がそのまま通過

Pixel Format `.format` 🎨

出力テクスチャのピクセルフォーマット (ビット深度・チャンネル構成)

項目	内部名	説明
Use Input	`.useinput`	入力 TOP のフォーマットを継承
8-bit fixed (RGBA)	`.rgba8fixed`	標準 8 ビット固定小数 RGBA (デフォルト、軽量)
sRGB 8-bit fixed (RGBA)	`.srgba8fixed`	sRGB ガンマ補正済 8 ビット RGBA
16-bit float (RGBA)	`.rgba16float`	16 ビット浮動小数 RGBA (HDR・中間処理向け)
32-bit float (RGBA)	`.rgba32float`	32 ビット浮動小数 RGBA (最高精度、メモリ大)
10-bit RGB with 2-bit Alpha	`.rgb10a2fixed`	10-10-10-2 ビット固定小数 (バンディング抑制)
16-bit fixed (RGBA)	`.rgba16fixed`	16 ビット固定小数 RGBA
11-bit float (RGB)	`.rgb11float`	11-11-10 ビット浮動小数 RGB (アルファなし、HDR 軽量)
16-bit float (RGB)	`.rgb16float`	16 ビット浮動小数 RGB (アルファなし)
32-bit float (RGB)	`.rgb32float`	32 ビット浮動小数 RGB (アルファなし)
8-bit fixed (Mono)	`.mono8fixed`	8 ビット固定小数モノクロ
16-bit fixed (Mono)	`.mono16fixed`	16 ビット固定小数モノクロ
16-bit float (Mono)	`.mono16float`	16 ビット浮動小数モノクロ
32-bit float (Mono)	`.mono32float`	32 ビット浮動小数モノクロ
8-bit fixed (RG)	`.rg8fixed`	8 ビット固定小数 R+G 2 チャンネル
16-bit fixed (RG)	`.rg16fixed`	16 ビット固定小数 R+G
16-bit float (RG)	`.rg16float`	16 ビット浮動小数 R+G
32-bit float (RG)	`.rg32float`	32 ビット浮動小数 R+G
8-bit fixed (A)	`.a8fixed`	8 ビット固定小数アルファ単体
16-bit fixed (A)	`.a16fixed`	16 ビット固定小数アルファ単体
16-bit float (A)	`.a16float`	16 ビット浮動小数アルファ単体
32-bit float (A)	`.a32float`	32 ビット浮動小数アルファ単体
8-bit fixed (Mono+Alpha)	`.monoalpha8fixed`	8 ビット固定小数モノクロ+アルファ
16-bit fixed (Mono+Alpha)	`.monoalpha16fixed`	16 ビット固定小数モノクロ+アルファ
16-bit float (Mono+Alpha)	`.monoalpha16float`	16 ビット浮動小数モノクロ+アルファ
32-bit float (Mono+Alpha)	`.monoalpha32float`	32 ビット浮動小数モノクロ+アルファ

実践アイデア 💡

Example 1: ロゴの高解像度表示 🖼️

SVG TOP (ロゴ .svg) → Over TOP (input1) ← Movie File In TOP (背景, input2)

ベクター形式のロゴ SVG を SVG TOP で読み込み、解像度に依存せず鮮明なまま背景映像の上にアルファ合成する典型フローです。背景アルファを 0 にしてロゴ以外を透過させ、アンチエイリアスを高めに設定して輪郭を滑らかに保ちます。

ロゴの .svg ファイルを SVG TOP の File パラメータに指定
Anti-Alias を 8x (High) 以上にして輪郭を滑らかにする
Background Alpha を 0 にしてロゴ以外を透過させる
出力を Over TOP の input1 に接続し、背景の上に合成

Example 2: アイコンの配置調整 🎯

SVG TOP (アイコン .svg) → Transform 制御 → Layout TOP

UI 用のアイコン SVG を読み込み、Transform Page の移動・拡縮・回転で配置を整えてからレイアウトに流し込む用途です。ベクター素材なので拡大しても輪郭が崩れず、解像度違いの出力先でも使い回せます。

アイコンの .svg を SVG TOP に読み込む
Translate / Scale / Rotate で表示位置・サイズ・向きを調整
Transform Order で拡縮・回転・移動の適用順を確認し、意図した見た目にする

Info CHOP情報 📊

SVG TOPは Info CHOP による詳細情報取得に対応しています。

TOP固有情報 🖼️

resx: TOP の出力解像度 X (ピクセル単位)
resy: TOP の出力解像度 Y (ピクセル単位)
aspectx: アスペクト比 X
aspecty: アスペクト比 Y
depth: 3D テクスチャ / テクスチャ配列の深度 (2D テクスチャでは 1)
gpu_memory_used: TOP が消費している GPU メモリ量 (MB 単位)

汎用オペレータ情報 🔄

total_cooks: プロセス開始からのクック回数
cook_time: 最後のクック時間 (ミリ秒)
cook_frame: 最後にクックされたフレーム番号
warnings: 警告数
errors: エラー数

代表的な取得チャンネル 📊

resolution_x / resolution_y: 出力テクスチャの幅・高さ (ピクセル)
aspectx / aspecty: 出力テクスチャのアスペクト比 (横 / 縦)
depth: ピクセルフォーマットのビット深度 (8 / 10 / 16 / 32)
num_components: 出力チャンネル数 (1=Mono / 2=Mono+Alpha or RG / 3=RGB / 4=RGBA)
gpu_mem_used: GPU メモリ使用量 (バイト)、最適化判断の指標

トラブルシューティング ⚠️

よくある問題と解決策 🔧

❌ Problem: SVG が表示されない / 真っ黒になる
✅ Solution:

File パラメータのパスが正しく、拡張子が .svg になっているか確認
ファイルを後から差し替えた場合は Reload を 0 から 1 に変えて強制再読み込み
Background Alpha が 0 かつ背景しか映っていない場合、SVG 自体の描画範囲が出力外にないか Transform を確認

❌ Problem: 輪郭がギザギザ (ジャギー) になる
✅ Solution:

Anti-Alias が 1x (Off) になっていないか確認
Anti-Alias を 8x (High) や 16x (High) に上げて輪郭を滑らかにする
出力解像度が低すぎる場合は Common Page の Output Resolution で十分な解像度を確保

❌ Problem: GPU メモリ消費が大きい
✅ Solution:

Anti-Alias を 32x など過剰な高倍率にしていないか確認し、必要十分なレベルに下げる
Common Page の Output Resolution を必要なサイズまで下げる
後段で繰り返し使う場合は Null TOP でキャッシュ的に固定して再ラスタライズを避ける

参考資料 📚

その他 🔗

公式リソース 📖

この記事はLLMと共に内容を執筆、更新しています。
最新バージョンとの項目差異など、情報の不一致を見つけた心優しい方はXもしくはInsta、メールなどよりサイト管理者までご連絡ください😎

まる。

お仕事のご依頼はDM又はメールにて。
━━━━━━━━━━━━━━━━━
Python/Touchdesigner/M5Stackをこよなく愛すフルスタックエンジニア。
専門は生理心理学、趣味はヨガやサウナ、EMS電気風呂などヘルスケア全般。
脳波や筋電、心拍を中心とした生体情報のセンシング＆インタラクティブアートづくりがライフワーク。

普段はワントゥーテンという会社で空間演出エンジニアをしています。
リファラル採用お繋ぎできますので、我こそはという尖った方は経歴と希望職種添えてDMください(エンジニア以外、営業職等もOK)。
ご飯行きましょう。

↓日常垢
Instagram：＠malmal0v0

概要 📖 – ベクター画像を読み込む

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Load Page 📁

ファイル読み込み 📂

Anti-Alias .antialias 🎚️

背景設定 🎨

Transform Page 🎯

Transform Order .xord 🔢

Rotate Order .rord 🔄

トランスフォーム値 🎚️

Common Page 🔧

Output Resolution .outputresolution 🖼️

Resolution .resolution 📐

Resolution Menu .resmenu 📋

Use Global Res Multiplier .resmult 🔢

Output Aspect .outputaspect 📏

Aspect .aspect 📐

Input Smoothness .inputfiltertype 🎚️

Fill Viewer .fillmode 🖥️

Viewer Smoothness .filtertype 🎛️

Passes .npasses 🔁

Channel Mask .chanmask 🎨

Pixel Format .format 🎨