PerfectVector
著者: Irene Kim

穴の大きさを変えずにラインストーン用SVGをサイズ変更する

ラインストーン用SVGの読み込みサイズを戻す場合と配置を作り直す場合を解説します。穴径を固定し、間隔を確認し、実際のストーンでテストします。

2 分で読める
目次

ラインストーン用SVGのサイズは変更できますが、デザイン全体を拡大・縮小すると穴も変わります。同じストーンでデザインを大きくしたいなら、各穴の実物の直径を固定したまま、ストーンの位置を移動するか作り直します。読み込んだファイルのサイズが単に間違っているだけなら、デザインを変更する前に作成者が意図した寸法へ戻します。

ラインストーン用テンプレートは、ストーンを並べる間、それぞれを保持する穴の配置です。その穴には実物の寸法があります。Scalable Vector Graphics(SVG)はどれだけ拡大しても円の形を保てますが、くっきりした円でもストーンに対して直径が間違っている場合があります。

このガイドは、提供されたテンプレートを調整する人や、デザインからテンプレートを作る人向けです。SVGの形状を例示し、カッティングソフトで使う確認項目を説明します。これらの例をテンプレート素材でカットしたり、ストーンで試したりはしていません。

どのサイズを変える必要があるか決める

デザイン全体の大きさ、穴の直径、穴の中心間の距離を分けて考えます。1つを変えるからといって、残り2つをどうすべきかが決まるわけではありません。

目的変更するもの確認するもの
小さすぎたり大きすぎたりして読み込まれた提供ファイルを戻す読み込み全体を作成者の意図したサイズに戻す全体寸法と個々の穴径
同じストーンでパターンを大きくする穴の位置、配置密度、ストーン数固定した穴径と新しい隙間
同じストーンでパターンを小さくする位置を作り直し、必要に応じて穴を取り除く重なり、狭い隙間、失われた細部
別のストーンサイズに変える穴径とその周囲の配置新しいストーンとテンプレート素材の要件

The Rhinestone Worldは、ラインストーンのサイズ変更FAQで実物の制約を明示しています。SS10の例ではMagic Flock用の穴を0.130インチで一定にし、デザインを縮小する際には穴の移動や削除が必要になる場合があると説明しています。これは特定の供給元の例であり、同じサイズ表示で売られるすべてのストーンに共通する穴の設定ではありません。

テンプレート作成者の寸法と、素材供給元の指示を使ってください。ストーンのサイズ表示だけで穴径を計算しないでください。

デザイン全体の拡大・縮小で何が変わるかを見る

24個の円からなる単純なリングを作りました。各円の直径は3.2 mmで、中心はリングの中心から20 mmの位置にあります。3.2 mmという値は形状を説明するための選択であり、特定のストーンサイズ向けの推奨設定ではありません。

リング全体を150%にすると、穴は4.8 mmになります。穴を3.2 mmのまま、各中心をリング中心から30 mmの位置に置いて作り直すと、穴の間隔が広い、大きな配置になります。

ブラウザーで描画した3つのSVGリング。元の3.2 mmの穴、全体拡大による4.8 mmの穴、3.2 mmの穴を保つ大きな配置を比較する
元のリング、全体を拡大したリング、作り直したリングは、同じ24個の穴を使います。直径を固定すると間隔と外側の寸法が変わります。これらの寸法はSVGの形状を示しています。
測定項目元のリングリング全体を150%に拡大穴を固定した大きなリング
穴の直径3.2 mm4.8 mm3.2 mm
外側の幅43.2 mm64.8 mm63.2 mm
隣り合う穴の縁の最短距離約2.02 mm約3.03 mm約4.63 mm
穴の数242424

作り直したリングの幅が64.8 mmでないのは、端の穴が大きくなっていないからです。決まった幅に収める必要があるなら、穴径を戻した後に外側の縁を測ります。中心の位置を拡大・縮小すれば、円全体を拡大・縮小した場合と同じ外形寸法になるとは考えないでください。

