← コラム一覧へ戻る
2026-07-12

SVGって使ってますか？

はじめに

Fusion テンプレートを制作していて、気づくことがあります。

「毎回同じ背景素材を作っている」

「色違いの素材を何種類も用意するのが手間」

「別のテンプレートでも、同じデザイン要素を使いたい」

こうした課題は、すべて SVG のテンプレート化 で解決できます。

単なる「SVG を Fusion に読み込む」という技術ではなく、SVG 素材をテンプレートとして管理し、自動生成・再利用する仕組み を構築することが重要です。

本記事では、私が実務で確立した「SVG テンプレート化による効率化」の具体的なプロセスを解説します。

---

1. なぜ Fusion テンプレートに SVG を統合するのか

Fusion では、背景・フレーム・装飾要素を直接ノードで作成することもできます。Polygon ノードで図形を描画し、Color ノードで色を変更する、という方法です。

しかし、複雑な図形を直接 Fusion で作成するのは、非常に手間がかかります。

それに対して、SVG は設計に特化したファイル形式 です。Adobe Illustrator や Figma で作成した複雑なデザインを、テキストベースのベクター形式で保存できます。

さらに重要なのが、SVG は プログラムで自動編集が可能 だということです。

例えば：

  • 背景色を赤から青に変更したい → SVG を直接編集
  • 同じデザインで 10 種類のカラーバリエーションを作成したい → Python で一括生成
  • デザイン更新が発生したとき、所有するすべてのテンプレートに反映したい → SVG を更新するだけで OK

こうした「効率化」が実現されるため、SVG テンプレート化は単なる「便利さ」ではなく、テンプレート制作の必須ワークフロー なのです。

---

2. Fusion 互換性を持つ SVG 設計ルール

DaVinci Resolve の Fusion が SVG を読み込むには、標準的な SVG ルールだけでなく、Fusion 独自の互換性要件 を満たす必要があります。

多くの制作者がここで失敗します。完璧に見える SVG も、Fusion での読み込み時に破綻することがあるからです。

最重要ルール：

ルール1：ViewBox の中心配置

ViewBox は 0 0 3840 3840 ではなく、中心座標を 1920×1920 に設定します：

`xml `

これにより、Fusion での拡大縮小時に、要素が中心から均等にスケーリングされます。

ルール2：グループタグの排除

`xml

`

タグは Fusion での階層構造を複雑にし、意図しない描画結果につながります。すべてのパスを 直下に配置します。

ルール3：ストロークの廃止

`xml

    `

    ストロークは、解像度別スケーリング時に線幅が不均等になります。すべてのラインを fill のみの閉じたパス に変換します。

    ルール4：ID の連番化

    `xml `

    id="element_1" のような複雑な命名は避け、id="path1" という単純な命名にします。これにより、Python での一括処理が容易になります。

    (※Fusion 互換性の細かなルールは、実装を通じて初めて理解できることがあります。複数の解像度で必ずテストしてください)

    ---

    3. Python による SVG 自動編集と色管理

    SVG テンプレート化の真価は、Python などのプログラムで自動編集できる という点にあります。

    私が実際に使用しているワークフローを紹介します。

    ステップ1：マスターSVG の作成

    基本デザインの SVG ファイルを 1 つ作成します。これを「マスター SVG」と呼びます。

    `xml `

    このマスター SVG に対して、Python で色を置換処理します。

    ステップ2：色置換スクリプトの作成

    `python import xml.etree.ElementTree as ET

    def create_color_variant(input_svg, output_svg, color_map): tree = ET.parse(input_svg) root = tree.getroot() for path in root.findall('.//{http://www.w3.org/2000/svg}path'): current_fill = path.get('fill') if current_fill in color_map: path.set('fill', color_map[current_fill]) tree.write(output_svg)

    使用例

    color_variations = { 'red': {'#FF6B6B': '#FF0000', '#4ECDC4': '#FF6B6B', '#45B7D1': '#FFB6C1'}, 'blue': {'#FF6B6B': '#0066FF', '#4ECDC4': '#003399', '#45B7D1': '#0099FF'}, 'green': {'#FF6B6B': '#00AA00', '#4ECDC4': '#00CC00', '#45B7D1': '#00EE00'}, }

    for variant_name, color_map in color_variations.items(): create_color_variant('master.svg', f'output_{variant_name}.svg', color_map) `

    このスクリプトにより、マスター SVG から 自動的に複数のカラーバリエーションを生成 できます。

    ステップ3：生成されたファイルの確認と配備

    Python スクリプトを実行すると、output_red.svg、output_blue.svg、output_green.svg という3つのファイルが自動生成されます。

    各ファイルは Fusion と互換性を保ちながら、異なる色を持つ状態になっています。

    ---

    4. 実例：カラーバリエーション生成による効率化

    私の制作した「washi frame（和紙風フレーム）」では、この方法を活用しています。

    導入前の作業フロー：

    1. Adobe Illustrator でフレームデザインを作成 2. 異なる色（赤・青・緑・金・銀など）で何度も保存 3. 各色を SVG に出力 4. 各 SVG を Fusion に読み込み 5. テンプレートの数だけ色別ファイルを用意

    この方法では、デザイン更新が発生したとき、すべてのカラーバリエーション（例：5種類）について修正が必要でした。

    導入後の作業フロー：

    1. Adobe Illustrator でフレームデザインを作成（1 度だけ） 2. SVG に出力 3. Python スクリプトで 5 つのカラーバリエーションを一括生成 4. 各 SVG を Fusion に読み込み

    結果として、デザイン修正時の作業量が 1/5 に削減 されました。

    また、新しい色を追加したいときも、Python スクリプトに色を追加するだけで OK。最初から最後まで 5 分以内に完了 します。

    ---

    5. テンプレート間での SVG の再利用性

    SVG をテンプレート化することで、別のテンプレートでも同じ素材を再利用 できます。

    例えば、私は複数のテンプレートを制作しています：

  • カータイマー（Jeep・Sports・Box・Eco）
  • 手書き風フレーム
  • 背景セット

