DWG から SVG への変換

DWG から SVG への変換とは

DWG から SVG への変換とは、AutoCAD で作成された作業図面を、すべての最新ブラウザが追加プラグインなしでサポートするオープンな Scalable Vector Graphics 形式に変換することです。変換時には、図面の内容 (線分、円弧、円、ポリライン、ハッチング、スプライン、テキスト注釈、寸法、ブロック、レイヤのジオメトリ) がベクターの性質を保ったまま SVG に移され、ファイルは HTML ページへの直接埋め込み、任意のブラウザでの表示、CAD ソフトを持たない取引先やクライアントへの共有、スマートフォンからモニターまでどんな端末でも閲覧できる状態になります。

DWG は、Autodesk の主力 CAD システムである AutoCAD 専用のフォーマットです。DWG は、レイヤ、ブロック、寸法、注釈、レイアウト、ビューポート、ダイナミックブロック、外部参照、印刷設定、ユーザー定義のオブジェクトプロパティなどとあわせて図面を保存します。最大の特徴は、ネイティブで DWG を扱うには AutoCAD のライセンスや、まさにそのバージョンの DWG を読める互換性のある CAD 製品が必要になることです。ファイル構造はバイナリで、エディタ自身のワークフロー向けに最適化されており、CAD ソフトを持たない人にとって DWG ファイルは閲覧できない素材になります。ブラウザも OS も通常のビューアも、DWG をそのまま開くことはできません。

SVG は W3C が策定したオープンなベクターグラフィック標準で、すべての最新ブラウザが追加プラグインなしでサポートしています。SVG は画像を数学的に記述します。各線分、円弧、円、ポリラインはパス、座標、属性の集合として保存されます。ファイル自体は XML 形式のテキストなので、SVG はどんなサイズにもロスレスに拡大でき、シンプルな図形なら非常に小さなサイズに収まり、グラフィックエディタでもテキストエディタでも編集できます。SVG は検索エンジンにインデックスされ、CSS によるアニメーション、スクリプトによるインタラクティブ機能、ARIA 属性によるアクセシビリティにも対応します。

DWG から SVG への変換は、閉じた作業用ソースを Web、文書、プレゼンテーション向けの汎用ベクター素材に変えます。変換後の建築平面図、エンジニアリング図面、組立図、配置図、電気回路図は、スマートフォン、タブレット、ノートパソコン、モニターのいずれでも同じ鮮明さで表示され、拡大しても品質を失わず、Web サイト、技術マニュアル、レポート、提案書、教材に簡単に組み込めます。

DWG と SVG のフォーマット比較

最大の違いは用途です。DWG は AutoCAD で図面を作成、編集し、最終形まで仕上げる、技術者の作業用ドキュメントです。SVG は Web サイト、ブラウザ、モバイルアプリ、PDF 文書、あらゆる UI で結果を表示するための汎用ベクター素材です。DWG を SVG に変換するということは、閉じた CAD ソースから、誰でも公開・閲覧できるオープンな素材へ移行することです。DWG はマスターファイルとして作者の手元に残り、SVG は外の世界 (企業 Web サイト、技術文書、マーケティング資料、メールマガジン、教育コンテンツ、概要プレゼンテーション) へ旅立ちます。

SVG を使う場面

Web サイトへの図面掲載

建築事務所、エンジニアリング会社、設計組織、工場は常に Web サイトで図面を公開する必要に迫られます。完成建物の平面図、製造ラインの系統図、標準的な間取り、建物の断面図、電気接続図などです。DWG をそのまま Web に掲載することはできません。ブラウザはこの形式を開けず、ソースファイルのダウンロードは CAD ソフトを持たない訪問者を遠ざけます。SVG はこの問題を一発で解決します。図面は HTML ページに直接埋め込まれ、どの訪問者のブラウザでも開け、大型モニターでもスマートフォンでも鮮明に表示されます。同じファイルがデスクトップ版サイトでもモバイル版サイトでもアプリでも、まったく同じように表示されます。

技術文書とマニュアル

機器メーカー、電機会社、家具・組立部材のサプライヤーは、組立説明書、製品仕様書、ユーザーマニュアル、技術文書に図面を含めます。文書がオンラインや Web ドキュメント形式で公開される場合、SVG は便利な形式です。部品の断面図、接続図は拡大しても鮮明さを保ち、正確に印刷でき、PDF へのエクスポートでも美しく見えます。ラスター画像と異なり、SVG は細部を拡大しても鮮明さを失いません。これは詳細な図面を含む技術文書で特に重要です。

プレゼンテーション、レポート、提案書