検証方法:作成したSVGファイルとブラウザーの描画を調べ、円の半径、変換、バウンディングボックスも確認しました。図は実際のファイルを共通の表示倍率で示しています。これは記載した形状の検証であり、Cricutへの読み込み、カットの成功、ストーンの収まりの検証ではありません。

SVGの座標系仕様は、変換と viewBox が形状をビューポートへどう対応させるか説明しています。同じ viewBox のまま表示ビューポートを広げると、穴も大きくなる場合があります。そのため、外側の幅の値だけを変えても、穴の実物の直径を固定することにはなりません。

同じ穴径で配置を作り直す

変更していないマスター、個々の形を確認できるSVGエディター、予定する仕上がり寸法、ストーンとテンプレート素材が求める穴の設定が必要です。購入したパターンでは、まず作成者が必要なサイズを提供していないか調べます。

  1. 元の縮尺を確認します。作成者の全体の幅と高さを記録し、作業ファイルでいくつかの穴を測ります。すべてが同じ倍率だけずれている場合は、配置を変える前にSVGのサイズ違いの診断に従います。
  2. 目標の配置の範囲を決めます。モチーフを広くするのか、ストーン間を広げるのか、列を増やすのかを決めます。シルエットと細部を比べられるよう、作業用コピーの隣に原本を残します。
  3. 穴を移動するか再生成します。必要な直径を一定にして中心を変えます。ラインストーンの配置ツールを使うか、ベクターエディターで形を編集します。エディターのサイズ変更が各穴に個別に作用するのか、選択範囲全体に作用するのか確認します。この2つは結果が異なります。
  4. 新しい隙間と細部を調べます。特にきつい曲線や小さな文字で、隣り合う穴の縁を比べます。意図した密度になるよう穴を足し引きします。同じ穴を広く配置すると通常は疎らに見え、小さく配置すると重なる場合があります。
  5. 保存し、開き直して測ります。新しいSVGを書き出し、開き直して最終的な外形寸法といくつかの穴径を確認します。以前エディターで表示した選択範囲の値ではなく、書き出したファイルを確認してください。

小さなコード例で違いを示します。このファイルは直径3.2 mmの円を2つ置き、中心間の距離を15 mmにしています。

<svg xmlns="http://www.w3.org/2000/svg"
  width="40mm" height="20mm" viewBox="0 0 40 20">
  <circle cx="10" cy="10" r="1.6" />
  <circle cx="25" cy="10" r="1.6" />
</svg>

このファイルではビューポートと viewBox の寸法が対応しているため、指定サイズで1ユーザー単位が1ミリメートルになります。SVGの円の定義は、中心座標(cx と cy)と半径(r)を分けています。2つ目の cx を 25 から 30 に変えると、直径は3.2 mmのままで中心間の距離が20 mmになります。親から継承した拡大・縮小変換があると結果が変わるため、親グループも確認します。

小さい対照例では、同じ24個の穴の中心を半径12 mmの位置へ移しました。隣接する中心の距離は約3.13 mmで、直径3.2 mmより短いため、円が重なりました。パターンを縮めた後に穴のサイズを戻すことは、修正の一部にすぎません。密集した部分を作り直す、穴を取り除く、モチーフを簡略化するなどの対応が必要です。

Cricut Design Spaceで書き出しサイズを確認する

利用するプラットフォーム向けの、Cricutの現行のSVGアップロード手順を使います。Cricutはベクターとラスターのアップロードを区別しています。正常に読み込めたことだけでは、ラインストーン用テンプレートが実物で合うとは分かりません。

アップロード前に、書き出したパターンの予定する外側の幅と高さを記録します。Design Spaceでは、読み込んだ寸法をその記録と比べます。個々の穴を調べられる場合は、いくつかの直径も比較します。作成者が用意した基準形や、寸法が分かる正方形は縮尺の変化を診断するのに役立ちますが、その診断用の形は最終カットから除外します。

