ICOファイルを編集可能なSVGにする方法
ICOには同じアイコンの複数サイズのビットマップが含まれることがあります。最良の元画像を取り出し、編集可能なSVGパスへトレースし、描き直しの判断をする方法を解説します。
目次
ICOファイルは編集可能なSVGにできますが、まず何を復元するのか理解してください。ICOは通常、同じアイコンのサイズや色深度が異なるビットマップをまとめた容器です。抽出を待つベクター原本が眠っているわけではありません。本当の変換では、最良の埋め込み画像を選び、そのピクセルを新しいパスへトレースします。
元のデザインファイルが失われた場合に、きれいなファビコン、アプリのマーク、古いインターフェースのアイコンを復元できる場合があります。ただし、最大のビットマップにもなかった曲線や細部は復元できません。可能なら先に元のSVG、AI、ソースファイルを探し、復元しか実用的な方法がない場合にICOをトレースします。
失われた元データがWindowsの.icoではなくMacの.icnsなら、ICNSからSVGへの変換ツールを使い、トレース前に正しいアイコンコンテナーを検査します。
復元の原則
- ICOにはベクターオブジェクトではなく、複数のラスター表現が含まれる場合があります。
- 最小のファビコンサイズではなく、最大の有効な埋め込み画像から始めます。
- 実際のパスへトレースし、編集可能か、透明が正しいか確認します。
- サブピクセルのアンチエイリアスは、デザインの細部ではなく画面描画として扱います。
- ビットマップが小さすぎて元の曲線を定義できない場合は、単純な形状やブランドに重要な形状を描き直します。
ICOファイルの中身
ICOは、さまざまな表示サイズや表示能力に合わせたアイコン表現をまとめます。Microsoftのアイコンの資料は、アイコンリソースに複数サイズや色深度の画像を含められると説明しています。小さいサイズでも読み取りやすいよう、デザイナーが手作業でピクセルを調整したため、各版が少し違う場合があります。
そのため、復元には2つの問題があります。
- どの表現を元画像にするか。 通常は最大の画像に最も多くの形状情報があります。
- どの違いが意図的か。 小さなファビコンは、小さい表示で読めるように太いストローク、少ない細部、位置をずらしたピクセルを使う場合があります。これは視覚的な調整であり、必ずしも原本の形状ではありません。
任意の小さな項目を通知せずトレースする変換ツールでは、同じコンテナー内により良い画像があっても、ブロック状のSVGになることがあります。ビットマップをSVGへ埋め込むだけのツールでは、編集可能なパスはまったく得られません。
元画像の選択は、トレース前の復元段階と考えてください。最も多くの輪郭情報を示す表現から始め、小さいサイズ向けの視覚的な修正のどれを復元したデザインに残すか決めます。
抽出、SVGへの埋め込み、トレース、描き直しの違い
これらの操作は混同しやすいものです。
| 操作 | 何をするか | 編集可能なパス | 適する場合 |
|---|---|---|---|
| 抽出 | 埋め込まれたPNG/DIB表現を1つ保存する | なし | 最良のラスターコピーだけが必要 |
| SVGへの埋め込み | ビットマップをSVG文書内へ置く | なし | 復元にはほとんど役立ちません |
| トレース | 選んだピクセルをベクター図形として再構築する | あり | アイコンが明確で、元のベクターが失われた |
| 描き直し | 意図を持って形状を作り直す | あり | 元画像が小さい、単純、またはブランド上重要 |
オンライン変換後は簡単に確認します。SVGを開き、拡大して図形を選びます。画像全体が1つとして選択される、または拡大した縁がブロック状なら、ピクセルを包んだ結果です。個々の図形と制御点があればトレース結果です。
より広い画像ベクター化のガイドでは、トレースが形式名の変更ではなく再構築である理由を説明します。
PerfectVectorによるICO元画像の選び方
PerfectVectorはデコード前にICOディレクトリと参照されるデータを調べます。静的なPNG表現と、一般的な非圧縮Windowsビットマップ表現に対応します。有効で対応する項目から、次の優先順位で一意に選びます。
- ピクセル面積が最大
- 面積が同じならビット深度が高い
- 面積と深度が同じならPNG
- 最後の同順位判定は元の順序が早いもの
ICOの項目は、異なるページやアニメーションフレームではなく、1つのアイコンの解像度違いと想定されるため、この選択は通知せず行います。選んだ表現をローカルで検証済みのPNGへデコードし、通常のベクター化処理へ送ります。
ICO内のアニメーションPNGデータは静的なアイコンとして扱いません。CURカーソルファイルは別形式であり、Microsoftのリソースファイル形式の資料にあるとおり、ディレクトリ項目にホットスポット座標を持ちます。この手順の対象ではありません。
PerfectVectorは、項目を推測させる代わりに、対応する最良の表現から始めて静止画を編集可能なSVGパスに作り直すことで復元を支援します。選択は一意ですが、品質の上限はICOに保存されたピクセルで決まります。
アイコンを復元する手順
1. より良い原本を探す
Webサイトのリポジトリ、アプリのリソース、ブランドのフォルダー、古いデザイン出力、作成者を確認します。SVG、AI、EPS、実際のパスを持つPDF、さらには大きな透明PNGも、小さな画面用のICOより良い元データです。
2. ICOを複数サイズでプレビューする
利用できるならアイコンビューアーやファイル検査ツールを使います。最大の表現を探し、小さいものと比較します。消える細部、太くなるストローク、ピクセル格子に合わせて変わる縁を記録します。
3. 復元したSVGの用途を決める
- 編集可能な原本や大きな表示： 最大の表現に従い、形状を修正します。
- 新しいファビコン： デザインを保ち、小サイズを新たに書き出し、個別に確認します。
- 印刷や看板： 最大のビットマップが重要な曲線をすべて明確に示す場合だけ進めます。それ以外は描き直します。
- 保存用の抽出： トレースしたSVGとともに、最大の埋め込みラスターも保存します。
4. 最良の表現をベクター化する
ICOからSVGへの変換ツールへファイルをアップロードします。PerfectVectorは対応する最大の項目を選んで正規化し、アイコンをパスへトレースします。
5. SVGを図柄として調べる
シルエット、穴、直線、繰り返す角の半径、対称性、色の領域を確認します。不透明な元画像から来た背景長方形は削除します。ベクターエディターで開き、図形を選択して色を変えられることを確認します。
6. 大きいサイズと小さいサイズで確認する
大きな拡大では、揺れる曲線や多すぎるノードが分かります。小さい表示は別の問題を示します。形状がきれいな原本でも、16や32ピクセルでは弱く見える場合があります。SVGから新たにラスターサイズを書き出し、必要なら派生画像を調整します。古いピクセルをすべてまねるために原本を歪めないでください。
そのままトレースすべきでないもの
階段状のピクセル
小さいアイコンの斜線や曲線の縁は四角いピクセルでできています。意図的なピクセルアートでない限り、復元するSVGは各段に小さな四角を描くのではなく、意図された曲線を推定するべきです。
アンチエイリアスの縁
柔らかい縁の色は、特定の背景上でビットマップを滑らかに見せます。すべての縁の色を図形にするとSVGが膨らみ、別の背景上でハローが見える場合があります。明確な輪郭を復元し、透明を確認します。
小サイズ向けの視覚的な修正
デザイナーが16ピクセル版でストロークを太くしたり隙間を広げたりする場合があります。すべてのサイズを平均して混乱した原本を作らないでください。最大の表現から始め、小さい項目は今後の書き出しの参考にします。
描かれた市松模様
画像内の市松模様は透明ではありません。ICOに焼き込まれていれば、四角としてトレースされます。透明背景のガイドは、実際のアルファと塗られた背景ピクセルの区別を説明します。
手作業の描き直しが適する場合
次の場合は描き直します。
- 最大の有効な表現も小さい
- 円、角丸長方形、対称性の正確さが必要
- テキストや文字がある
- 現在の商標やブランド素材である
- 少数の単純な図形のはずなのにトレースで多くの断片ができる
- 1つの復元物ではなく、統一したアイコンの一群が必要
単純なアイコンは、ピクセルをそのまま追うトレースの後に修正するより、長方形、円、ベジェ曲線で作り直す方が速いことが多いです。不規則な細部が十分にあり、トレースで役立つ編集可能な土台が得られるマークでは、復元の価値が高まります。
ロゴにはロゴのベクター化方法の検証手順を適用します。特に、復元したSVGを原本として残し、各納品形式をそこから書き出す助言を参照してください。
よくある質問
ICOファイルはすでにベクターですか？ 違います。ICOには通常、1つ以上のビットマップアイコン表現が含まれます。複数サイズをまとめられますが、画像はピクセルのままです。編集可能なSVGにはパスへのトレースや描き直しが必要です。
ICO内のどの画像をベクター化すべきですか？ 通常は最も多くの形状情報を持つ、最大の有効な表現から始めます。大きな元画像がある場合、小さい項目は原本ではなく、小サイズでの視覚的な調整の参考にします。
ICOからSVGにしたのにピクセル状になるのはなぜですか？ 変換ツールがパスをトレースせず、SVGの外枠内にビットマップを埋め込んだ可能性があります。ベクターエディターで開き、アイコン全体が1つの画像として選択されるなら、ラスターのままです。
ICOの変換で元のSVGを正確に復元できますか？ できません。保存されたピクセルから図形を再構築できますが、元の制御点、レイヤー、ラスター化で除かれた細部は復元できません。ブランドに重要な制作物は検証するか描き直してください。
PerfectVectorはCURも変換しますか？ しません。CURはICOに似ていますが、カーソルのホットスポットの意味を追加します。ICOの復元手順ではCURを普通のアイコンとして受け付けません。
参考資料
- Microsoft Learn — アイコンについて — 複数サイズ、複数色深度のアイコンリソースを説明します。
- Microsoft Learn — リソースファイル形式 — ICO画像の項目、PNG/DIBデータ、カーソルのホットスポットフィールドを定義します。
- Microsoft Learn — カーソルリソース — カーソルリソースとホットスポット座標を説明します。
- PerfectVector — ICOからSVGへの変換ツール — 製品の現在の元画像選択とトレースの手順を示します。
元のデザインファイルが本当に失われたなら、ICOをアップロードし、最良の表現をSVGパスとして復元します。その後、シルエット、透明、繰り返す形状、小サイズの書き出しを調べます。確認を通過してから、新しい編集可能な原本として残してください。