建築家やエンジニアはクライアント、投資家、受注業者向けのプレゼンテーションを準備します。フロアプラン、建物のファサード、設備系統図、配置図のスケッチを SVG でプレゼンテーションに組み込むのが最も簡単です。最新のオフィスソフトやプレゼンツールは SVG を通常の画像と同様に挿入できます。ラスターエクスポートに対する優位点は明らかです。プロジェクターや大画面でも、どんなスケールでもベクターグラフィックは鮮明さを保ちます。提案書、プロジェクトレポート、設計パンフレット、入札書類でも同様です。

クライアントのスマートフォン・タブレットでの閲覧

クライアントはたいてい重い CAD ソフトを入れずに素早くプロジェクトを確認したいものです。スマートフォンでメールを開き、タブレットのリンクにアクセスし、ノートパソコンでプレゼンテーションを確認します。SVG はこれらすべてのシナリオでネイティブに表示でき、ライセンスも、モバイルアプリも、専用ソフトも不要です。これは建築プロジェクト、マンション間取り、標準的な家具ソリューション、インテリアスケッチの議論で特に価値があります。迅速な承認が図面での作業そのものより重要な場面です。

教育とオンラインコース

工科大学の教員、建築・工学・設計のオンラインコース作成者は図面を教材に使います。SVG は講義、記事、教材、インタラクティブな課題への埋め込みに最適です。学生は専用ソフトを入れずに任意の端末から教材を開き、図を拡大し、詳細を確認し、ノートにイラストをコピーできます。これはリモート学習を簡略化し、教材をより使いやすくします。

標準プロジェクト・ソリューションのカタログ

標準ソリューションを提供する企業 (完成間取り、電気盤のテンプレート、標準的な金属構造のジョイント、標準的な家具セット) は SVG でカタログを公開すると便利です。サイト訪問者は通常の画像と同じように選択肢を閲覧でき、バリエーションを比較し、興味のある部分を拡大し、そのソリューションが自分に合うかどうかすぐに把握できます。SVG のベクターの性質により、同じ図面をカタログで大きく表示するときも、小さなプレビューとしても使えます。

CAD ソフトのない受注業者への図面の受け渡し

特に小規模な受注業者の一部は CAD システムを使っていません。設置業者、現場監督、工事管理者、小規模生産拠点、サービス業者などです。彼らに DWG を渡しても意味がありません。開けないからです。SVG はこの問題を解決します。図面はスマートフォンやタブレットに届き、標準的な手段で開け、印刷でき、議論の場で活用できます。これは承認を迅速化し、プロジェクト情報の伝達経路を短縮します。

インタラクティブな Web アプリへの組み込み

SVG はインタラクティブなシナリオを実現できます。クリック可能なゾーンがある製造施設の図面、選択した階を強調表示する建物平面図、切り替え可能な設備レイヤがある配置図などです。開発者は SVG に直接スクリプト、イベントハンドラ、アニメーションを追加し、静的な図面を生きたインターフェース要素に変えられます。DWG から SVG への変換はこうしたインタラクティブなソリューションへの第一歩です。ベクター形式なしには、クリック可能なエリアや滑らかなアニメーションを実現することはできません。

変換の技術的なポイント

DWG を SVG に変換するときに行われること

処理は複数の段階から成ります。まず DWG のバイナリ構造が、図面ヘッダ、テーブル (レイヤ、線種、テキストスタイル、寸法スタイル)、入れ子要素の定義を持つブロックテーブル、モデル空間とレイアウトのエンティティといった構成要素に分解されます。次に各エンティティが SVG の言語で記述されます。線分、円、円弧、楕円、ポリライン、スプライン、ハッチング、テキスト注釈が SVG コマンド (path、line、circle、polyline、text) に変換されます。DWG のレイヤは意味のある識別子を持つ SVG グループになり、必要に応じて個別のレイヤを CSS で表示・非表示・スタイル指定できます。結果としてページへの埋め込みに適したコンパクトなテキストファイルができあがります。

レイヤと可視性の保持

レイヤは図面の重要な整理要素の 1 つです。DWG から SVG への変換では、レイヤはグループとして移され、レイヤ名がグループの識別子やクラスになります。これは開発者やデザイナーにとって便利です。個別のレイヤを CSS やスクリプトで指定し、独立にスタイルを当てたり表示・非表示を切り替えたりできます。たとえば、インタラクティブな配置図では 1 クリックで設備レイヤの可視性を切り替えたり、特定のエリアを強調表示したりできます。レイヤの状態 (可視性、フリーズ) はエクスポート時に反映されます。ソースで非表示のレイヤは SVG に含まれないか、対応する属性でマークされます。

色、線幅、線種

