ベクター編集ツールでシェイプを結合する方法

更新日

シェイプを結合するには、EditItAllのベクター編集ツールでシェイプを描画または配置し、対象のシェイプを選択して、パスファインダーの操作を適用します。合体はシェイプをひとつにまとめ、前面シェイプ減算は最前面のシェイプを差し引き、交差は重なった部分だけを残し、中マドは重なった部分を取り除きます。結果はSVGとして保存できる、きれいなひとつのパスになります。

今すぐ実行——無料、ブラウザで

Open the vector editor

シェイプの結合はブール演算で行う

シェイプの結合とは、すべての曲線を手描きする代わりに、いくつかのシンプルな図形からひとつの複雑な形を作り出す方法です。ベクターツールでは、これはブール演算パスファインダーと呼ばれることが多い機能)によって行われ、重なり合ったシェイプを足したり切り取ったりできる領域として扱います。

EditItAllのベクター編集ツールには、合体(ひとつに統合)、前面シェイプ減算(最前面のシェイプを差し引く)、交差(重なった部分だけを残す)、中マド(重なった部分を取り除き、残りを保持する)の四つが用意されています。それぞれ選択範囲をひとつのパスに変換します。

シェイプを結合する手順

どの操作でも手順は同じです。

  1. 結合したいシェイプを描画または配置します。シェイプツールでもペンツールでも作成できます。
  2. 意図したとおりに重なるよう配置します。前面シェイプ減算では重ね順が結果を左右します。
  3. それらのシェイプをまとめて選択します。
  4. 必要なパスファインダー操作を適用すると、シェイプがひとつのパスに融合します。

形状は厳密な演算で計算されるため、新しいエッジは元のシェイプが接していた位置に正確に配置され、継ぎ目に隙間や細かい破片が残ることはありません。結果は通常のパスなので、その後もペンツールで調整を続けられます。

どの操作を選ぶべきか、書き出しの方法

作りたいものに合わせて選びましょう。合体はロゴの文字や図形を溶接してひとつのシルエットにします。前面シェイプ減算はシェイプに穴を開けたり切り欠きを作ったりします。交差はあるシェイプを別のシェイプの輪郭に合わせて切り抜きます。中マドは二つのシェイプが交差する部分をくり抜きます。

結合したシェイプができあがったら、完全に編集可能な状態を保つためにSVGとして保存するか、くっきりしたラスター画像が必要な場合は2×でPNGを書き出します。ブラウザでのベクターファイルの扱いについて詳しくは、ブラウザでSVGファイルを編集する方法をご覧ください。すべてお使いの端末上で実行され、ページの読み込み後はオフラインでも動作します。

さっそく試しますか?

無料・登録不要。開いたファイルがデバイスの外に出ることはありません。

よくある質問

合体と交差の違いは何ですか?+

合体は選択したすべてのシェイプをひとつの輪郭にまとめます。交差はその逆で、シェイプが重なる部分だけを残し、それ以外はすべて破棄します。

前面シェイプ減算で違うシェイプが消えてしまうのはなぜですか?+

前面シェイプ減算は、最前面にあるシェイプをその下のシェイプから差し引くため、結果は重ね順によって決まります。残したいシェイプを背面に移動するか、切り取り用のシェイプを前面に移動してから、もう一度適用してください。

結合した後もシェイプを編集できますか?+

はい。結果はひとつのパスになるため、ペンツールでアンカーポイントや曲線を調整したり、塗りと線のスタイルを変更したり、別のシェイプとさらに結合したりできます。

結合した部分のエッジはきれいに仕上がりますか?+

はい。エディターは厳密な演算で形状を計算するため、重なったエッジは正確に一致し、シェイプの結合が不正確な場合に生じがちなわずかな隙間や重なりが発生しません。

結合したシェイプをSVGとして保存できますか?+

はい。作業内容をSVGとして保存すれば、結合したパスを完全に編集可能な状態で保てます。ラスター版が必要な場合は2×でPNGを書き出すこともできます。すべてブラウザ内で完結します。

関連ガイド

「ベクターとSVG」のガイドをもっと見る →