PNGとJPGをSVGに変換する：画像ベクター化の完全ガイド

PNGやJPG形式のロゴしか手元にないチームは、少なくありません。Webに載せる分には問題なくても、名刺の印刷、看板の制作、パネルへの拡大の段階で、輪郭がぼやけ始めます。このビットマップをSVGベクターに変換すると、図形はパスとして記録され、拡大は元のピクセル数に依存しなくなります。同じ1つのファイルで、Web、販促物、大判出力を同時にまかなえます。

PixMindの画像ベクター化ツールはPNG、JPG、WebPの入力を受け付け、幅と高さはともに256ピクセル以上。変換完了後、SVGファイルをそのままダウンロードできます。画像ベクター化を開くで手持ちのロゴをアップロードし、アップロード、ベクター化、確認、ダウンロードの4ステップを進めるだけで、最初のベクター版が手に入ります。

要点

• ロゴ、アイコン、フラットなイラストのような境界が明確な図形は、SVGへの変換に向いています。写真や複雑なテクスチャは同じ処理に向かず、必要なのはベクター化ではなく拡大です。
• このツールはPNG、JPG、WebPを受け付け、幅と高さはともに256ピクセル以上。1回に1枚の変換で、利用前にアカウントへのログインが必要です。
• 変換はrecraft-vectorizeモデルが行い、SVGファイルを出力します。「SVGをダウンロード」で保存されるファイル名はvectorized.svgです。
• 結果パネルには、1×、2×、4×のズーム確認が組み込まれています。納品前は、曲線、透かし、細線、小文字の4か所を重点的に確認します。

どんな画像がSVG変換に向いているか

SVGはパスと図形で図柄を記述し、拡大時にはソフトウェアが再計算して描画します。PNGとJPGはピクセルの格子で画面を記録するため、元のサイズを超えて拡大すると、ぼやけやギザギザが出ます。同じロゴがWebでは鮮明で、看板に印刷するとぼやける違いは、ここにあります。

画像が変換に向くかの判断は、ファイルそのものではなく、図柄の構造で行います。

写真系の素材を無理に変換すると、何千何万もの微小な色ブロックのパスが得られるだけです。ファイルは膨らみ、編集は難しく、「少ないパスで自由に拡大」という意味も失われます。この種の画像はビットマップのまま保ち、大きなサイズが必要なときは画像アップスケールツールで処理しましょう。

アップロード前に、元画像をどう整理するか

変換結果の上限は、元画像が決めます。アップロード前に数分かけるほうが、変換後の修繕の繰り返しよりお得です。

1. 最も解像度の高い版を探す。幅と高さがともに256ピクセル以上は、ツールの最低条件です。条件を満たしたうえで、元画像が鮮明なほど、輪郭の細部にも根拠が生まれます。
2. 四周の余分な余白を切り取る。大きな空白は画面の割合を占め、同じサイズの中で主体の図柄を小さくしてしまいます。
3. 背景の邪魔が明らかなときは、先に背景を除去。派手な地の色は、主体と一緒にパスにされてしまいます。先に図柄を背景から分離すると、結果はよりきれいです。
4. 元の比率を保つ。サイズを合わせるために引き伸ばすと、図柄の比率が歪み、円は楕円になります。

PixMindで最初のベクター変換を完了する

ログインして画像ベクター化のページに入ります。流れは4ステップです。

1. アップロードエリアをクリックしてファイルを選ぶか、PNG、JPG、WebPを破線の枠に直接ドロップします。どちらかの辺が256ピクセルを下回ると「画像サイズが小さすぎます（実際のサイズ）、最小要件は256×256ピクセルです」と表示されるので、前のステップに戻って、より鮮明な元画像に替えます。
2. 左側のプレビューで、対象の図柄か確認します。違えば、プレビュー右上の削除ボタンを押して選び直します。
3. 「ベクター化」をクリック。ボタンは「ベクター化中…」に変わり、進捗のパーセントが表示され、処理の完了後、右側の「ベクター」パネルに結果が表示されます。
4. 「SVGをダウンロード」をクリックすると、ファイルはvectorized.svgとして保存されます。結果が気に入らなければ、横の「再ベクター化」で再送信できます。

