PerfectVector
著者: Irene Kim

SVG・STL・3MF:立体ロゴに渡すファイルを選ぶ

同じロゴをSVG、STL、3MFで比較します。2D輪郭、押し出したメッシュ、単位、開口部、材料データを確認し、次に渡すファイルを選びましょう。

1 分で読める
目次

盛り上がったロゴを作る場合は、編集可能な2DアートワークにはSVGを保持し、受け取り側が対応する形状だけのメッシュを必要とするならSTLを使い、受け取り側の工程で単位、オブジェクト、プロパティ情報を利用できるなら3MFを選びます。適切な受け渡しは、何がすでにモデリングされ、受け取り側が次に何を必要とするかによって決まります。

平面の輪郭には、意図した高さを与える必要があります。メッシュにも、後工程での確認が必要です。.3mfで終わるファイルには、モデルが入っていても、特定のスライサープロジェクトを再開するための設定が含まれていない場合があります。

受け取り側が終える作業に合わせて選ぶ

現在の作業検討するファイル送る前に確認すること
ロゴのシルエットや文字の抜きを編集する元のSVG実際のパス、意図した塗り領域、縮尺、実際の開口部
押し出し済みの形状を、STLが指定された工程へ渡すSTLメッシュの寸法、合意した単位、閉じた表面、保持された開口部
明示的な単位と、対応するオブジェクト・プロパティデータを持つ形状を共有する3MF含まれるリソース、受け取り側の対応、読み込み後の寸法
特定のスライサー設定をほかの人が再開するそのアプリケーションのプロジェクト書き出し保存する設定、アプリとバージョンの互換性、受け取り側のプリンター設定

SVG(Scalable Vector Graphics)は、ベクター形状とラスター画像を含められる2次元のドキュメントを記述します。.svgという拡張子だけでは、ロゴが使えるパスで構成されているとは分かりません。SVG仕様は、この混在する内容のモデルを定義しています。元のベクターファイルがあるなら保持してください。そのスクリーンショットをトレースすると、すでに編集できる形状が変わることがあります。

メッシュは頂点と面で表面を表します。STLは三角形の表面形状を保存します。Three.jsのSTLエクスポーターのリファレンスでは、単位が任意であることと、標準的な色やテクスチャの表現を持たないことも説明しています。交換する際は、意図した実寸を合意してください。

同じエンブレムを3形式で確認する

長方形の開口部がある角張った青緑のエンブレムを作成し、40mm × 30mmのビューポートとviewBox="0 0 40 30"を持つSVGとして保存しました。1つの複合パスに外側と内側の輪郭が含まれ、開口部は白く塗ったものではなく透明です。

このサンプル用の小さなインポーターは、作成した直線のM、L、Zの輪郭だけを読み込みます。SVG座標をモデルに対応させ、xはそのまま、yは30 − yに変換し、1 mmにつきモデルの1座標単位を割り当て、高さ3まで押し出しました。この座標対応は、作成時に明示的に選んだものです。任意のCADアプリケーションがSVGをどう解釈するかを示すものではありません。

Three.jsのExtrudeGeometryで、ステップ数を1、ベベルを無効にして板状の形状を作成しました。同じ三角形をバイナリSTLと、小さな3MFパッケージとして保存しています。サンプルはエンブレム自体であり、別のベース板はありません。ほかの物体に付ける盛り上がったロゴなら、その追加のモデリング工程が必要です。

元の2D SVGエンブレムと、同じ保存済みSTL・3MFメッシュのソフトウェア投影を並べ、単位、開口部の検証、含まれるプロパティを比較
独自のネイティブアートワークと、実際に保存したメッシュファイルです。メッシュの表示はThree.jsローダーで開き直した三角形の投影であり、スライサープレビューや実物の印刷ではありません。灰色はSTLビューアーが与え、青緑は3MFの表示プロパティに由来します。

独立したバイナリ/XMLの調査で、各メッシュに36個の三角形があり、向きを含む三角形の座標が同一であることを確認しました。両方の範囲はXが0…40、Yが0…30、Zが0…3でした。すべてのメッシュの辺に逆方向の相手があり、符号付き体積は、明示した許容誤差0.000001以内で、想定した2,952立方座標単位と一致しました。