AutoCAD は線の色を複数の表現で保存します。インデックス色、トゥルーカラー (RGB)、レイヤ色、ブロック色です。SVG への変換では、すべての色がブラウザが解釈できる RGB に変換されます。図面で設定された線幅は stroke-width 属性として移されます。線種 (実線、破線、点線、一点鎖線) は SVG 標準でサポートされる stroke-dasharray 属性を通じて表現されます。結果として、ブラウザでの図面の見た目は、画面の縮尺と印刷縮尺の違いを除けば、CAD ソフトでの表示に近い状態になります。

テキストと寸法注釈

DWG のテキスト注釈は設定に応じてテキスト要素のまま SVG に移されるか、曲線に変換されます。テキスト要素は編集性、選択、コピー、検索エンジンへのインデックスを保ちますが、受け手側に対応フォントが必要です。なければブラウザが既定フォントで代替します。曲線への変換はどの受け手でも同じ表示を保証しますが、テキストが図形になり、検索もコピーもできなくなります。選択は用途次第です。大きなテキストブロックを含む技術文書にはテキスト要素が便利で、ブランド入り表題欄にはカーブが向きます。寸法注釈、引出線、凡例は、ソース図面での見た目と同じ視覚的表現を持つグラフィック (線、矢印、テキスト) として移されます。

ブロックと挿入

AutoCAD のブロックは図面に繰り返し挿入される名前付きジオメトリの定義です。SVG への変換では、ブロックはシンボル (symbol タグ) として移され参照 (use タグ) で参照されることでファイルのコンパクトさを保つか、ジオメトリをコピーした通常のグループとして移し編集しやすくするかを選べます。AutoCAD 固有のダイナミックブロックは現在の視覚的表現のまま通常のブロックに変換されます。ブロック属性がある場合、それはブロックの隣に通常テキストとして出力されます。

モデル空間とレイアウト

AutoCAD は図面を 2 つの表現で保存します。モデル空間 (ジオメトリが実座標で描かれる) とレイアウト (モデルビューが印刷用に配置される) です。変換時にはどの空間をエクスポートするかを選択できます。Web 公開には、完成した配置、枠、表題欄を持つ特定のレイアウトをエクスポートするのが便利で、表示に適した SVG が得られます。枠なしで図面の全ジオメトリが必要なインタラクティブサービスへの統合にはモデル空間をエクスポートします。ファイルに複数のレイアウトがある場合、各レイアウトが個別の SVG になります。

ハッチング、塗り、グラデーション

ハッチングは SVG に塗りつぶされたパスまたは pattern タグによる繰り返しパターンとして移されます。べた塗りは単純な fill 属性として移されます。グラデーションが図面に存在する場合、linearGradient タグと radialGradient タグで記述されます。これらの構造はすべて SVG 標準でネイティブにサポートされ、すべての最新ブラウザで正しく表示されます。

変換に向くファイル

理想的な候補:

• 建設・設計会社の Web サイト掲載用の建築平面図、ファサード、断面図
• オンライン技術文書向けのエンジニアリング図面 (電気、給排水、暖房)
• ユーザーマニュアルや組立説明書向けの組立図と部品図
• プレゼンテーションや提案書向けの配置図とオブジェクト配置図
• 住宅・商業不動産カタログ向けの標準的なマンション・室内平面図
• 教材、講義、教育用教材、オンラインコースの図解
• インタラクティブマップ用の製造施設、工場、倉庫の図面

条件付きで向くもの:

• ハッチングと塗りが多い図面。Web サイト上での結果を目視確認する価値があります。場合によっては変換前にハッチングを単純化するほうが良いです
• AutoCAD 固有フォントが多いファイル。Web フォントを使うかテキストを曲線に変換するかを事前に決めてください
• ダイナミックブロックやサードパーティアドオンのプロキシオブジェクトを含む図面。現在の視覚的表現に単純化されます
• 数万のエンティティを持つ非常に大きな図面。SVG が重くなります。Web 向けには必要なフラグメントやレイアウトだけをエクスポートするのが合理的です
• 外部参照を含む図面。変換前に参照をメイン図面にバインドして、依存関係のない自己完結型 SVG にすることをおすすめします

変換する意味が薄いもの:

• CAD で何度も編集する予定の未完成の作業用ドラフト
• オブジェクト間の正確なパラメトリック依存性に主な価値があるファイル。SVG はグラフィックのみを保存し、パラメトリクスは含まれません
• CNC 工作機械へのジオメトリ投入を目的としたファイル。製造には DXF が向きます
• 3D モデル全体。SVG は二次元です。変換前に必要な二次元ビューを準備する必要があります

SVG 形式の利点