「ベクター化」をクリックすると、アップロードした画像はまずタスクストレージに入り、それからrecraft-vectorizeモデルに渡されます。ここで2つのことを区別してください。ベクター化は、あなたがアップロードしたこの画像を読み、それをベクターのパスとして記述し直すもので、図柄は元画像そのものです。AIのテキストから画像生成、画像から画像生成は、文字の記述から別の新しい画像を生成するもので、プロンプトがどれだけ近くても、出力は「似た別の画像」にすぎません。既存のブランド資産を保ちたいなら、前者の道が正解です。変換に失敗した場合は、ページに具体的なエラーメッセージが表示されるので、表示に従って調整し、「再ベクター化」で再試行してください。

ズームして、輪郭と細部を確認する

サムネイルではすべて問題なさそうに見えて、問題はたいてい拡大の後に現れます。結果パネルは1×、2×、4×の3段階のズームとリセットボタンを備えており、ダウンロード前に画像を4×で開いて、4か所を確認します。

1. 曲線：円弧と角が滑らかか。余分なノードや段差がないか。
2. 透かし：アルファベットのO、図柄のネガティブスペースのようなくり抜きの部分が保たれているか、縁がきれいか。
3. 細線：ヘアラインやアウトラインが、途切れたり互いにくっついたりしていないか。
4. 小文字：最も長い単語と、最も小さい文字のサイズが、まだ判読できるか。

それから1×に戻して、色を全体で見ます。元画像のやわらかいグラデーションと影は、変換後にブロック分けされた近似になることがあり、受け入れられるかは、このロゴの実際の用途次第です。このステップで見えるトレードオフは、のちにロゴにPNGとSVGのどちらを使うべきかを紹介するときに掘り下げます。

SVGを次のデザインに使う

vectorized.svgは、ごく普通のSVGファイルです。Webに載せるときは、imgタグで参照しても、ページに直接インラインで埋め込んでも構いません。主要なデザインツールはSVGのオープンやインポートにおおむね対応しており、図柄をキャンバスに置けば、全体の色変更も自由な拡大もでき、他の要素との組み合わせのレイアウトも可能です。

1点だけ、先に知っておいてください。図柄の中の文字は、変換後は輪郭のパスであって、編集可能なフォントのテキストではないため、文字の変更やサイズの変更は、デザインツールでの入力し直しになります。使えると確認したSVGは、ブランドのマスターファイルとして、サイトのナビゲーション、販促物、大型の出力に活用できます。あわせて透明のPNGを1部保管し、SVGを受け付けない場面に備えましょう。

変換結果が思わしくないときの対処

結果が基準に届かないときは、まず問題の分類を特定し、対応する工程に戻って対処します。

再試行では、変数を1回に1つだけ変えます。まず元画像だけを替え、次に背景だけを処理し、2回の結果を比べれば、改善を原因に結び付けられます。変換結果がほぼ使える域なら、SVGをベクター編集ソフトに読み込んで、ノードの清掃をする方法もあります。変換後の輪郭が全体的に荒く、元画像の系統的な整理が必要な場合は、同じテーマの次の記事で、改めて詳しく扱います。

よくある質問

ファイルの拡張子をSVGに変えれば済みますか？

いけません。拡張子を変えても変わるのはファイル名だけで、内容はまだピクセルの格子です。デザインソフトは実際の内容でファイルを解釈するので、拡大すれば同じようにぼやけます。SVGが自由に拡大できるのは、パスと図形をテキストで記述しているからで、それには本当の変換が必要であり、名前の変更では済みません。

変換後も文字は、編集可能なフォントのままですか？

いいえ。ベクター化は文字の筆画を輪郭のパスに変えるもので、字形の見た目は保たれますが、もはやフォントのテキストではなく、直接文字を変えたり、サイズやフォントを替えたりはできません。コピーを変える必要があるときは、デザインツールで古いパスを削除し、該当するフォントで入力し直します。元のフォントが見つからないときは、先にフォントを確認してから組み直しましょう。

透明背景の画像は変換できますか？

できます。ツールは形式とサイズで入力をチェックするので、透明の領域を含むPNGもそのままアップロードして変換でき、結果パネルも市松模様の背景でプレビューされ、透明の領域を確認しやすくなっています。ダウンロードしたSVGは、透明に対応する場面でそのまま使えます。一部の掲載先にはファイルの要件が異なる場合があるので、先方のプラットフォームの要件に従ってください。

ロゴをアップロードして、最初のSVGを作る

よく拡大されるあのロゴから始めましょう。元画像を整理し、変換を終え、4×で輪郭を確認したら、vectorized.svgをブランドのファイルの保管庫に保存します。名刺も看板もWebも、これからはこれ1つで。手持ちのロゴをアップロードして、最初のSVGを生成してダウンロード。