最初の書き出しは、開口部の輪郭の回り方向が今回の押し出しコードに対して逆だったため、辺の方向と体積の検証に不合格でした。その輪郭を反転して両方の出力を再生成し、同じ検証を繰り返しました。拡張子を変えるだけなら、不正なメッシュがそのまま残っていたはずです。

別のブラウザーページで、Three.jsのSTLと3MFのローダーを使い、保存したファイルを取得しました。事前に定めたテストは、(14, 16)の開口部を下向きに通るレイと、(4, 15)の実体部分を通るレイです。開口部のレイは両メッシュに当たらず、実体のレイは両方に当たりました。これは対象を限定したファイルとローダーの検証であり、完全な適合認証やスライサーのテストではありません。

ブラウザーでSVGを読み込む工程については、Three.js SVGLoaderの手順で別の作業を扱っています。パスを読み込み、シーンの形状、向き、縮尺を確認する作業です。今回の小さなインポーターは、このテストデータの直線の輪郭しか扱いません。

単位の渡り方は異なる

SVGは、ビューポートの物理サイズとユーザー座標空間の長方形を宣言します。それでも受け取り側のモデラーは、その形状を自分の座標に対応させる必要があります。画面での見かけの大きさに頼らず、読み込み後に既知の幅を確認してください。

今回のSTLの頂点座標には幅40が含まれます。意図した幅は40 mmですが、その合意を伝える標準的な単位フィールドはファイルにありません。受け取り側が数値を別の単位として解釈すれば、三角形自体が変わらなくても部品の大きさは変わります。

今回の3MFモデルでは、明示的に次のように宣言しています。

<model unit="millimeter"
  xmlns="http://schemas.microsoft.com/3dmanufacturing/core/2015/02">

3MF Core仕様では、この単位属性と、パッケージのモデル、リソース、ビルドの構造を定義しています。それでも作業を進める前に、実際の受け取り側アプリケーションで表示寸法を確認してください。

モデルの3MFとスライサープロジェクトでは情報が異なる

保存した3MFには、ZIPエントリーが正確に3つあります。

[Content_Types].xml
_rels/.rels
3D/3dmodel.model

モデル内には、メッシュオブジェクト1つ、ビルド項目1つ、タイトル、displaycolor="#315D6FFF"を持つ名前付きの基本材料を含めました。ブラウザーローダーは青緑の表示色を読み取りました。このパッケージにスライサープロジェクトの部品はありません。

Coreの基本材料の名前は設計意図を伝え、displaycolorはレンダリング用のプロパティです。仕様では、これを印刷後の材料の色の保証とは明確に区別しています。青緑のプレビューは、フィラメントの割り当てやカラー印刷の成功を示しません。

スライサープロジェクトには、アプリ固有の追加データが含まれる場合があります。形状交換用ファイルなのか、保存したプロジェクトなのかを送信者に尋ね、実際に開き直せる設定を確認してください。拡張子だけでは答えは分かりません。この比較では、スライサープロジェクト、プリンタープロファイル、サポートの配置、生成した機械用命令はテストしていません。

メッシュの包み方を変えても表面の細部は増えない

最終的な2つのメッシュファイルには、同じ36個の三角形が含まれます。拡張子によって細部が増えたものはありません。今回のエンブレムは直線の辺でできているため、曲線の輪郭の近似も比較していません。曲線の絵柄では、形式名を滑らかさの設定だと考えず、モデリングや書き出し時に選んだテッセレーションを確認します。

バイナリSTLは1,884バイト、圧縮した3MFは1,326バイトでした。このサイズは、独自に作成した小さな例に限った値です。形状、表現方法、圧縮、含めるリソースが結果に影響するため、常にファイルサイズで有利になるという意味ではありません。

後の編集が重要なら、元のSVGとモデリング用ドキュメントを残します。書き出した三角形メッシュは、開き直せるというだけでは、元のパス編集やモデリング履歴を保持しません。

