ロゴはPNGとSVGのどちら：ウェブ・ポスター・印刷での選び方

同じロゴ1枚でも、サイトのナビゲーションでは24ピクセルの高さしかなく、展示会の大型パネルに印刷するときは幅2メートルまで広がります。PNGかSVGかは、まず置かれるシーンで判断します。ウェブと製品UIではSVGを優先。ロゴがパスとして記録され、どんなサイズでもソフトが描き直します。ビットマップしか受け付けないアップロード入口（SNSアイコン、一部の文書）には透過PNGを1枚。ポスター、看板、印刷物にはSVG、またはSVGから書き出したベクターファイルで、拡大してもぼやけません。手元にPNGしかない場合も一から作り直す必要はなく、まずシーンに必要な形式を確認し、足りない分を後から補えば十分です。

要点

• ウェブ、UI、繰り返しの拡大・色変更が必要な場面ではSVG。図形はパスで記録され、拡大時に描き直されるため、エッジがぼやけません。
• ビットマップのアップロードしか受け付けない入口（SNSアイコン、一部のオフィスソフト）には透過PNGを。プラットフォームのSVG対応を望む必要はありません。
• シンボルロゴとロゴタイプにはSVGのマスターファイルを1部。写真系マスコットや複雑なテクスチャを含むブランド画像は、高解像度PNGを残します。
• SVGが必ずしもPNGより小さいとは限りません。ファイルサイズは図形の複雑さで決まり、選択の基準は用途であって容量ではありません。

3つの使用シーンから選び始める

最もよくある3つの納品タスクが、ロゴファイルの行き先のほぼすべてをカバーします。

サイトナビゲーションのロゴ。 ナビゲーションバー、フッター、モバイルUIのロゴは、画面密度ごとに異なるサイズで表示されます。ここではSVGが最適です。ブラウザがパスをリアルタイムに描画するため、小さなアイコン幅からフッターの大型バナーまでシャープさを保ちます。色を変えるときもファイルやコード上で完結し、同じファイルをそのままデザイナーに渡して編集を続けられます。

小さいSNSアイコン。 アイコンのアップロード入口は、通常JPGとPNGだけを受け付けます。透過背景のPNGを1枚用意すれば十分です。プラットフォームがアイコンを円形や正方形にトリミングしても、ロゴの周りに白い地の塊が付いてきません。アイコンの表示サイズは限られ、ビットマップの解像度でまったく足りるため、このシーンにSVGは要りません。

大判ポスターと印刷物。 ポスター、ロールアップスタンド、店頭サインはロゴを数十倍に拡大します。SVGはスケーリングの問題を根源から解決します。パスは解像度に依存せず、出力の大きさは使う側の工程で決まる。手元に小さなPNGしかない状態で引き伸ばすと、ぼけとジャギーが出ます。このシーンこそ、ベクターファイルが本当に必要な場面です。

PNGとSVGの違いはどこにあるか

両フォーマットの根本的な違いは、図形の記録方法です。PNGはピクセルのグリッドです。各点が1色を記録し、どれほど大きなファイルでもピクセル総数は固定。元のピクセルを超えて拡大すると、ソフトは既存のピクセルを引き伸ばして埋めるしかなく、エッジはぼけ、ジャギーが立ちます。SVGはパスと図形でロゴを記述します。線はどこから始まり、曲線はどう曲がり、領域は何色で塗るか。拡大時はこの記述に従って描き直されるため、エッジは常に滑らかです。

透過背景は両方でサポートされますが、仕組みが違います。PNGは透明ピクセルのチャンネルでロゴ周りのくり抜きを保持し、SVGはそもそも「地」がなく、図形そのものがパスの集合です。その後の編集は、より大きな分水嶺です。SVGは開いてすぐ全体の色変更、アンカーポイントの調整、分解と再構成ができ、PNGはピクセル単位で処理するしかなく、色ブロック1つ変えるにもビットマップソフトで領域を修正する必要があります。

ファイル容量は、しばしば誤解されます。図形が単純なら、SVGは少ないパスを記録するだけで済み、通常は小さく収まります。しかしグラデーションが豊富でノイズの目立つビットマップをSVGに変換すると、大量の断片パスに分解され、容量は元のPNGをはるかに超えることもあります。「SVGのほうが小さい」は正しくなく、正しいのは「単純な図形のSVGは小さい」です。

