DWG 转 SVG 转换器

什么是 DWG 转 SVG

DWG 转 SVG 是把 AutoCAD 工作图纸,转换为所有现代浏览器都支持的开放矢量图形格式 Scalable Vector Graphics 的过程。转换时,图纸的内容 (直线、圆弧、圆、多段线、填充、样条曲线、文字注释、标注、块、图层) 会在保留矢量本质的前提下被搬运到 SVG 中,文件由此可以嵌入 HTML 页面、在任何浏览器中打开、发给同事和客户,无需安装 CAD 程序,也无需任何专门软件,在手机、平板、笔记本和大屏显示器上都能清晰显示。

DWG 是 Autodesk 公司旗舰产品 AutoCAD 的专有格式,AutoCAD 是业界领先的计算机辅助设计系统。DWG 把图纸连同图层、块、标注、注释、布局、视口、动态块、外部参照、打印设置和自定义对象属性一起保存。该格式最显著的特点是,要以原生方式处理 DWG,需要 AutoCAD 授权或一款能正确读取该 DWG 版本的兼容 CAD 产品。文件结构是二进制的,为编辑器自身的工作流而优化,对于没有合适 CAD 程序的人来说,DWG 文件等同于无法访问的源文件 - 浏览器、操作系统和普通查看器都无法直接打开它。

SVG 是 W3C 联盟制定的开放矢量图形标准,所有现代浏览器都不需要任何扩展即可支持。SVG 用数学方式描述图像:每条直线、圆弧、圆或多段线都以带坐标和属性的路径集合形式存储。文件本身是 XML 格式的文本,因此 SVG 可以无损地缩放到任意尺寸,简单几何图形所占空间非常小,既可以在图形编辑器中编辑,也可以在文本编辑器中手动修改。SVG 会被搜索引擎收录,支持通过 CSS 实现动画、通过脚本实现交互,以及通过 ARIA 属性实现可访问性。

DWG 转 SVG 把封闭的工作源文件,变成可在 Web、文档和演示文稿中通用的矢量素材。转换之后,建筑平面图、工程示意图、装配图、总平面图或电气原理图在手机、平板、笔记本和大屏显示器上都同样清晰,放大不损失质量,并且可以方便地嵌入网站页面、技术说明书、报告、商务提案和教学材料。

DWG 与 SVG 格式对比

关键区别在于用途。DWG 是工程师的工作文档,在 AutoCAD 中创建、修改并最终定稿。SVG 则是用于在网站、浏览器、移动应用、PDF 文档和任何界面中展示成果的通用矢量文档。当你把 DWG 转换为 SVG 时,你就是从封闭的 CAD 源文件转向一份面向发布的开放素材。DWG 作为母版留在作者手中,用于所有项目工作,而 SVG 进入外部世界 - 进入企业网站、技术文档、营销材料、电子邮件和教育课程。

何时该用 SVG 而非 DWG

在网站上发布图纸

建筑事务所、工程公司、设计院和工厂经常面临在网站上展示图纸的需求:已建项目的平面图、生产线示意图、典型户型平面、建筑剖面图、电气连接图。直接发布 DWG 是不可能的 - 浏览器不支持这种格式,而让访客下载源文件会让没有 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 单独显示、隐藏或设置样式。结果是一个紧凑的文本文件,可直接嵌入页面。

图层与可见性的保留

图层是图纸最关键的组织元素之一。DWG 转 SVG 时,图层作为组被搬运过来,图层名成为组的标识符或类名。这对开发者和设计师都很方便:可以通过 CSS 或脚本对单个图层进行寻址,独立地设置样式或开关可见性。例如,在交互式总平面图上,一次点击切换管线图层的可见性,另一次点击高亮特定区域。图层状态 (可见、冻结) 在导出时会被考虑:源图纸中隐藏的图层通常不会进入 SVG,或以相应属性标记。

颜色、线宽与线型

