SVGの筋押し線とカット線：形状を読み取る
ScoreやCutを割り当てる前に、SVGの折り線の形状を読み取ります。開いたパス、塗りの帯、破線を比較し、Cricutの文書にある操作手順を確認しましょう。
目次
筋押し線とカット線は、意図する作業が異なります。今回の折りたたむカードでは、筋押し線が折り位置を、カット線がカードの外周を示します。ただしSVGファイル内の色付きの線は、描画上の見た目を持つ形状にすぎません。色、名前、破線の見た目だけでは、カッティングソフトが使う操作は決まりません。
ファイルに保存された経路、画面での描き方、読み込み後に割り当てた操作の3つを別々に読み取ります。CricutのOperationの説明は、CutとScoreをデザインレイヤーに選ぶ機械への指示として扱っています。SVGプレビューが使えそうに見えても、その選択は検証できません。
折りの経路と見た目は異なる情報
SVGはScalable Vector Graphicsの略です。パスは、移動、直線、閉じるなどのコマンドで経路や境界を保存します。ストロークはその形状に沿って描き、塗りは形状の内側を描きます。SVGパスの仕様は、パスコマンドとつながっていないサブパスを説明しています。
簡単なカードでは、外周、意図した折り線、装飾を、別々のオブジェクトとして識別できるようにします。カードの端や装飾の帯を折り線と取り違えずに確認できます。
独自の例には、長方形のカード、小さな円の模様、縦の折り位置があります。折り線の形状を4種類作成しました。カードと装飾は、どのファイルでも同じです。
| 折り線の表現 | 元データの内容 | 絵だけでは分からないこと |
|---|---|---|
| 開いた連続パス | 端点が2つある1本の経路 | 使用先で筋押し、描画、切断のどれを行うか |
| 塗りつぶした細い帯 | 幅を持つ閉じた形状 | その形状が意図した折り経路か |
| 1本のパス上の破線ストローク | 破線で描いた連続経路 | 見える隙間が形状にもあるか |
| 別々の短いパス | それぞれ端点を持つ、つながっていない経路 | どの操作がその線分を使うか |
これは折り線の作り方の選択であり、すべての開いたパスが筋押し、すべての閉じたパスがカットというルールではありません。使用先での解釈と選んだ操作は、引き続き確認が必要です。
同じに見える2本の実線でも経路は異なる
最初のカードは、折り位置の参照に次の開いたパスを使います。
<path id="fold" d="M50 18 V62" fill="none"
stroke="#76548B" stroke-width="1.6"
stroke-linecap="butt" />50, 18から始まり、縦に50, 62まで続きます。閉じるコマンドはありません。紫の幅は、その経路の周囲を描くストロークによるものです。
2番目のカードは、塗りつぶした帯を使います。
<path id="fold" d="M49.2 18 H50.8 V62 H49.2 Z"
fill="#76548B" stroke="none" />パスは帯の周りを進み、Zで閉じます。SVGのclosepathの定義は、その閉じる接続を説明しています。このファイルが保存するのは、紫の線の中央を通る1本の経路ではなく、周囲の外周です。
2つの線は、意図的に同じ見た目にしました。foldというレイヤー名は、検査のために要素を識別しますが、テスト済みの筋押し操作を記録するものではありません。読み込んだオブジェクトを1本の折り経路として扱う前に、使用先に実際に何が残ったか確認してください。
破線の描画では筋押しかカットかは決まらない
3番目のカードは、最初のカードとまったく同じd="M50 18 V62"のパスデータを保持し、stroke-dasharray="4 3"を加えます。SVGの描画仕様は、破線パターンを、ストロークの描く部分と描かない部分として定義しています。この例の経路は、表示上の隙間をまたいで連続したままです。
4番目のカードには、代わりに7本の別々の開いたパスがあります。見える各破線には固有の始点と終点があり、隙間をつなぐ折り形状はありません。画面上の破線が一致していても、元ファイルは異なります。
カードでは、意図したものを決めてください。1本の連続した折り位置の参照、分離した線分、印刷するガイド、装飾の帯のどれでしょうか。破線の見た目だけでは、そのデザイン上の問いに答えられません。破線パスの形状のガイドでは、保存された隙間と、アウトライン化した破線を詳しく扱っています。この記事は、折り線の識別と意図した操作の割り当てに絞ります。
4 3のパターンと表示上のストローク幅は、実演を見やすくするために選びました。筋押し圧、刃の設定、推奨するミシン目寸法ではありません。
元ファイルで検証した内容
パスの数を調べる際は、共通のカード外周と装飾を除き、折り線のグループだけを確認しました。
- 実線の折り線は、開いたパス1本とサブパス1つです。
- 帯は、閉じたパス1本とサブパス1つです。
- 破線で描いた折り線は、パスデータが変わらない開いたパス1本です。
- 別々の破線の版は、開いたパス7本とサブパス7つです。
保存した4つのSVGすべてを、Sharp 0.34.4とlibrsvg 2.61.1で1000 × 800ピクセルにレンダリングしました。実線の折り線と塗りの帯は、同一のピクセルバッファーを生成しました。破線で描いたパスと別々の線分も、同一のピクセルバッファーでした。ブラウザーの図は、それと同じ独自のSVGファイルを示しています。
この結果が示すのは限定的な点です。見た目が一致しても、形状が一致するとは限りません。Cricut Design Spaceがファイルをどう読み込むか、どのツールパスを作るか、破線スタイルを保つか、筋押し後に素材がどう折れるかは分かりません。このテストデータをDesign Spaceへ読み込んだり、機械を動かしたりはしていません。
1つのSVGパス要素に、つながっていないサブパスが複数含まれる場合があります。そのため、パス要素の数だけでは一般的な診断はできません。経路の始まり、終わり、閉じる位置を確認してください。スキャンした絵から中心線を復元したい場合は、単線SVGのガイドで、その別のトレース作業を扱っています。
文書に基づくCricutの確認は形状を調べた後に行う
Cricutの現在の操作選択ガイドは、デザインレイヤーを選び、Operationメニューで操作を選択するよう案内しています。選んだ操作はLayersパネルに表示され、選択した機械に対応する項目が表示されます。筋押しする予定の折り線では、正しい読み込みオブジェクトに、意図したScoreが割り当てられているか確認してください。
配置も別の確認です。CricutはAttachを、切断位置の相対関係を保ち、Score、Draw、FoilのレイヤーをCutレイヤーへ固定する機能として説明しています。カードでは、デザインキャンバスだけでなくプロジェクトプレビューでも、折り線と外周の関係が意図どおりである必要があります。
これらは文書を根拠にした、次の確認です。例のファイルで、この割り当てやAttachはテストしていません。操作ラベルは、閉じた帯が中心線になった証拠ではなく、元ファイルの色は選択した操作の証拠でもありません。読み込んだ表現、割り当てた操作、配置をそれぞれ確認してから、実際のツールと素材で試してください。
より広い読み込み、レイヤー、マットの確認には、Cricut用SVGの準備ガイドを使います。整理のためのグループ化と、意図した制作配置を保つことの違いを説明しています。
装飾のトレースと折り線を分ける
カードの装飾模様がフラットなPNGやJPGでしか存在しない場合、PerfectVectorのCricut用アートワークのワークフローで、その画像からSVGの候補を再構築できます。復元した形状を確認し、装飾は意図的に作成した折り線と外周から分けておきます。ベクター化はピクセルからパスを作るもので、デザイナーの折り位置を推定したり、読み込んだレイヤーにScoreを選んだり、機械の結果をテストしたりはしません。
既存のベクター模様があれば保持します。サンプルの円形模様は直接作成し、トレースしていません。単純な直線の折り位置も、直接作成できます。カード全体のスクリーンショットをトレースすると、すでに分かっている形状に再構築の作業を加えることになります。
実際の折り経路、ストロークか塗りかの表現、意図した隙間、独立したカード外周を識別できれば、ファイルの確認は完了です。次の確認は、使用先のプロジェクトと素材のテストで行います。ベクター化の入門は、その受け渡し前にトレースで何を再構築でき、何をできないかを説明しています。
よくある質問
赤や破線のSVGの線なら、自動的にScoreになりますか？ 色や見た目から操作を推測しないでください。元の形状と、使用先で割り当てた操作を確認します。Cricutはデザインレイヤーの操作選択を別に説明しています。
折り線と塗りの帯が同じに見えるのはなぜですか？ ストロークは開いた経路の周囲に見える幅を描き、塗りの帯は閉じた境界の内側を描きます。異なるパス構造でも、同じラスターピクセルを生成する一致した例を作成しました。
破線の筋押し線は、必ず別々のパスですか？ いいえ。連続したパスを破線ストロークで描けます。一方、別々の線分の例では、独立した7本の開いたパスを保存しています。端点とサブパスを調べて区別してください。
Attachは誤った折り形状を直しますか？ 形状と配置は別々に確認します。CricutはAttachを、配置を維持し、ほかの操作をCutレイヤーへ固定するために説明しています。その文書から、読み込んだオブジェクトに意図した中心線や隙間があるとは分かりません。
出典
- W3C：SVGパス — パスコマンド、つながっていないサブパス、closepathの動作を説明しています。
- W3C：SVGストロークの破線 — 基となるパスデータとは異なる、破線ストロークの描画を説明しています。
- Cricut：操作の選択 — レイヤーへの操作の割り当てと、選んだ機械で利用できる項目の確認を説明しています。
- Cricut：Attachの使い方 — 相対配置と、Scoreなどの操作レイヤーをCutレイヤーへ固定する方法を説明しています。
カードの装飾をビットマップから復元する必要がありますか？Cricut用アートワークのSVG候補を作成し、形状を確認して折り経路と分けてから、カッティングプロジェクトで操作と配置を確認しましょう。
