ProcreateでSVGは作れる？作品をベクターに変換する方法

Procreateの対応する読み込み・書き出し形式にはSVGがありません。公式のファイル形式一覧には、ラスター作品、PDF、アニメーション、3D形式がありますが、SVGは含まれていません。確実な手順は、Procreateで作品を作り、PNGを書き出し、別のツールでベクターパスにトレースすることです。使えるSVGになるよう、両方の段階を準備する方法を説明します。

要点

• ProcreateはSVGの読み込み・書き出しに対応していません。 現在の公式形式一覧にSVGはありません。
• 作品を描く場所としては適しています。 Procreateで描き、PNGを書き出し、別の場所でベクター化します。
• 背景レイヤーを非表示にして、高解像度の透明PNGを書き出します。トレースに使う輪郭をきれいにし、周囲の四角を防ぎます。
• トレースを考えて描きます。 単色の塗りと明確な線は向きますが、質感のある絵画的な筆遣いやグラデーションは向きません。
• その後トレースします。 Illustrator、無料のInkscape、PNGからきれいなSVGを作る専用の画像ベクター変換ツールを使います。
• PhotoshopやCanvaと同じく、作品を描くこととベクターにすることは別の作業です。

ProcreateがSVGを作れない理由

Procreateはピクセルで描画します。ブラシを動かすたび、格子上に色の点を置くため、自然な質感のある絵画表現が得意です。SVGは反対で、実際の座標を持つ数学的なパスとして図形を保存するので、どのサイズでもぼやけず拡大できます。描いている間にピクセルをパスへ変換しているわけではないため、書き出しにもベクター形式がありません。

現在の読み込み・書き出し一覧にSVGはなく、PDFの読み込みではベクターとテキストをラスター化するとハンドブックにあります。一部の文書からラスター化した内容を使えても、SVGパスの編集・書き出しツールではありません。別の描画アプリの作品には、Sketchbookからベクターへの書き出し手順で、保管するマスターとトレース後の確認を説明しています。

行き止まりではありません。Procreateは全工程ではなく、最初の段階ということです。

Conceptsでも描く場合は、ネイティブのストロークには異なる書き出し方法があります。編集可能な絵をラスター化する前に、Conceptsの画像トレースとSVG書き出しをご覧ください。

Procreateで描き、ベクターにトレースする手順

3段階で、中央の段階だけがProcreateの外で行われます。

手順1：Procreateで作品を描く

いつものようにデザインし、後で役立つ2つの習慣を取り入れます。次の節で説明しますが、特に大切なのは色や要素ごとにレイヤーを分けることです。後でベクターの色を分離しやすくなり、Cricutで切る、レイヤー付きで売る場合に役立ちます。

手順2：透明PNGを書き出す

ここが受け渡しです。背景レイヤーを非表示にして透明にし、ShareからPNGを書き出します。透明でないと、作品周囲の四角もトレースされ、後から消す必要がある不要な四角の問題になります。トレースは渡した細部しか使えないため、できるだけ高解像度で書き出してください。その後、ベクター化する場所へファイルを移します。

手順3：PNGをベクター化する

ここでPNGを本物のパスにトレースします。選択肢はいくつかあります。

• 専用の画像ベクター変換ツールは、PNGからきれいなSVGを返し、通常は手間が少なく済みます。
• Adobe Illustratorは、すでに契約していれば画像トレースを内蔵しています。
• Inkscapeは無料で、調整項目の多いビットマップトレースがあります。
• Adobe Frescoは手動のベクターブラシによる描き直し手順に対応し、単純な取り込み図形と混在レイヤーでは異なる方法があります。

どれでも、目標はきれいな少数ノードのパスを持つ本物のベクターです。PNGを.svgで包んだだけの、ぼやけた偽ベクターではありません。

iPadで受け渡すなら、Amadineの内蔵トレースとSVG読み込みの確認に従ってください。イラストを続ける前に、色、穴、編集可能なパスを比較します。

きれいにベクター化するための描き方

多くのチュートリアルが省く部分ですが、きれいなSVGと乱れたSVGを分けます。トレースは輪郭を追うため、明確できれいなほど結果も良くなります。