AutoCAD 以多种方式存储线条颜色:索引颜色、真彩色 (RGB)、随层颜色、随块颜色。转换为 SVG 时,所有颜色都被转换为浏览器能理解的 RGB。图纸中设定的线宽以 stroke-width 属性传递。线型 (实线、虚线、点划线、点线) 通过 SVG 标准支持的 stroke-dasharray 属性转换。结果是图纸在浏览器中的显示效果接近其在 CAD 程序中的样子,略有屏幕比例与打印比例之间的差异。

文字与标注

DWG 中的文字注释被转移到 SVG 中,可以作为文本元素,也可以根据设置转换为曲线。文本元素保留了可编辑性、可选择、可复制以及可被搜索引擎收录,但要求接收方安装了相应字体,否则浏览器会用默认字体替换。转曲线可以保证任何接收方都看到相同的视觉效果,但会把文字变成图形,无法搜索和复制。如何选择取决于文件用途:对于含大段文字的技术文档,文本元素更合适;对于带品牌标注的建筑图框 - 曲线更合适。标注、引线和符号作为图形转移 - 直线、箭头和文字共同构成与原图纸中视觉相同的标注效果。

块与插入

AutoCAD 中的块是命名的几何定义,在图纸中被多次插入。转换为 SVG 时,块可以作为符号 (symbol 标签) 配合后续引用 (use 标签) 传递,这样可以保持文件紧凑;也可以作为带复制几何的普通组传递,这样更便于编辑。AutoCAD 特有的动态块在其当前视觉状态下被转换为普通块。块属性 (如果存在) 以普通文字的形式输出在块旁边。

模型空间与布局

AutoCAD 以两种方式存储图纸:模型空间 (几何以实际坐标绘制) 和布局 (模型视图为打印而排版)。转换时可以选择导出哪个空间。对于 Web 发布,通常更方便导出带有完整排版、图框和图签的特定布局,以获得可直接展示的 SVG。对于交互式服务中需要全部图纸几何而不需要图框的集成,则导出模型空间。如果文件有多个布局,每个布局都可以成为单独的 SVG。

填充、实体与渐变

填充作为填充路径或通过 pattern 标签的重复图案被转移到 SVG。纯色填充以简单的 fill 属性传递。渐变 (如果图纸中存在) 通过 linearGradient 和 radialGradient 标签描述。所有这些构造都被 SVG 标准原生支持,在所有现代浏览器中均能正确显示。

哪些文件最适合转换

理想候选:

• 用于建筑和设计公司网站发布的建筑平面图、立面图、剖面图
• 用于在线技术文档的工程示意图 (电气、给排水、供暖)
• 用于用户指南和安装手册的装配图与节点图
• 用于演示文稿和商务提案的总平面图和位置示意图
• 用于住宅和商业地产目录的典型户型和平面布局
• 用于讲义、课程和教学手册的教学配图
• 用于交互式导航地图的生产车间、厂房和仓库平面图

可用,但有保留:

• 含有大量填充和实体的图纸 - 结果应在网站上进行视觉检查;有时在转换前简化填充是值得的
• 含有大量特殊 AutoCAD 字体的文件 - 提前决定使用 Web 字体还是把文字转换为曲线
• 含有动态块和第三方插件代理对象的图纸 - 它们将简化为当前视觉表示
• 含有数万个实体的超大图纸 - SVG 会很大;对于 Web,合理的做法是只导出需要的部分或布局
• 含有外部参照的图纸 - 转换前最好把参照绑定到主图纸中,以获得独立的 SVG

没有必要转换:

• 仍需在 CAD 中多次编辑的未完成草稿
• 主要价值在于对象之间精确参数化依赖关系的图纸;SVG 只存储图形,不含参数化
• 用于向 CNC 机床输入几何的文件 - DXF 更适合生产
• 整个三维模型 - SVG 是二维的;转换前需要在 CAD 中准备好所需的二维视图

SVG 格式的优势

与 DWG 相比,SVG 具备几项独有的优势。

