RecraftでPNGをベクター化し、編集可能なSVGとして渡す手順

既存画像をRecraftでベクター化する判断、部分編集、SVG書き出し後の検収を整理します。

AIものさし編集部

手元のPNG素材を拡大して使いたい、色や輪郭を後から直したい場合は、Recraftのベクター化が候補になります。ただし、写真を含む素材もすべて変換するのではなく、元画像の特徴と納品先で必要な編集を先に確認します。SVGを書き出せたことだけで、元画像を正確に再現できたとは判断しません。

この記事は、既存のラスタ画像をRecraftでベクター化し、部分修正して受け手へ渡すための手順です。公式資料に基づく整理で、実際の変換・編集・書き出しは行っていません。以下の素材と検収条件は説明用の架空例です。

元画像のまま使うか、変換するかを決める

まず、何を変えるためにベクターが必要かを一文にします。「大きく使う」だけでなく、マークの色を変える、輪郭の曲がりを調整する、同じ図を複数の大きさで使う、など編集の目的を具体化します。

Recraftの公式ガイドは、単純な形、明確な境界、少ない色の素材を変換に向く例として挙げています。一方、写真、柔らかい陰影、細かい模様やノイズを含む画像では、見た目が変わり、手直しが増える可能性を説明しています。Recraft:Vectorization tips(新しいタブで開く)

表は横にスクロールできます

元素材と目的最初の判断確認すること
単色の案内マークを大小で使うベクター化を検討穴、角、細線が残るか
商品写真を大きな紙面へ置く元の写真データを確認必要な寸法での品質。変換で写真らしさを失わないか
線画の一部だけ色を変える変換後の部分編集を検討色を変えたい部分を独立して選べるか
正式な文字表記を修正したい文字を入力し直す工程を検討変換だけで編集可能な文字へ戻ると決めない

すでに編集可能な元データがあるなら、それを使えるか先に確認します。PNGを変換し直すより、元の図形や文字を修正する方が意図を保てる場合があります。新しい図案が欲しい場合も、既存画像の再現と新規生成は目的が違います。

変換前に、原本と採用条件を残す

元画像は上書きせず、出所、使用してよい範囲、変更できない形や文字を確認します。画像の背景が図柄の一部なのか、透明にしたい余白なのかも決めます。変換後だけを見ていると、細かな欠落や意図しない背景を見落としやすくなります。

例えば、社内案内用の架空のマークを次の条件で受け付けたとします。

  • 外側の円と、内側の二つの穴を残す。
  • 指定した一つの図形だけを青へ変え、隣の図形は変えない。
  • 文字は含めず、部署名は利用先で別に入力する。
  • SVGの編集用データと、確認用画像を分けて渡す。

この例なら、「SVGになった」より具体的に採否を確認できます。実際の案件では、穴の数や配色を元資料の条件に置き換えてください。元データが不鮮明で形を判別できないなら、AIに推測して埋めさせる前に原本を探します。

Recraftで変換し、必要な箇所を整える

公式のSVG Converterページは、画像のアップロード、Vectorize、編集・SVG書き出しの流れを案内しています。同ページのアップロード欄ではJPEG、JPG、PNG、WebP、最大5MBと表示されています。この条件をStudio全体やAPI全体の共通上限へ広げず、使う入口の表示を確認します。Recraft:SVG Converter(新しいタブで開く)

作業は次の順で進めます。

  1. 原本とは別に、変換対象の画像を用意する。
  2. 対象画像をアップロードし、Vectorizeを選ぶ。
  3. 原本と比べ、輪郭、穴、背景、重なりを確認する。
  4. 必要な部分の色や形を調整する。
  5. 採用条件を満たした版をSVGとして書き出す。

公式はAdjust colorsによる色数の削減やパレットでの配色変更も案内しています。ただし、色数を減らすと、区別したい部分まで同じ色になる可能性があります。変更後には、用途上必要な区別が残るかを確認してください。

2026年7月9日付のVector Editor紹介では、Studioで画像を選び、図形をダブルクリックしてアンカーポイントを動かしたり、一つの図形だけを再配色したりする操作が説明されています。Recraft:Vector Editor(新しいタブで開く)

想定した部分を選べない場合は、操作を繰り返す前に、ベクター化した結果を選んでいるか、必要な形がどのように分かれているかを見ます。元画像と同じ部品構成や、希望どおりのグループが自動で復元されると前提にしません。修正量が大きければ、単純な原本へ戻すか、編集環境で描き直す方がよい場合もあります。

書き出したSVGを受け手の環境で確認する

Studio上で編集できたことと、納品先で必要な編集ができることは別です。書き出したファイルを、受け手が使うソフトで開き、予定する変更ができるかを確認します。ファイル名の拡張子だけを検収条件にしないでください。

先ほどの架空のマークなら、確認項目は次のようになります。

表は横にスクロールできます

確認採用条件戻す理由の例
元画像との照合外円と二つの穴が残る穴が一つ埋まった
部分編集指定部分だけ青へ変更できる隣の図形も一緒に変わる
利用寸法予定する小サイズでも形を判別できる細線や穴がつぶれる
保存後の確認保存して開き直しても必要な形と編集性を保つ画像としてしか扱えない

確認用画像がきれいでも、編集データの問題を解消したことにはなりません。反対に、図形を選択できても、小さく使ったときの読みやすさは別に確認します。修正した後は、変更した箇所と、変えてはいけない隣接部分をもう一度見ます。

渡す版と、残る制約をそろえる

納品時は、元画像、採用したSVG、確認用画像を取り違えない名前で分けます。受け手には、確認した編集ソフト、変更できた部分、別に入力する文字、未確認の用途を短く伝えます。元画像の完全再現や、すべてのソフトでの編集互換性を確認していないなら、その範囲まで保証しません。

料金や書き出し条件は、利用するアカウントの画面と現行の案内で確認してください。無料という入口の見出しだけから、必要な回数、編集、出力、利用条件まで同じだと判断しないようにします。

既存素材を保ったまま修正したい場合は、変換の前後を比べ、必要な部分を編集し、納品先で開き直すところまでを一組にします。変換で手直しが増える素材では、元のラスタ画像を使う、元データを探す、描き直すという選択も残してください。

参考資料

公式資料の確認日:2026年10月23日。掲載の検収表は設計例で、実変換の結果ではありません。

質問から自分に合うAIを探す