受け取り側の工程で受け渡しを検証する

モデリングしたロゴを送る前に、意図した幅、高さ、厚み、ファイルの用途を伝えます。そのうえで、次を確認してもらってください。

  1. **寸法:**既知の幅と押し出し高さが、意図した物理単位で一致すること。
  2. **開口部:**空の領域が隠れた面で止まらず、板全体を貫通すること。
  3. **向きと本体構造:**エンブレムが意図した方向を向き、必要なベースや取り付け部分があること。
  4. **プロパティ:**想定したオブジェクトや材料の情報が残っていること。プレビュー色は機械で使う材料への対応付けではありません。
  5. **制作準備:**実際のモデリングやスライスの工程で、その工程独自の検証とツールパスの確認を終えること。

SVGを読み込んでも使える領域がない場合は、SVGが押し出せない問題の診断を参照してください。OpenSCADを使うなら、SVGの読み込みと押し出しのチェックリストを使います。これらのアプリに関する問題は、交換形式の選択とは別です。

ベクター復元を使う段階

編集可能なベクターアートワークがすでにあるなら、それを保存し、モデリング用コピーで作業します。フラットなロゴがPNGやJPGでしか存在しない場合は、PerfectVectorの3Dプリント用SVGワークフローで、モデリング前に確認する輪郭の候補を作れます。受け取り側のツールで、シルエット、実際の開口部、不要な背景形状、縮尺を確認してください。

ラスターからベクターへの段階で得られるのは、2Dのアートワークです。高さ、ベース板、公差、材料の割り当て、印刷準備は、引き続き後の作業です。平面のシルエットにすると意図した結果が失われる場合は、写真や描いた質感をラスターの参照として残します。それらには別の3Dの方法が必要な場合があります。

より広い3Dプリント向け画像からSVGへの手順では、その前段階の元データの準備に関する判断を扱っています。今回のエンブレムは最初からネイティブのベクター形状であり、トレースやバックエンドによる変換はしていません。

よくある質問

SVGはSTLのような3Dプリント用ファイルですか? SVGは2Dのアートワークを記述します。ソフトウェアは塗りの境界から3Dモデルを作れますが、高さやそのほかのモデリング上の判断を与える必要があります。STLは、モデリング済みの三角形の表面を記述します。

3MFには必ずプリンター設定が含まれますか? いいえ。今回調べた3MFには、モデルの形状、単位、基本材料の表示プロパティがあり、スライサープロジェクトの部品はありません。作成アプリが実際に何を保存したかと、受け取り側が何を開き直せるかを確認してください。

STLを3MFに変換すると、ロゴの穴は直りますか? パッケージを変えるだけでは、元のメッシュは修復されません。最初の書き出しでは、開口部の壁の回り方向を修正してから両形式を再生成する必要がありました。どのような修復の後でも、実際の形状を確認してください。

プリントサービスにはSVGと完成したメッシュのどちらを送るべきですか? どの段階を担当するか尋ねましょう。モデリングを提供しているならSVGで平面の輪郭を渡せます。対応するSTLや3MFならモデリング済みの表面を渡せます。拡張子だけで受け付けられると考えず、予定寸法を伝え、サービスの要件を確認してください。

出典

  1. W3C — Scalable Vector Graphics 2 — SVGの2次元のベクターと混在コンテンツのドキュメントモデルを定義しています。
  2. Three.js — STLExporter — STLの表面形状、任意の単位、バイナリ書き出しを説明しています。
  3. Three.js — ExtrudeGeometry — 独自サンプルで使った深さ、ステップ、ベベルのパラメーターを説明しています。
  4. 3MF Consortium — Core仕様 — モデルの単位、パッケージ構造、基本材料、表示色の制限を定義しています。

平面のラスターのロゴしかありませんか?モデリング段階に使うSVGの候補を作成し、境界と開口部を確認してから、受け取り側が実際に必要とするメッシュまたはプロジェクトの形式を選びましょう。

ブログのその他の記事

PerfectVector

画像ファイルを
編集可能なSVGに変換

クレジットカード不要