これらはすべて異なるテンプレートですが、場合によっては 同じ背景素材を使いたい 場面があります。

従来は、背景素材を複数回、異なるテンプレートに埋め込む必要がありました。つまり、データの重複が発生します。

ところが、SVG テンプレート化によって、単一のマスター SVG ファイルを参照する という設計が可能になります。

各テンプレートは、参照するマスター SVG が同じため：

  • デザイン更新時に、すべてのテンプレートが自動的に最新の素材を使用
  • ファイルサイズが削減される
  • 管理が簡潔になる

---

6. 運用の実際：バージョン管理とドキュメント

SVG テンプレート化を本格的に導入する際、忘れてはいけないのが バージョン管理とドキュメント です。

複数のテンプレートが同一の SVG マスターファイルに依存している場合、マスター SVG の更新は全テンプレートに影響します。

推奨される管理方法：

ディレクトリ構造を以下のように整理します：

` templates/ ├── svg-assets/ │ ├── master/ │ │ ├── background-v1.svg │ │ ├── frame-v2.svg │ │ └── decoration-v1.svg │ ├── generated/ │ │ ├── background-red.svg │ │ ├── background-blue.svg │ │ └── ... ├── fusion-templates/ │ ├── car-timer-jeep/ │ ├── car-timer-sports/ │ └── handwritten-frame/ └── scripts/ └── svg_color_generator.py `

変更ログの記録：

マスター SVG を修正したときは、以下のメモを残します：

` background-v1 → background-v2

  • 修正内容：左側の装飾要素の色を調整
  • 影響するテンプレート：car-timer-jeep, car-timer-sports, washi-frame
  • 対応日：2026-07-13
`

こうすることで、後から「どのテンプレートがどのバージョンを使っているか」が一目瞭然です。

---

7. ユーザーにとってのメリット

テンプレート制作側の効率化も重要ですが、ユーザー側のメリット も無視できません。

SVG をテンプレート化した結果として、ユーザーは以下のメリットを享受します：

メリット1：バリエーションの豊富さ

単一のテンプレートから、複数のカラーバリエーションが提供される。ユーザーは自分の好みに応じて選択できます。

メリット2：カスタマイズの容易性

SVG ファイルはテキストベースなため、ユーザーが独自の色に変更したいとき、プログラムの知識がなくても手動で色コードを変更できます。

メリット3：高品質の統一性

すべてのテンプレートが同じマスター SVG に基づいているため、異なるテンプレート間でも デザイン言語の統一性が保たれます。

---

8. トラブルシューティング：よくある問題

SVG テンプレート化を導入する際、以下の問題が発生することがあります。

問題1：Fusion での読み込み時に色が反映されない

原因：SVG ファイルの名前空間が正しく記述されていない。

`xml

`

問題2：Python スクリプトで色置換が機能しない

原因：XML パーサーが名前空間を認識していない。

`python

名前空間を明示的に指定

root.findall('.//{http://www.w3.org/2000/svg}path') `

問題3：Fusion での拡大縮小時に図形がずれる

原因：ViewBox の設定が正しくない、または タグが残っている。

最初から厳密にルールを守ることで、これらの問題は回避できます。

---

終わりに

SVG をテンプレート化することは、単なる「技術的な工夫」ではなく、テンプレート制作というビジネスの根本を効率化する 戦略です。

複数のテンプレートを制作・販売している場合、SVG テンプレート化による効率化の恩恵は計り知れません。

最初は「設定が複雑」に感じるかもしれません。しかし、一度ワークフローを確立してしまえば、以降の作業は格段に楽になります。

さらに重要なのは、これが ユーザーの満足度向上にも直結する ということです。豊富なバリエーション、高品質な統一性、容易なカスタマイズ性。こうした要素がすべて、SVG テンプレート化から生まれるのです。

テンプレート制作を次のレベルへ進めたいなら、SVG テンプレート化の導入を強くお勧めします。

← コラム一覧へ戻る