レーザーカット用SVGの破線：保存されたパスを確認する
レーザーのプレビューで実線になるSVGの破線を診断します。ストロークの描画、分離した中心線、アウトライン化した破線を比較し、自分のファイルを準備します。
目次
エディターでは破線に見えるSVGが、レーザーのプレビューでは実線になる場合、保存されたパスを確認します。破線の設定は、1本の連続したパスに沿って見た目の隙間を作っても、形状そのものは取り除かない場合があります。保存ファイル内にも隙間が必要なら、中心線を別々の線分として作ります。LightBurnでジョブを管理するなら、文書化されているPerforation Modeも選択肢です。連続したパスを保ち、そこでカットする距離と飛ばす距離を指定します。
このガイドはSVG自体の診断と準備を扱います。以下の独自の例は保存し、調べ、ブラウザーでレンダリングしました。ファイルの形状を示すもので、レーザーアプリへの正常な読み込みや実物のカットを実証するものではありません。変更していないマスターを残し、パスの端点を確認できるエディターを使い、最終確認のために使用先アプリのプレビューを用意してください。
破線のストロークも1本の連続したパスである場合がある
Scalable Vector Graphics（SVG）は図形とパスを保存します。パスは形状を記述し、ストロークはその形状に沿って描画します。中心線は、描かれた線の中央を通る経路です。一方、アウトライン化した破線の各線分には、線幅の周囲を囲む閉じた境界があります。
SVGの描画仕様は、stroke-dasharray をパス上の描く長さと描かない長さの繰り返しとして定義しています。stroke-dasharray="8 4" を追加するとストロークの見た目が変わります。パスの d データを別々の断片に書き換えるわけではありません。
製造にデータを渡す際には、この違いが重要です。Ponokoの破線データの準備ガイドは、短い実線を別々に作ることを明確に勧め、破線のストロークを展開すると小さな箱状の形になる場合があると注意しています。これはPonokoの入稿要件の説明であり、すべてのレーザーアプリのSVG読み込みに当てはまる説明ではありません。
画面上で使う装飾的な縁取りなら、編集可能なストローク描画を保つことに利点があります。点線の輪郭ガイドは、線端の形と見た目の間隔を扱います。レーザーのジョブでは、意図する形状と加工方法を別に決める必要があります。
見た目が同じで形状が異なる2つの例を比べる
この独自のSVGは、どちらも100 mm × 20 mmのページと viewBox="0 0 100 20" を使います。この対応では、1ユーザー単位が1ミリメートルに相当します。線はx=10からx=90までの80 mmです。以下の2単位のストロークは比較を見やすくするためで、レーザーの設定や推奨カット幅ではありません。
まず、これを painted-dashes.svg として保存します。
<svg xmlns="http://www.w3.org/2000/svg"
width="100mm" height="20mm" viewBox="0 0 100 20">
<path d="M10 10 H90" fill="none" stroke="#0f766e"
stroke-width="2" stroke-linecap="butt"
stroke-dasharray="8 4" />
</svg>8 mmの線分7本を、4 mmの隙間6か所を挟んで描きます。保存されたパスは M10 10 H90 のまま、つまり80 mmの連続した1本の線です。
次に separate-segments.svg を保存します。
<svg xmlns="http://www.w3.org/2000/svg"
width="100mm" height="20mm" viewBox="0 0 100 20">
<g fill="none" stroke="#0f766e"
stroke-width="2" stroke-linecap="butt">
<path d="M10 10 H18" />
<path d="M22 10 H30" />
<path d="M34 10 H42" />
<path d="M46 10 H54" />
<path d="M58 10 H66" />
<path d="M70 10 H78" />
<path d="M82 10 H90" />
</g>
</svg>このファイルには別々の開いたパスが7本あります。長さの合計は56 mmで、6か所の隙間をまたぐ接続形状はありません。外側の端点間の距離は80 mmのままです。どちらの例もbutt型の線端を使っているため、各線分の端点でストロークの描画が止まります。
保存したパスデータを調べ、ブラウザーの getTotalLength() メソッドで形状を確認しました。連続したパスは80ユーザー単位、各線分は8を返し、線分の合計は56でした。MDNの説明では、このメソッドはブラウザーが計算したパス長をユーザー単位で返します。これは形状の測定であり、実測した加工時間やレーザーアプリが生成したツールパスではありません。
基本的な診断はコードなしでも繰り返せます。保存した各ファイルを開き直し、ノードツールでパスを選択して端点を確認します。最初のファイルでは、見た目の隙間すべてを経路が通ります。2番目のファイルには、各隙間の両側に端点があります。1つのSVGパスに離れたサブパスを含めることもできるため、パス要素を数えるだけでは不十分です。各経路がどこで始まり、止まり、閉じるかを確認してください。
ファイルに合った原因を修正する
隙間がストロークの描画にしか存在しない
破線のスタイルを外すと連続した経路が現れる場合は、隙間をファイル内に持たせるのか、レーザーのジョブ設定で作るのかを決めます。
SVGに隙間を保存する場合は、マスターの複製で作業します。
- 作り直すパスから装飾的な破線効果を外します。
- 意図する破線の端点で、経路を開いた線分として描くか分割します。
- 隙間にする接続部分を削除します。直線の例では、8 mmの線分と4 mmの隙間を繰り返します。
- ノードツールで結果を調べます。各破線部分には1本の中心線と2つの端点があるはずです。
- 新しいSVGを保存し、開き直して隙間を再確認します。レーザーアプリに読み込む前に実物の寸法を確かめます。
曲線の経路なら、その曲線に沿って切れ目を置きます。ここでの8/4という値は1つの直線の例を説明するもので、素材に適したミシン目を指定するものではありません。端の短い線分、曲がり、閉じた形のつなぎ目を再確認します。
各破線部分が小さな閉じた輪郭になった
展開やストロークのパス変換では、見えている破線部分が閉じた形として保たれる場合があります。スリットの輪郭が欲しい場合には適しているかもしれませんが、線の中央を通る短い1本の経路とは異なる形状です。
幅が見える例として、8 mm × 2 mmの閉じた長方形も7個作りました。1つの長方形のパスは次のとおりです。
<path d="M10 9 H18 V11 H10 Z" />その外周は20 mmで、7個では閉じた輪郭形状の合計が140 mmになります。加工がこの境界をたどる場合、2本の長辺と両端を通ります。図ではこの違いが見えるよう輪郭を表示しています。この計算から、試していない読み込み機能が形状をどう処理するかは分かりません。
各破線部分に短い中心線を意図していたなら、箱状の形をそのまま使わず、中心線を作り直します。単線SVGのガイドは、描いた線について同じ中心線と輪郭の違いを説明しています。意図した輪郭にも重複がある場合は、機械設定を変更する前に二重線の確認ガイドを使ってください。
隙間をLightBurnのジョブで作る
LightBurnのジョブを自分で管理し、カットとスキップの間隔を調整したい場合は、連続した経路を保つことが役立ちます。LightBurnの現行のLine Modeの文書は、**Cut（カット）とSkip（スキップ）**の距離を別々に指定するPerforation Modeを説明しています。これらのジョブ設定が、経路上でビームをオン・オフにする位置を決めます。
デザインと素材に合わせて距離を選び、ジョブのプレビューを確認します。追加パターンが意図したものでない限り、すでに分割された形状に2つ目のミシン目パターンを加えないでください。
その設定から作った形状を書き出す必要がある場合、LightBurnにはGenerate Path From Cutも文書化されています。ミシン目などの特性を含む新しいパスを作り、元のオブジェクトも残します。元の版と生成した版を区別できるようにし、最終ジョブには意図した版だけを含めます。
これらは文書に基づく選択肢です。この実演ではLightBurnを実行せず、サンプルファイルの読み込みやレーザーの操作もしていません。完成したデザインを使う前に、自分のアプリで経路と設定を確認し、実際の素材でテストしてください。
取り出したデザインとミシン目のパスを分ける
破線の周囲のモチーフがフラットなPNGやJPEGにしかない場合、PerfectVectorのレーザーカット用データ変換手順で、そのラスター画像からSVGの形を取り出せます。ジョブに配置する前に、取り出したシルエットと穴を元画像と比べます。ベクター化は画像のピクセルから形状を作るもので、カットとスキップの間隔を選んだり、この例の破線中心線を設計したりするものではありません。
そのデザインと、意図的に描いたミシン目の経路は別オブジェクトにします。太い破線をトレースすると輪郭を持つ領域になる場合がありますが、ジョブで必要なのは1本の開いた中心線かもしれません。すでに使えるベクターデータがあれば、それを残して破線の経路を直接編集します。レーザー向けSVG準備の総合ガイドでは、カットと彫刻の使い分けや読み込み確認を広く扱っています。
保存ファイルと使用先のプレビューを確認する
SVGを採用する前に、実際に書き出したファイルを確認します。
- ページとデザインの実物の寸法が、設計記録と一致している。
- 後でジョブ設定によって隙間を作る場合を除き、意図する各隙間に中心線の接続がない。
- 線として意図する破線部分は開いた線分で、閉じた破線の輪郭はその境界が必要な場合だけ存在する。
- 元の経路と置き換えた形状の両方を、最終ジョブに残していない。
- 使用先のプレビューに、意図した加工と中断が表示される。
プレビューにまだ実線の経路が表示される場合は、読み込んだ形状とジョブのミシン目設定を別々に確認します。各破線部分の周囲に2本の縁が見える場合は、アウトライン化した形を調べます。隙間の長さが変わる場合は、個々の線分を編集する前に読み込み時の縮尺を確認します。ブラウザーではSVGの描画と形状を確認できます。残る製造上の疑問には、使用先のプレビューと素材テストで答えます。
よくある質問
破線のSVGが読み込み後に実線になるのはなぜですか？ ファイルには、破線のストロークスタイルを付けた1本の連続パスが含まれている可能性があります。保存された形状と使用先の加工設定を調べます。SVG内に隙間が必要なら離れた線分を作り、そうでなければジョブで文書化されたミシン目設定を使います。
破線のストロークをパスに変換するだけで十分ですか？ 結果を確認してください。ストロークを展開すると、破線部分の周囲に閉じた輪郭ができる場合があります。その境界が欲しいなら残し、各破線部分を1本の短い経路にしたいなら開いた中心線を作り直します。
代わりにLightBurnで破線を作れますか？ LightBurnは、経路に沿うCutとSkipの距離を指定するPerforation Modeを説明しています。プレビューと素材を確認してください。この記事はSVG形状を検証したもので、テスト済みのLightBurn読み込みや実物のカットは含みません。
破線のPNGをベクター化するとミシン目のパスになりますか？ そうなるとは考えないでください。ベクター化は見えるピクセルから形状を取り出すもので、破線の中心線とカット・スキップの間隔は別の設計判断です。加工を割り当てる前に、結果のパスを確認します。
出典
- W3C — SVGのストロークの破線 — パス形状とストローク描画を区別し、破線の長さと線端の扱いを定義。
- Ponoko — 破線とその他の外観 — 業者固有の分離した線の指針と、輪郭が箱状になる結果を説明。
- MDN — SVGGeometryElement.getTotalLength() — 例で使った、ブラウザーによるパス長の計算を定義。
- LightBurn — Line Mode — Perforation ModeのCutとSkipの距離を説明。
- LightBurn — Generate Path From Cut — 生成される形状と元のオブジェクトの保持を説明。
- PerfectVector — レーザーカット用SVGデータ — 条件に応じた製品案内で紹介した、ラスター画像からの変換工程を説明。
ラスターモチーフから始めますか。SVGデータを取り出し、輪郭を元画像と比べた後、破線の経路を別に設計し、レーザーアプリのプレビューでジョブ全体を確認してください。