シーンとフォーマットの選択表

素材のタイプは、フォーマットのパラメータより選択を決めます。よくある3類のブランドグラフィックへの推奨です。

覚えるべき判断規則は、1本で足ります。輪郭が明瞭で色数が少ないほどベクター化する価値があり、画面が写真に近いほど、ビットマップ形式に留めるべきです。

PNGしかないとき、SVGを補う方法

SVGが必要だと確認したら、変換そのものは全体のごく一部の工程です。画像→ベクター変換でそのPNGをアップロードします。ツールはPNG、JPG、WebPに対応し、幅・高さとも256ピクセル以上。ログイン後は1回に1枚変換し、完了後にSVGファイルをダウンロードします。アップロード、確認、ダウンロード各ステップの画面は、同シリーズの「PNG・JPGをSVGに変換する方法」チュートリアルに完全な流れがあるので、ここでは繰り返しません。

変換が終わっても、結果は用途に合わせて仕分けが必要です。結果パネルでは1×、2×、4×の拡大が可能で、納品前に曲線、くり抜き、細線がきれいかを重点確認します。あらかじめ受け入れておくべき点が2つ。文字は輪郭パスになり、変換では編集可能な元のフォントには戻りません。コピーを変えるにはデザインツールで打ち直しが必要です。エッジの質は元画像で決まり、圧縮の強いPNGからは粗いエッジのSVGが生まれます。先により鮮明な元画像に替えてから変換しましょう。こうした元画像の整え方は、「ロゴをベクター化したらエッジが粗いときの対処法」で特集します。

ブランドファイル納品パックの整え方

フォーマットが決まったら、ロゴを名前の付いたファイル1組に整理します。誰に渡しても、やり取りの往復が要らなくなるためです。最小限使える納品パックは、こんな形です。

命名は統一のプレフィックス＋用途サフィックスで行い、バージョンが変わったら番号を更新します。複製して新しい名前を作らないこと。そうでないと、納品パックには遠からず logo-final-2.png と logo-最終版.png が並ぶ事態が起こります。濃淡両背景のプレビューは同じディレクトリに入れるのがおすすめで、受け取った側は一目で、ロゴが2種の背景で使えるかを確認できます。

印刷工程のファイルは、別扱いにします。印刷会社がベクターPDF、特定のカラーモード、塗り足しサイズを求める場合、これらの生産ファイルは対応するデザイン工程で処理します。SVGをソースにデザインソフトで変換と書き出しを行い、カラーの基準は印刷会社と項目ごとに確認します。画像→ベクター変換ツールの出力はSVGファイルで、印刷生産ファイルを直接生成するものではありません。

よくある質問

SVGは必ずPNGより小さいですか？

限りません。ファイルサイズは、内容の複雑さ次第です。単純な図形のSVGは少ないパスしか記録せず、通常は小さく収まります。グラデーション、影、ノイズの豊富なビットマップをSVGにすると大量の断片パスが生成され、容量はむしろ大きくなることもあります。フォーマット選択の基準は用途と拡大の必要性で、容量ではありません。

PNGを拡大するとぼやけます。必ずベクター化すべきですか？

このロゴのその後の用途次第です。たまに1回拡大するだけなら、より高解像度のPNGを書き出すだけで足ります。繰り返しの拡大縮小、全体の色変更、印刷での使用、長期のブランドマスターファイルとしての運用があって初めて、SVGを補う価値があります。写真系ロゴは変換しても編集しづらい断片パスが得られるだけで、高解像度のビットマップを維持するほうが現実的です。

印刷会社にPDFを求められたらどうしますか？

印刷会社の具体的な要件に従って、対応するデザイン工程へ渡します。SVGマスターファイルをデザインソフトに読み込み、先方の指定するPDF形式で書き出し、カラーモードや塗り足しなどのパラメータは印刷会社と項目ごとに確認します。画像→ベクター変換ツールが出力するのはSVGファイルで、印刷生産用のPDFはデザイン工程で仕上げます。

PNGしかないなら、まずSVGを1部補う

納品パックに足りない項目から始めましょう。PNGしかない場合は、まず画像→ベクター変換でSVGを1部作り、濃淡背景のプレビューで一度確認してから、マスターファイルにできるか判断します。このステップが済めば、サイト、アイコン、ポスターの3シーンすべてに、対応する形式のファイルが揃います。