• 単色の塗りと鮮明な線を使います。 均一な線や硬いブラシはきれいな図形になります。質感、粒子、水彩のブラシは、何千もの斑点の縁を追わせ、肥大化したノード過多の結果になります。質感が意図的なら、トレース前に水彩ベクターで何を残すかを判断します。
• 色を平坦に保ちます。 滑らかなグラデーションや柔らかな陰影には明確な縁がなく、不格好な帯になったり、単純化されたりします。平坦な色領域がきれいにトレースできます。
• 色ごとにレイヤーを分けます。 Procreateで1レイヤー1色にすると、SVGでも色ごとに編集可能な図形へ対応させやすく、レイヤー付きカットファイルに向きます。
• 実用的なピクセル寸法で作業します。 iPadのキャンバスやレイヤー制限の範囲で、大きくきれいなラスターを使えば、輪郭の情報を多く渡せます。

この習慣で描けばトレースが大半を処理します。柔らかな陰影に満ちた質感のある絵では、どのツールも救えません。

PerfectVectorでの例

PerfectVectorの役割はトレース段階です。書き出したPNGをアップロードし、見える領域が編集可能なパスにどう再構築されたか確認します。シルエット、色、穴、ノード構造を確認した後で、対応するベクター形式をダウンロードしてください。

ProcreateのPNGをベクター化し、使う前にパスを確認できます。カットするなら、実際の機械の手順でもCricut向けSVGの確認を行ってください。

適するのは、文字、線画、太いイラスト、ロゴなど、Procreateのフラットなグラフィック作品です。豊かな質感のデジタル絵画は、どのツールでもきれいなベクターにはならないため、PNGを残します。

SVGが不要な場合

SVGを探す必要がない場合もあります。

• オンライン投稿やプリント販売なら： 高解像度PNGやJPGで十分です。SVGにする利点はありません。
• 細かな絵画やポートレートなら： ラスターを残します。ベクター化は平坦化し、品質を損なうだけです。
• 大きくしたいだけなら： すでに高解像度なら、変換せず十分に拡大できるかもしれません。

ベクター化が特に役立つのは、カット、大幅な拡大、色分離が必要な場合です。ステッカー、Etsyカットファイル、衣類、Cricutなどです。初めてなら、SVGファイルとは何かをご覧ください。

よくある質問

ProcreateはSVGを書き出せますか？ いいえ。ラスターのアプリなので、SVGは書き出し候補にありません。PNG、JPG、PSDなどで作品を書き出し、別のベクター化ツールでSVGにトレースします。ProcreateもCommunityフォーラムでベクターアプリではないと説明しています。

Procreateはベクターファイルを作れますか？ 現在の書き出し一覧にSVGや一般的なベクター編集形式はありません。SVGが必要なら、Procreateで描いてPNGなど適したラスターを書き出し、ベクターツールでトレースするか描き直します。

ProcreateでSVGを開いたり編集したりできますか？ SVGは対応読み込み形式にないため、編集可能なパスとしても、対応するラスター化文書としても、読み込みを前提にしないでください。パスの編集にはIllustratorやInkscapeなどを使います。対応するPDFの読み込みでは、ベクターと文字のラスター化が説明されています。

Procreateの絵をSVGにするには？ きれいな単色の線で描き、色を別レイヤーにし、背景を非表示にして高解像度透明PNGを書き出します。そのPNGを画像ベクター変換ツールで本物のSVGにし、編集可能なパスとして開き、拡大しても鮮明か確認してください。

SVGにするとProcreate作品が乱れるのはなぜですか？ 通常は質感のあるブラシ、柔らかな陰影、グラデーションが、曖昧な輪郭をトレースさせるためです。主要な図形を単色と鮮明な線で描き直すか、よりフラットなデザインを選ぶと、不要な点だらけではなく、きれいな結果になります。

出典

1. Procreate Handbook：ファイルの種類：現在の読み込み・書き出し形式にSVGがありません。
2. Procreate Handbook：読み込みと共有：PDFのベクター・文字のラスター化を含む読み込み動作です。
3. Procreate Handbook：共有：PNG書き出しと透明部分の設定です。
4. Adobe Illustrator：画像トレース：デスクトップのラスタートレースの選択肢です。
5. Inkscape Beginners’ Guide：画像のトレース：ビットマップトレースの手順です。

---

Procreateで完成したデザインを本物の拡大できるベクターにしたいですか？透明PNGを書き出し、きれいなSVGにトレースして、カットや販売の前にパスを確認してください。