SVG は DWG と比べていくつかのユニークな利点を備えています。

ブラウザでの普遍的なサポート。 SVG はすべての最新ブラウザが拡張機能なしでネイティブに開けます。HTML ページに組み込んだり、画像として配置したり、CSS の背景に使ったりしても、サイト訪問者の環境で同じように正しく表示されます。これにより受け手側の CAD ソフトへの依存がなくなります。

オープンな国際標準。 SVG は W3C によって策定されており、特定企業の運命に依存しません。これは長寿命を保証します。今日 SVG で公開された図面は数十年後にも読めます。

ロスレスな拡縮。 SVG のベクター内容は、どんなサイズに拡大してもピクセル化が起きません。同じファイルがカタログ内の小さなプレビューとしても、説明ページの大きな画像としても、大判印刷でも使えます。

標準的な図面での小さなファイルサイズ。 建築平面図、エンジニアリング図面、組立図は SVG なら高解像度のラスター画像より大幅に小さくなります。これがページの読み込みを速くし、モバイルユーザーの通信量を節約します。

どの編集ソフトでも編集可能。 SVG は XML テキストなので、任意のベクターグラフィックエディタ、ブラウザの開発者ツール、さらには通常のテキストエディタでも開いて編集できます。線の色、線幅、レイヤの可視性は簡単な書き換えで変更できます。

CSS によるスタイリング。 色、線幅、不透明度、SVG 要素の挙動は CSS ルールで指定できます。これによりサイトのダークテーマ、図面の印刷用とスクリーン用のスタイル、レスポンシブなグラフィックのバリエーションを、CAD で図面を再構築することなく簡単に対応できます。

アニメーションとインタラクティブ。 SVG は CSS とスクリプトによるアニメーションをサポートします。建物ビュー間の滑らかなトランジション、個々の部屋へのホバー反応、ユーザー選択による設備レイヤの表示、製造施設のインタラクティブナビゲーターなどが実現できます。

アクセシビリティ。 SVG は ARIA 属性や title、desc タグによる画像説明をサポートします。スクリーンリーダー利用者にとって重要であり、Web アクセシビリティ基準への準拠にも役立ちます。

検索エンジンによるインデックス。 SVG 内のテキスト (タイトル、凡例、ラベル) は検索エンジンに読み取られ、ファイル自体に意味のあるグループ名やレイヤー名を含めることができます。これは図面や技術図解を含むページの SEO 改善に寄与します。

制限事項と推奨事項

最大の制限は、SVG が CAD フォーマットの代替品ではないことです。オブジェクト間のパラメトリック依存性、正確な座標への拘束、寸法スタイル、寸法の関連付け、複雑な設定を持つビューポート。これらはすべて SVG では最終的なグラフィックとしてのみ表現されます。変換後に「AutoCAD と同じくらい便利に」変更を加えることはできません。SVG は公開のための最終文書であり、設計作業の代替ソースではありません。

2 つ目の制限は 3D コンテンツです。SVG は二次元形式であり、三次元モデルを直接変換することはできません。変換前に二次元ビュー (平面図、断面図、アイソメトリー) を準備する必要があります。これは建築・工学文書の通常の作業ですが、エクスポート前に CAD ソフトでの追加作業が必要です。

3 つ目の制限は非常に大きな図面です。DWG に数万のエンティティと多くのレイヤがある場合、生成される SVG が重くなることがあります。これにより弱い端末でのページ読み込みとブラウザ動作が遅くなります。Web 公開には必要なレイアウトまたはフラグメントだけをエクスポートするか、大きな図面を論理的な部分 (階、セクション、区画) に分けて複数の SVG にするのが合理的です。

4 つ目の制限はフォントです。SVG 内のテキストは受け手側に対応フォントがあるか、Web フォントが組み込まれている場合にのみ正確に表示されます。サイトの全訪問者で注釈の見た目が同一であることが重要な場合は、変換前に重要なテキストを曲線に変換してください。ファイルは重くなりますが、フォント置き換えのリスクをなくせます。

Web サイト向けに SVG を準備する場合は、変換後に最適化を行いましょう。座標の小数点以下桁数を減らす、サービスのメタデータやコメントを削除する、あまり使われていないグループを単純化するといった手順です。これによりファイルサイズが減り、ページの読み込みが速くなります。インタラクティブなシナリオには、レイヤとブロックに意味のある名前を保持してください。これらは SVG の識別子やクラスになり、開発者の作業を簡単にします。ページから図面を印刷する予定がある場合は、線幅と縮尺が印刷物で読めるかどうかを確認し、必要に応じて印刷用の CSS メディアクエリを設定してください。