Running crop…
``` 以下を`crop.js`として保存します。ローカルHTTPサーバーでフォルダーを配信し、`index.html`を開いてください。スクリプトは同じフォルダーのSVGファイルを取得します。 ```js (async () => { paper.setup(document.getElementById('work')); const source = await (await fetch('source.svg')).text(); const imported = paper.project.importSVG(source, { insert: false, expandShapes: true }); const crop = new paper.Path.Rectangle({ rectangle: new paper.Rectangle(60, 40, 160, 120), insert: false }); const delivery = new paper.Group({ insert: false }); const rows = []; for (const name of ['frame', 'triangle', 'leaf', 'outside']) { const operand = imported.getItem({ name }); if (!(operand instanceof paper.Path || operand instanceof paper.CompoundPath)) { throw new Error('Expected filled path: ' + name); } const result = operand.intersect(crop, { insert: false, trace: true }); if (Math.abs(result.area) < 1e-8) { rows.push({ name, removed: true }); result.remove(); continue; } result.fillColor = operand.fillColor.clone(); result.fillRule = operand.fillRule; result.strokeColor = null; result.opacity = 1; result.name = 'cropped-' + name; delivery.addChild(result); rows.push({ name, result: result.className, fill: result.fillColor.toCSS(true), area: result.area }); } delivery.translate(new paper.Point(-60, -40)); paper.project.activeLayer.addChild(delivery); const output = paper.project.exportSVG({ asString: true, precision: 6, bounds: new paper.Rectangle(0, 0, 160, 120) }); document.getElementById('svg-output').textContent = output; document.getElementById('receipt').textContent = JSON.stringify({ paper: paper.version, rows, export_precision: 6, viewport: [0, 0, 160, 120] }, null, 2); document.getElementById('status').textContent = 'Intersection/export executed. Save the exact visible SVG output as cropped.svg and open that saved file independently.'; })().catch(e => { document.getElementById('status').textContent = 'FAIL: ' + e.message; }); ``` 明示した名前のリストは、元データの描画順に従っています。残す結果はそれぞれ固有の単色の塗りを受け取り、その順序で追加されます。最初にすべての絵柄を1つのシルエットに結合すると、保持したい別々の色領域が失われます。[Paper.jsのブーリアン演算のガイド](https://perfectvector.com/ja/blog/paperjs-svg-booleans)では、結合と差分という別の作業を扱っています。 完全に外側にある黄色のオブジェクトは共通部分が空になるため、省かれます。小さな面積のしきい値は、このテストデータのための保護処理にすぎず、任意の絵柄から細部を削除してよいという意味ではありません。 残す形状を`(-60, -40)`だけ平行移動し、ゼロから始まる`160 × 120`のビューポートに書き出します。この移動で変わるのは、出力の座標原点です。不要な外側の形状を削除するのは交差演算であり、原点やビューポートを変えるだけでは削除できません。Paper.jsの[プロジェクト書き出しのリファレンス](https://paperjs.org/reference/project/)では、ここで使う明示的な範囲と数値精度を説明しています。 ## 実際のSVGを保存し、開き直して確認する 表示されたSVGマークアップを正確に`cropped.svg`へコピーします。プログラムのメモリ内プレビューだけに頼らず、保存したファイルを独立して開いてください。今回のテストでは、別のページで保存ファイルを読み込み、新しいPaper.jsスコープにインポートし、ブラウザーのSVG画像レンダラーで表示しました。  *独自に作成した多角形の絵柄と、実際の保存ファイルの検証です。クリッピングでは元のオブジェクトが残り、交差演算で書き出したファイルには残す形状だけが含まれます。任意のSVGやカッターとの互換性を示すものではありません。* 検証では、ファイル構造、形状、見た目を分けています。 * 書き出したSVGには結果のパス要素が3つあり、枠が開口部を保持するため、閉じた輪郭は4つあります。 * この条件を管理した出力には、切り抜き用補助オブジェクト、元のオブジェクトID、クリッピングパス、マスク、ラスター画像、効果要素はありません。 * 開き直した輪郭はすべて閉じており、直線の線分で構成されます。頂点はすべて出力範囲の`0…160`×`0…120`内にあり、許容誤差は`0.00001`ユーザー単位です。 * 意図した開口部は塗り形状に含まれず、レンダリングしたファイルでも透明です。確認した重なりの点では、オレンジの領域が引き続き青緑より上に表示されます。 * ブラウザーのレンダリング比較では、形状の調査とは別に、クリッピングだけのプレビューと切り抜いたファイルを同じサイズで比較します。 この長方形の範囲と直線で構成したテストデータでは、すべての頂点と閉じる辺を確認することで、保存された輪郭が範囲内に収まると分かります。ハンドルのある曲線や凹形の切り抜き範囲では、別の包含確認が必要です。いくつかの点を抽出するだけでは、同じ結果は証明できません。 画像比較では`640 × 480`のラスター画像を使い、いずれかのチャンネルの差が1を越えるピクセルについて、変更ピクセル0.5%までという許容値を明示しています。保存ファイルのレンダリングでは、307,200ピクセル中77ピクセル、約0.0251%に差があり、その基準に合格しました。ピクセル単位で同一ではなく、個々のチャンネルの最大差は255でした。これは見た目の比較の許容値であり、形状の許容誤差ではありません。端付近のアンチエイリアスと、実際に外側のパスが残っていることは、別の問題です。 この演算は、切り抜き領域の外側の形状を削除します。残した色付きオブジェクト間のすべての重なりを削除するわけではありません。内部の重なりは描画順のまま残り、検証した点で意図した最上部の色を確認しています。隠れている描画上の重なりをすべて解消することは、別の作業です。 ## 絵柄に別の表現方法が必要なら止める この例は、開いた中心線、線、曲線の演算対象、グラデーション、ソフトマスク、ラスター画像、フィルター、任意の入れ子になったクリップ群、半透明の重なった描画への対応を示していません。それらの特徴を削除しても見た目が保たれると考えないでください。 線が付いた経路と、その線の輪郭を塗り形状にしたものでは、形状が異なります。見えている線の面積を塗り形状にする必要がある場合は、ブーリアン演算のワークフローを選ぶ前に、適切なエディターで線をアウトライン化したコピーを準備し、確認してください。編集性が重要なら、元の線も残します。ソフトマスクを硬い境界の交差演算に置き換えて、薄れていく端をすべて保持することはできません。 一度だけの編集なら、ベクターエディターのほうが必要なオブジェクトを選択して確認しやすい場合があります。どのツールを選んでも、保存した結果の穴、色、境界を確認してください。次の工程で使う前には、書き出し精度と非常に小さい細部に特に注意が必要です。 ## 必要な場合だけ不足したベクターアートワークを復元する 元データが既存の編集可能なSVGなら、その形状を直接切り抜きます。適切なラスターのクリップアート画像しか残っておらず、編集可能な形状が必要なら、[PerfectVectorのクリップアート用ワークフロー](https://perfectvector.com/ja/clipart-to-svg)で先にSVGの候補を作成できます。切り抜く前に、復元した輪郭、開口部、別々の塗りを確認してください。ベクター化はピクセルからパスを作るものであり、希望する切り抜き境界を特定したり、ブーリアン演算の結果を検証したりはしません。今回の元のテストデータは直接作成しており、トレースしていません。 質感が必要で、入稿形式が意図したラスターのトリミングに対応するなら、イラストはラスターのまま使います。ベクターの切り抜きが役立つのは、次の工程で形状が必要なためであり、すべての画像をSVGにすべきだからではありません。 ## マスターを失わずに切り抜きを完了する 1. 切り抜き前のマスターを保持し、対象の閉じた塗りオブジェクトを特定します。 2. それらのオブジェクトと同じ座標系で切り抜き範囲を定義します。 3. 各オブジェクトの共通部分を求め、検証したスタイルと描画順を維持し、補助オブジェクトと元データを受け渡し用シーンから除外します。 4. 範囲と精度を意図的に選び、残す形状だけを書き出します。 5. 保存ファイルを開き直し、実際のパス、開口部、見た目、使う予定の受け取り先をそれぞれ確認します。 保存ファイルに意図した形状が範囲内に含まれ、必要な穴と色の関係が保たれていれば、範囲を限定した切り抜きは完了です。外側の形状が残っている場合は、元のプロジェクト内容を書き出していないか、クリップやビューポートだけを変更していないかを確認してください。開口部が埋まった場合は、さらにオブジェクトを結合する前に、複合パスと塗り規則を確認します。 元の多角形のテストデータについて、保存ファイルを対象とする作業を完了しました。カッターへの読み込みや実物の出力テストは行っておらず、SVGの一般的な互換性を保証するものでもありません。 ## よくある質問 **SVGをクリッピングすると、外側のパスは完全に削除されますか？** クリッピングは参照する形状を保持したまま、レンダリングを制限します。形状を完全に切り抜くには、適切なパス演算と、結果だけを含む書き出しが必要です。 **先に形状を結合すれば、すべての色を切り抜けますか？** 1回の結合で、残したかった個別の塗り領域が失われる場合があります。この例では、単色で塗りつぶした各オブジェクトの共通部分を個別に求め、元の描画順を維持します。 **viewBoxを小さくすると、隠れた絵柄は削除されますか？** 変わるのはビューポートの対応付けと表示範囲です。それだけで範囲外の元のパスが削除されるわけではありません。プレビューに加えて、保存された形状も確認してください。 **結果はすべてのカッティングアプリで使えますか？** このブラウザーテストだけでは分かりません。使用先で読み込んだ形状と処理を確認し、適切な制作上の検証を行ってください。 ## 出典 1. [MDN：SVG clipPath](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/clipPath) — クリッピングは、参照する要素の形状を変えずにレンダリングに作用します。 2. [Paper.js：PathItem](https://paperjs.org/reference/pathitem/) — 交差演算の結果と、面に基づくブーリアン演算のオプションを説明しています。 3. [Paper.js：Project](https://paperjs.org/reference/project/) — SVGの読み込み、プロジェクト内容、書き出し範囲、数値精度を説明しています。 *** ビットマップしかないクリップアートからパスが必要ですか？[SVGの候補を準備](https://perfectvector.com/ja/clipart-to-svg)し、穴と塗りを確認してから、別の作業用コピーを切り抜き、受け渡す前に保存した結果を開き直しましょう。 ## Explore - [Read the HTML article](https://perfectvector.com/ja/blog/permanent-crop-svg) - [SVGのfeComposite：in、out、xorの結果を比較する](https://perfectvector.com/ja/blog/svg-composite-artwork.md) - [SVGのz-indexが効かない？パスの重なり順を直す](https://perfectvector.com/ja/blog/svg-z-index-order.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)