PNGアイコンをSVGへ変換し、統一したUIキットを作る

フォルダー全体を一度に変換しないでください。最も単純なアイコン、最も複雑なアイコン、曲線の図形、抜き部分のあるアイコンを含む小さなグループから始めます。そのサンプルでSVGのルールを定め、残りへ適用します。悪いトレース判断が何十ファイルにも広がる前に見つけられます。

変換自体は1つの段階にすぎません。使えるUIキットには、共通の座標系、統一した見た目のサイズ、予測できる色の動作、編集可能なパス、実際の製品での納品確認も必要です。

作業の要点

1. PNGセットを一覧にし、重複や欠落した元データを探します。
2. 代表的なアイコンを選び、共通の格子、余白、塗り・ストロークの方式、色のルールを決めます。
3. サンプルを実際のパスへ変換します。
4. シルエット、ノード、抜き部分、色領域を調べます。
5. 1つのベクターエディターでセットを揃え、残りのアイコンを変換、確認します。
6. 実際のUIと素材の処理経路で、書き出したSVGを確認します。

どのPNGアイコンをSVGにすべきか判断する

明確な境界を持つフラットなアイコンは、トレースに適しています。他の画像には別の方法が必要です。変換ツールを開く前にフォルダーを整理します。

残った元データがPNGではなくアイコンコンテナーなら、先に対応するICOからSVGまたはICNSからSVGの手順で復元します。その後、以下の同じUIキットのルールに合わせて図柄を揃えます。

SVGのファイル名は、ピクセルがベクターパスになった証明ではありません。SVG埋め込みコンテンツの仕様にあるとおり、<image>要素でラスター画像を正当に含められます。出力が長方形画像1つとして選択される、深い拡大でブロック状になる場合は、キットへ追加する前に埋め込みラスターの確認を行います。

トレース前にUIキットのルールを定める

個々にはきれいなアイコンも、並べると不統一に見える場合があります。元PNGがまだ従っていなくても、先にセットのルールを書きます。

共通の座標空間を選ぶ

同じコンポーネントサイズを共有するアイコンには、同じviewBoxを使います。数値は24×24や16×16でなくてもよく、システムに合う必要があります。SVGはviewBoxの長方形を表示ビューポートへ対応付けるため、外側の寸法を同じにするだけでは、内部の図形の配置も揃っていない限り不十分です。SVG 2座標系の仕様がこの対応を定義しています。

次を記録します。

• 共通のviewBox
• 意図した視覚的な中心とベースライン
• 最小の内部余白
• 通常の見た目の範囲を意図的に超えてよい部分

塗りかストロークの方式を選ぶ

塗りのシルエット、編集可能なストローク、または明記した混合方式のどれでアイコン群を構成するか決めます。ストローク式の輪郭セットには、統一した線端、線の結合部、見た目の太さが必要です。塗りのセットには統一した抜き部分と縁の扱いが必要です。トレースは細いストロークを閉じた輪郭へ変える場合があるため、プレビューだけでなく形状を調べます。

色の制御方法を決める

単色のシステムでは、出力先がアイコンのトークンへ対応付けられる、繰り返し使える色ルールを使います。多色アイコンでは、許可するパレットと変更できる領域を決めます。目に見える目的がない限り、アンチエイリアス由来の小さな類似色は残しません。

代表的なサンプルを先に変換する

難しいケースを示す4〜6個を選びます。円や円弧、斜線、小さな文字の穴や開口、最も密なアイコンを含めます。多色を使うセットなら、それも1つ含めます。

1. PNGを準備する

入手できる最もきれいな出力を使います。偶発的な背景長方形を除き、切り抜きを揃え、小さくぼけた元画像をピクセル数だけのために拡大しないでください。品質を失わずPNGからSVGへ変換する元画像の準備ガイドが、トレース用の細部を扱います。

すべての原本の未変更コピーを残します。記憶に頼らず元画像とSVGを比較できる方が、修正を判断しやすくなります。

2. サンプルアイコンをトレースする