読み込みが間違っている場合は、意図した縮尺に一度戻し、再確認します。読み込みは正しくてもプロジェクトに合わない場合は、配置のマスターに戻ります。正しいテンプレートを拡大すると、穴も変わります。

レイヤー、加工、マットの確認は、Cricut向けSVG準備ガイドへ進んでください。その後、実際のテンプレート素材で小さなサンプルをカットし、実際のストーンを試します。穴にストーンが収まり、素材が配置を意図どおりに保持するか確認します。ファイル寸法では、これらの実物の結果までは確かめられません。

テンプレートを作り直す場合はシルエットから始める

すでに使えるラインストーンの穴があるなら、そのベクターマスターを編集します。点のスクリーンショットから、作成者が意図した実物の寸法は分かりません。穴を再構成する前に、元のテンプレートを依頼してください。

出発点がフラットなPNGやJPEGのロゴなら、PerfectVectorで配置工程用のSVGデータを取り出せます。ベクター化はラスター画像のピクセルから形状を作るもので、ストーンを配置したり、穴の余裕を選んだり、ラインストーン用テンプレートを生成したりするものではありません。The Rhinestone Worldの画像からベクターへの変換FAQも、ベクター変換をストーンのデザインを作る前の工程として扱っています。

ラスターの元データでは、デザインをSVGとして準備し、シルエットと小さな細部を調べてから、穴を別に作ります。ロゴのベクター化ガイドが、この元データの取り出しを扱います。基本的な形状の用語は、SVGファイルに含まれるものから確認できます。

取り出したデザインとラインストーンの配置は別々のマスターとして残します。そうすれば、トレースを寸法確認済みのテンプレートとして扱わずにモチーフを変更できます。

よくある質問

同じストーンのままラインストーン用SVGを大きくできますか? はい。必要な実物の直径を固定したまま、穴を作り直すか移動します。デザイン全体を拡大すると穴も大きくなります。テンプレートを試す前に、新しい外形寸法、間隔、ストーン数を確認してください。

穴を変えずにラインストーンのデザインを小さくできますか? 直径は固定できますが、小さく配置すると穴が密集したり重なったりする場合があります。穴を移動または削除し、狭い細部を簡略化します。書き出した形状を再確認し、実際のテンプレート素材とストーンで試してください。

読み込みサイズの修正とパターンのサイズ変更は同じですか? いいえ。読み込みの修正は、作成者が意図した実物の縮尺に戻すことです。パターンのサイズ変更は、その意図した配置を変更することです。どちらが必要か決める前に、元の寸法を確認します。

PNGをSVGに変換するとラインストーン用テンプレートができますか? いいえ。ベクター化でデザインの形を取り出せますが、ストーンの位置、穴径、間隔、テンプレート素材のテストは、別の設計・製造工程として残ります。

出典

  1. The Rhinestone World:ラインストーンのデザインをサイズ変更できますか? — 固定した穴径と、縮小時に穴の移動や削除が必要になることを説明。
  2. W3C:SVG 2の座標系 — ビューポートへの対応、viewBox、変換を定義。
  3. W3C:SVG 2の円要素 — 円の中心と半径を独立して定義。
  4. Cricut:Design Spaceへの画像アップロード方法 — SVGのベクターアップロード手順を説明。
  5. The Rhinestone World:ラインストーンのデザイン作成前にJPGやPNGを変換する — ベクターの取り出しをラインストーン配置作成の前に位置付ける。

新しいストーン配置が必要なラスターのロゴがありますか。SVGデータを準備し、取り出したシルエットを元画像と比べてから、穴を別に作成・測定し、テンプレートをテストしてください。

ブログのその他の記事

PerfectVector

カットや制作に使える
きれいなSVGパスを準備

クレジットカード不要