浏览器层面的通用支持。 SVG 在所有现代浏览器中都不需要任何扩展即可原生打开。文件可以通过 img 标签嵌入 HTML 页面、用作 CSS 背景或直接嵌入 HTML 标记 - 任何网站访客那里效果都同样正确呈现。这消除了对接收方拥有 CAD 程序的依赖。

开放的国际标准。 SVG 由 W3C 联盟制定,不依赖于某家厂商的命运。这保障了其长寿:即便某家公司停止支持,格式本身也不会消失。今天以 SVG 发布的图纸几十年后依然可读。

无损缩放。 SVG 的矢量内容可以缩放到任意尺寸而不会出现像素化。同一个文件既可以用于目录中的小缩略图,也可以用于描述页面上的大图,还可以以大幅格式打印。

典型图纸体积小。 建筑平面图、工程示意图和装配图的 SVG 体积远小于等效高分辨率栅格图像。这能加快页面加载速度,节省移动用户的流量。

可在任何编辑器中编辑。 SVG 是 XML 文本,因此文件可以在任何矢量编辑器、浏览器开发者工具,甚至普通文本编辑器中打开和修改。线条颜色、描边粗细、图层可见性只需简单改动即可。

通过 CSS 定制样式。 SVG 元素的颜色、线宽、透明度和行为都通过 CSS 规则设定。这让我们可以方便地支持网站深色主题、图纸的打印与屏幕样式、自适应图形变体,而不需要在 CAD 中重新导出图纸。

动画与交互。 SVG 支持通过 CSS 和脚本实现动画。可以做建筑视图之间的平滑切换、鼠标悬停于平面图个别房间时的响应、按用户选择显示管线图层、交互式生产车间导航。

可访问性。 SVG 支持 ARIA 属性,以及描述图像的 title 与 desc 标签。这对使用屏幕阅读器的用户很重要,也有助于符合 Web 可访问性标准。

可被搜索引擎索引。 SVG 内部的文字 (标题、标注、符号) 会被搜索引擎读取,文件本身也可以包含有意义的组和图层名。这有助于改善含有图纸和技术图示的页面的搜索引擎优化。

限制与建议

最主要的限制是 SVG 并非设计用来替代工作 CAD 格式。对象之间的参数化依赖、精确坐标关联、标注样式、关联标注、带复杂设置的视口 - 所有这些在 SVG 中只以最终图形的形式呈现。转换之后,"像在 AutoCAD 中一样方便地"进行修改是行不通的。SVG 是用于发布的最终文档,而不是项目工作的替代源文件。

第二个限制是三维内容。SVG 是二维的,三维模型无法直接转移到其中。转换前需要准备好二维视图 (平面图、剖面图、轴测图),这些视图才会进入 SVG。这是建筑和工程文档的常规做法,但在导出前需要在 CAD 程序中额外操作一步。

第三个限制是超大图纸。如果 DWG 中有数万个实体和众多图层,最终的 SVG 可能会很大 - 这会降低页面加载速度,在低性能设备上拖慢浏览器。对于 Web 发布,合理的做法是只导出需要的布局或片段,或者按逻辑部分 (楼层、分区、专业) 把大型图纸拆分为多个 SVG。

第四个限制是字体。SVG 中的文字只有在接收方有对应字体或连接了 Web 字体时才能正确显示。如果必须保证所有网站访客都看到一致的标注,在转换前请把关键文字转换为曲线 - 这会增大文件体积,但能消除字体被替换的风险。

如果 SVG 是为网站准备的,转换之后应进行优化:降低坐标的精度,删除服务性元数据和注释,必要时简化很少使用的组。这能减小文件体积并加快页面加载。对于交互场景,请保留有意义的图层和块名 - 它们将成为 SVG 中的标识符和类名,方便开发者使用。如果计划从页面打印图纸,请确认线宽和比例在打印时依然清晰 - 有时值得为打印媒体查询单独设置 CSS 规则。