自動ベクター化ツールか、デザインソフトのトレース機能を使います。Illustratorの現在のImage Trace（画像トレース）は、色、パス、コーナー、ノイズの設定を提供します。Figmaの現在のVectorizeはトレース後に色モードを提供し、複雑な画像や低解像度画像ではうまくいかない場合があると説明しています（Adobeの画像トレース、FigmaのVectorize）。

ブラウザーで行うなら、サンプルをPerfectVectorのPNGからSVGへの変換ツールへアップロードします。原本とプレビューを比較し、図形と色領域を調べ、ベクターエディターで揃えるSVGをダウンロードします。フォルダー全体に進む前に代表グループを処理します。

Figmaがキットの原本エディターなら、Figma Vectorizeと外部SVGの手順の比較で同じサンプルに両方を試せます。編集が必要な穴や色領域も含め、読み込み後の図形で判断します。

3. プレビューだけでなくパスを調べる

各結果をベクターエディターで開き、図形を選びます。SVGパスはコマンドと座標で作られ、直線や曲線はSVG 2パス仕様で定義されます。必要なのはシルエットを保つ十分なノードであり、共通の目標数ではありません。

次を探します。

• 単純な曲線の周囲の密なノード列
• 不要な点や背景長方形
• 同じ縁の重複コピー
• アンチエイリアスによる小さな色の断片
• トレース中に閉じた穴や文字の内側
• 選択可能なパスの代わりのラスター長方形1つ

単純な図形が点に埋もれていたら、簡略化前にノードが多すぎる場合の診断を使います。強い修正は角を動かし、小さな空間を閉じる場合があるため、編集パスをPNGと比較します。

アイコンを1つの系列として揃える

サンプルの構造が良好になったら、共通の格子へ置き、一緒に確認します。ここでセットがシステムになります。

セット全体の確認

実際の画面サイズと、大きな編集倍率でセットを確認します。

視覚的な補正は認められます。円と四角を同じ大きさに見せるには、円を四角の枠より少し外へ伸ばす必要がある場合があります。ルールは全図形を同じ幾何学的境界に押し込むことではなく、明記した格子に基づく一貫した見え方です。印刷用の視覚的スケジュールカードの手順は、この区別を画像枠、別のラベル、寸法を確認したPDFページに適用します。

カード配置前に図形編集が必要な日課の画像セットでは、代表的な絵1つに視覚支援用の図柄変換ツールを使います。ラベルを分け、変換した絵が意図した意味を残すか確認します。

PerfectVectorでの使い方

PerfectVectorは、元画像の準備とセットを揃える段階の間のトレースに適します。代表的なPNGサンプルを編集可能な図形へ作り直し、このキットに重要な基準で結果を判断します。

1. 各アイコンのシルエットと抜き部分は残っているか
2. 意図した領域を選び、色を変えられるか
3. 曲線のノード数は扱いやすいか
4. 手作業やアプリ内トレースより、結果を揃えやすいか

サンプルが合格なら、適する残りのPNGを変換し、同じ原本ファイルへ取り込んで全体を確認します。失敗なら、さらに処理する前に元画像や方法を変えます。PerfectVectorは、デザインシステムに属する視覚的な位置合わせや命名の判断を置き換えません。

元データを失わず整える

ファイルは次の種類に分けて管理します。

• 元データの保存： 未変更PNG、元デザインファイル、出所の記録
• 編集可能な原本： 共通格子上に揃えたベクターアイコン
• 納品出力： 製品が使う最適化済みSVG

形状の編集は原本で行い、納品ファイルを再生成します。個別の出力を手で編集するとコピー間で修正がずれるため避けます。色変更、形状変更、キャンバス修正が必要なら、SVG編集の手順を使い、修正した形状を原本セットへ戻します。

再利用するWebアイコンを納品するなら、図柄の承認後にSVG symbolスプライトの手順へ進みます。アプリへ入れる前にsymbol ID、入れ子の参照、座標範囲、描画ルール、インスタンス名を確認します。canvasで描く画面なら、Path2DでSVGパスをcanvasへ対応付け、座標変換、色、開口、描画用の解像度をSVG原本と比較します。

