PNG からの ロゴ ベクトル化——細部を失わずに SVG 化する

PNG からの ロゴ ベクトル化——細部を失わずに SVG 化する

ロゴが PNG であるとします。SVG が必要——ウェブ用、Retina ディスプレイで鮮明に表示されるメール署名用、ベクターを要求する名刺印刷業者用。デザイナーを雇って再作成するなら数日。自動ベクトル化ツールなら数秒。この記事では、きれいにベクトル化する方法、これらのツールが失敗する場面、そして失敗時の対処を順を追って説明します。

使用ツール：paste-to-download.com/ja/vectorize——ブラウザベースの PNG/JPG → SVG コンバーター、アップロード不要、ウォーターマークなし。

なぜロゴに SVG が必要か

ロゴはあらゆるサイズで正しく見える必要があります。32 × 32 ファビコンと 4000 × 4000 の展示会バナーは同じロゴですが、ラスター（PNG、JPG）は一つのサイズしか持てません——他は粗くなる（拡大時）か無駄に大きい（縮小時）かのどちらか。

SVG（Scalable Vector Graphics）はロゴを数学として記述します——曲線、塗り、ストローク。数学はあらゆるサイズで完璧にレンダリングされる。モダンブラウザとほとんどのデザインソフトでは標準対応。

理想：マスターロゴを SVG として保存、必要に応じてラスター版を書き出す。

自動ベクトル化が実際に行うこと

ベクトル化ツール（「トレース」や「ラスタライズ」とも呼ばれる）はラスター画像を走査し、似た色の領域を特定。各領域について、その輪郭をたどる閉じたパスを計算。出力は領域ごとに 1 パス——それがあなたの SVG。

出力品質は次に依存：

• ソース解像度——入力が大きい = 拾える詳細が多い
• エッジの鋭さ——きれいな縁はきれいにトレースされる、ぼけた縁は波打つパスを生む
• 色数——少ない色 = シンプルな出力、多い色 = 多いパス
• アンチエイリアスアーティファクト——ラスタライズ由来のソフトエッジが偽のミクロカラー領域を作る

これを理解すれば、ソースを前処理してクリーンなベクター出力を得られます。

ステップ 1：手元の最高解像度のソースから始める

黄金律：原典のベクターファイル（AI、EPS、PDF、SVG）があるならベクトル化せずそれを使う。

ラスターしかない場合、最大かつ最もクリーンなものを選ぶ：

• 2000 × 2000 の PNG は常に 200 × 200 のサムネイルより良いベクトル化結果
• サイトからスクショしたロゴは、そのサイトが使っているソースファイルより悪い
• 印刷物のロゴをカメラで撮った写真は、デジタルファイルよりはるかに悪い——JPEG 経由の再エンコード＋写真ノイズが偽の色領域を多数作る

ソースが小さかったりノイズが多い場合、まず /ja/upscale の Lanczos モードでクリーンアップ＋拡大してからベクトル化。

ステップ 2：必要ならソースをクリーンアップ

ベクトル化ツールが好むもの：

• きれいな白か透明の背景
• ベタ塗り（グラデーションや写真テクスチャ不要）
• 鋭いエッジ（アンチエイリアスは OK；ぼけはダメ）

ベクトル化ツールが苦手なもの：

• JPEG アーティファクト（8×8 ブロックごとに偽領域）
• グラデーション（複数の離散カラーステップに解釈される）
• ドロップシャドウ（低 alpha のリングの並びとしてベクトル化）
• 写真背景（葉一枚、雲一片がパスになる）

前処理：

• 背景削除 /ja/remove-background でロゴが複雑な背景にある場合
• 軽くぼかす JPG アーティファクトがあるなら（直観に反するが偽エッジを軟化）
• コントラストを上げる ソースが薄い場合
• 彩度を上げる ベクトル化器が色領域を明確に区別できるように

ステップ 3：ベクトル化ツールを開いて正しいモードを選ぶ

/ja/vectorize を開く。ロゴをドロップ。モードを選ぶ：

• 高コントラスト：1〜2 色ロゴ向け（黒地白、有色地黒）。1〜2 パスを出力。
• カラー：ベタ塗りマルチカラーロゴ向け（3〜8 の独立色）。色領域ごとに 1 パス。
• ディテール：小要素や細い線が多いロゴ向け。多くのパス、大きな出力。

