ロゴファイル · PNG から SVG へ
PNG のロゴを SVG に変換し、使う前に確認する
印刷会社、看板業者、ウェブ開発者からロゴを「SVG で」と頼まれたのに、手元には PNG しかない。変換自体はすぐに終わります。その結果が使えるベクターファイルかどうかを見極めるには、もう数分かかります。その数分で、ぼやけた看板や、周りに白い箱が付いたロゴを防げます。
このガイドでは、Ciyo の Vector 操作でシンプルなロゴマークを変換し、その後に確認すべき点を挙げます。マークは架空の文具店 Fold のもので、Ciyo で生成しました。変換は 2026年9月18日に実行しました。結果はキャンバス上で比較しましたが、SVG を外部のエディターで開いてはいません。
変換でできることとできないことを知る
PNG はピクセルを保存します。SVG は、どのサイズでもくっきりしたままの形を保存できます。トレースは、縁がどこにあるかを推測してピクセルを形に変えます。数色のベタ塗りでできたフラットなマークは、きれいにトレースできます。写真、柔らかい影、グラデーション、小さな文字はうまくいきません。ピクセルがほのめかしているだけの縁を、トレースする側が作り出さなければならないからです。
また、拡張子が .svg のファイルでも、中身は埋め込まれたビットマップにすぎない場合があります。そのファイルは、形式が違うだけで依然としてラスター画像です。
2026年9月13日に r/Inkscape に投稿された「Raster pixels to vector」（ラスターのピクセルをベクターに）という投稿が、この問題をよく示しています。スクリーンショットでは、ピクセルアートのカードの横にベクター化を試みた結果が並んでいますが、人物の大部分が消え、カード全体がベタ塗りの色の塊で埋まっています。
| 元の PNG | 予想される結果 |
|---|---|
| 1〜2色のベタ塗りのフラットなマーク | きれいな形になる。最も良いケース |
| 小さな文字を含むロゴ | 文字がぼやけたりくっついたりする可能性がある。すべての文字を確認する |
| グラデーションや柔らかい影 | 色の段差（バンディング）や多数の小さな形が生じる |
| 低解像度またはぼやけたファイル | ぼやけをなぞった、ガタついた縁になる |
| 写真やイラスト | 非常に重いファイルになる。通常はラスターのままにする |
ピクセルアートのアイコンをベクターにトレースした、Inkscape ユーザーのスクリーンショットです。トレース全般の問題を示すもので、Ciyo は関係していません。
手元でいちばんきれいな元画像を用意する
手に入る中で最も大きく、最もくっきりした PNG を、できれば無地の背景で使います。モックアップの影や透かしなど、ロゴの一部ではないものは取り除きます。マークの一部ではない色付きの箱の上にロゴが載っている場合は、変換する前に直します。
今回の元画像は 1,024 × 1,024 のフラットなマークで、白地に角の折れたチャコールの紙を描いたものでした。トレースにとってはほぼ最良のケースです。
画像メニューから Vector を実行する
PNG を Ciyo のキャンバスに置いて選択します。画像ツールバーの末尾にある「…」メニューを開きます。メニューには Adjust、Crop、Vector、Flip & Rotate があります。Vector を選びます。
Vector は従量課金の操作です。今回の実行では、別の設定パネルを挟まずにすぐに開始し、クレジット残高が 2 減りました。結果は元の画像の横に表示されました。
ベクターが得られたことを確かめる
結果には「SVG 1」というラベルが付き、ツールバーは写真編集の操作の代わりに Vector と Download を表示するよう変わりました。このラベルが、Ciyo が結果を SVG 素材として保存したことの最初の確認になります。
2つを並べて比べます。形は元画像と一致しているはずです。同じ比率、同じ切り欠き、同じ角の丸みです。トレースでは、鋭い角が丸くなったり、わずかな曲線がまっすぐになったりすることがあります。
送る前に SVG を確認する
角や細い隙間を拡大します。ベクターの縁は拡大してもくっきりしたままですが、トレースの誤りはかえって目立ちます。透明なマークが必要なら背景が本当に消えているかを確認し、色が近い値ではなく正確なブランドカラーの値になっているかも確かめます。
可能であれば、ダウンロードしたファイルをベクターエディターで開いて、形の数を数えます。シンプルなマークなら、パスの数は少ないはずです。何百もの小さな断片があるなら、元画像がぼやけていたか、細かすぎたということです。
| 確認項目 | 重要な理由 |
|---|---|
| 400% ズームでの縁 | トレースのガタつきは大判の印刷で目立つ |
| 背景 | マークの後ろの白い箱は、暗い色の看板でよくある想定外の問題 |
| 色 | 印刷会社が合わせるのはファイルの値であり、あなたの意図ではない |
| パスの数 | 断片が多いとファイルを編集しにくい |
| 小さな文字 | くっついた文字はトレースではなく描き直す必要がある |
描き直すべきときを見極める
ロゴに文字、細い線、重なり合う複数の色が含まれる場合は、トレースを修正するより、デザイナーが一から描き直すほうが速いことがあります。トレースは最終ファイルではなく、下絵のレイヤーとして使いましょう。
新しいマークなら、先に形を決め、変換は最後に行います。下書きのたびに変換すると、不採用のアイデアまで完成品のように見えてしまいます。
PNG から SVG への変換に関する質問
PNG を SVG に変換すると、ぼやけたロゴはきれいになりますか？
いいえ。トレースは受け取ったピクセルをなぞるため、ぼやけた元画像からは不ぞろいな形しか得られません。手元でいちばんくっきりしたファイルから始めてください。
Ciyo の Vector 操作は無料ですか？
いいえ。従量課金の操作です。2026年9月18日のこの変換では、残高が 2 クレジット減りました。価格は変わることがあるため、残高と料金ページを確認してください。
写真を SVG に変換できますか？
できますが、通常は多数の形を含む大きなファイルになります。写真はラスター画像のままにしておきましょう。
きれいな PNG をベクターにする
ロゴを Ciyo にアップロードして Vector を実行し、印刷に回す前に SVG を確認しましょう。