Penpotがデザインライブラリの出力先なら、サンプルSVGをキャンバスへ入れ、残りを加える前に色領域1つと輪郭1つを確認します。PenpotのSVG読み込みガイドは、プロジェクトファイルの読み込みと図柄の挿入を分け、ネイティブ図形、生のSVG内容、編集可能なラベルの確認を説明します。見た目は正しくても必要な編集ができないアイコンを見つけられます。

納品前に、デザインライブラリ、アプリのコンポーネント、ビルドや最適化など、重要なすべての環境で数個を試します。使用するなら無効状態や反転色も確認します。構造がきれいでも、色やサイズの前提がコンポーネントに合わなければキットとして失敗します。Androidでは、アプリへ入れる前にPNGからVectorDrawableへの読み込み確認項目でビューポート、塗り、パスの複雑さ、読み込みの対応を確認します。Godotでは、GodotのSVG読み込み確認項目でテクスチャの読み込み型を選び、ラスターサイズ、オーバーサンプリング、対応図柄を確認します。Unityでは、UnityのSVG読み込み確認項目でエディターに合う読み込み機能を選び、UI Toolkitかスプライトの出力先を確認します。

SwiftUIでは、SVGアセットカタログと描画の手順で、名前付き画像リソース、オリジナル・テンプレートの色の動作、最終表示サイズを確認します。

UIキットの納品確認項目

• すべてのトレースが、入手できる最もきれいな元画像を使っている
• アイコンが明記したviewBox、余白、位置合わせのルールを共有する
• 実際のUIサイズで見た目のサイズと太さが揃う
• 塗りとストロークがシステムの方式に従う
• 色領域を承認パレットやトークンのルールへ予測可能に対応付けられる
• 曲線が忠実さに十分なノードを使い、明らかな過密さがない
• 偶発的な埋め込みラスター、背景枠、重複した縁がない
• ファイル名とコンポーネント名が一意で安定している
• 製品の通常の最適化処理後に出力セットを確認した
• 元データ保存、編集可能な原本、納品ファイルを別に保管する

よくある質問

修正前にすべてのPNGを一括変換してもよいですか？ 可能ですが、代表サンプルの方が安全です。最も難しい形を含む数個を変換し、格子とパスのルールを定めてから残りを処理します。そうしないと、1つの悪い判断で全体に同じ修正が必要になります。

すべてのSVGアイコンに同じviewBoxを使うべきですか？ 同じUIコンポーネントを共有するアイコンでは、共通のviewBoxが通常役立ちますが、内部の図形には視覚的な調整が必要な場合があります。座標空間を揃えつつ、円、尖った形、特に密なアイコンには、明記したはみ出しや余白の変更を認めます。

UIアイコンのノード数はいくつがよいですか？ 共通の数はありません。意図したシルエット、角、抜き部分を残す最少のノードを使います。同程度の複雑さを比べ、単純な曲線に密な点の連鎖があれば調べます。

SVGセットが完成してもPNGを残すべきですか？ はい。元PNGや以前のデザインソースを保存します。トレースをやり直す際の出所と見た目の参考になります。編集には揃えたベクター原本を使い、そこから納品SVGを生成します。

参考資料

1. W3C — SVG座標系、変換、単位 — SVGのビューポート、座標系、viewBox、表示領域への図柄の対応を定義します。
2. W3C — SVGパス — 編集可能なSVGパスを構成する直線と曲線のコマンドを定義します。
3. W3C — SVG埋め込みコンテンツ — SVGにベクターパスではなくラスター画像を含められることを示します。
4. Adobe Illustrator — 画像トレースによるベクター化 — 現在のラスタートレース手順と編集可能なパスの出力を説明します。
5. Figma Learn — 静的画像をベクターレイヤーへ変換 — 現在のVectorizeの手順、色モード、元画像の制限を説明します。

---

フォルダー全体ではなく、最も難しい数個から始めます。サンプルPNGをSVGに変換し、パスと色領域を調べ、採用した結果をUIキットのルールに合わせてから、作業を全体へ広げます。