現代の多くのブランドロゴ（クリーン、フラット、2〜4 色）にはカラーモードが既定。クラシックなモノグラムや単色ロゴには高コントラスト。

ステップ 4：閾値と色数を調整

重要な 2 スライダー：

• 閾値（0〜255）：暗明を区別する明度の閾値。高いほど多くのピクセルが「暗」領域に。既定 128（中灰色）。ロゴのエッジが原画と一致するまで調整。
• 色数：SVG で使用する塗り色の上限。2 色ロゴは 2、5 色ロゴは 5 に設定。高すぎるとノイズ、低すぎると本来別色が統合される。

paste-to-download のベクトル化器は両スライダーともライブプレビュー。プレビューが原画と一致するまで調整、その後エクスポート。

ステップ 5：SVG をエクスポートしブラウザで検証

ベクトル化してダウンロードをクリック。得られた .svg ファイルを直接ブラウザで開く（アドレスバーにファイルをドラッグ）：

• PNG と同じに見えるはず
• Ctrl+= で（Mac は ⌘+=）ズーム——1000% でもエッジが鋭いままのはず
• ブラウザウィンドウサイズ変更——SVG はあらゆるサイズで鋭利に再描画

崩れて見えたら（ギザギザのパス、欠けた色、変な形）ステップ 4 に戻り別の設定で。

ありがちな失敗と修正

「ロゴのエッジが波打つ」

ソースは低解像度すぎたか JPG 圧縮アーティファクト付き。より高解像度のソースを試す、またはソースをまず /ja/compress で PNG に通す（JPG アーティファクトを除去）、それからベクトル化。

「いくつかの色が統合された」

色数が低すぎる設定。原画の各塗り色が独自のパスを得るまで増やす。

「ロゴの周囲に中間色のハロー」

アンチエイリアスアーティファクト。色数を下げる（ハローを主色に統合）か閾値を上げる（薄いエッジピクセルを排除）。

「ロゴ内の小さな文字が読めない」

文字はラスターからベクトル化する中で最も難しいもの。2 つの選択肢：(a) 元のフォントを使い SVG 内で文字を手動で組み直す（企業は商用入手可能なフォントを使うことが多い；フォント名を検索）、(b) ベクター近似を受け入れ後で修正。

「原画のグラデーションがバンディングのステップに」

ベクトル化器は連続グラデーションを簡単に表現できません。手動でバンディングステップを <linearGradient> か <radialGradient> 要素に置き換える必要があります。多くのロゴでは割に合わない；グラデーションが必須なら Illustrator/Figma でブランド色仕様に従って再作成。

デザイナーを雇うべきとき

自動ベクトル化が得意なのは：

• 内部利用（スライド、内部サイト、プロトタイプ）
• 印刷物からの初期変換
• シンプルな形状の小型ロゴ

苦手なのは：

• 何年も使う最終ブランドグレードアセット
• 複雑な手描き要素を含むロゴ
• 超大型印刷（バナー、ラッピング）

最終ブランドアセットのワークフロー：自動ベクトル化 → 出力を出発点に → Inkscape か Illustrator で手動クリーンアップ。自動ベクトル化された出発点から作業するデザイナーは 3 時間ではなく 30 分で済みます。

ブラウザローカル：ロゴで特に重要な理由

ロゴはローンチ前の機密であることが多い。それを未知のサービスにアップロードしてベクトル化するのは漏洩リスク。

/ja/vectorize はブラウザタブ内で完結。Potrace ベースのベクトル化器は WebAssembly にコンパイルされ、ローカルで実行、ロゴはデバイスから出ません。Network パネルで確認：ロゴデータの外向きトラフィックはゼロ。

TL;DR

1. 手元の最も高解像度かつクリーンなソースから始める
2. 必要に応じて背景削除またはソースのノイズ除去
3. /ja/vectorize を開き正しいモード選択
4. 閾値と色数を、プレビューが原画と一致するまで調整
5. エクスポート、ブラウザで複数のズームレベルで検証

結果：16 px のファビコンから 16 ft の展示会バナーまで完璧にスケールするロゴ。