CAD SVG 导出 (.svg)
W3C 标准可缩放矢量图形 (SVG) 是一种基于 XML 的矢量图像格式,用于二维图形,支持交互性、CSS 样式和动画。
将 SVG 转换为 PNG
免费的浏览器端 SVG 转 PNG 转换器。在您的设备上即时转换文件。
在线压缩 SVG
隐私保护 - 文件不会离开您的设备
检查与元数据
操作系统和文件分析器通过检查开头的二进制字节序列来识别 SVG 文件:
字节级文件头签名 (魔数)
操作系统和文件分析器通过检查开头的二进制字节序列来识别 SVG 文件:
十六进制签名 (偏移量 0):
3C 73 76 67ASCII 表示形式: <svg
标准化: W3C 推荐标准 (SVG 1.1 / SVG 2)
技术规格
| 容器架构 | 基于 XML 的文本标记文档,用于定义二维矢量几何图形 |
| 压缩方式 | Gzip / Brotli 文本压缩(SVGZ 使用 gzip 压缩) |
| 字节序 | 不适用(基于文本的 UTF-8 / UTF-16 字符流) |
| 色彩空间 | sRGB, CSS Color Module 4 (Display P3, lab, lch) |
| 通道与结构 | 无限分辨率矢量形状、贝塞尔曲线、排版文字和透明度蒙版 |
| 最大尺寸 | 与分辨率无关(可无限缩放至任意视口而不会像素化) |
| 透明度 | 完全可变的透明度通道以及 CSS 混合模式 |
| 流式传输与渐进式加载 | 支持由浏览器 XML 解析器进行渐进式文本流解析 |
技术对比矩阵:SVG 对比同类产品
| 技术属性 | SVG (当前) | HTML5 Canvas | PNG | |
|---|---|---|---|---|
| 渲染模型 | 保留模式矢量 DOM | 即时模式位图画布 | 保留模式固定页面容器 | 栅格像素网格 |
| 样式与 CSS | 完全可通过 CSS 类和变量进行样式设计 | 需要 JavaScript 画布 API 重新绘制 | 不支持动态 CSS 样式 | 固定栅格像素 |
| 无限可伸缩性 | 是(数学矢量曲线) | 需要手动缩放分辨率 | 是(矢量元素) | 否(放大时会出现像素化) |
| 交互性 | 原生 DOM 事件(悬停、点击、动画) | 需要手动计算命中区域 | 静态文档 | 需要图像映射或画布 |
常见损坏模式与十六进制恢复指南
浏览器显示 XML 解析错误:未闭合的标记或不匹配的标记。
根本原因: XML 语法畸形、缺少闭合标记或未转义的与号(使用 '&' 而非 '&')。
恢复方法: 使用 XML 代码检查工具(xmllint file.svg)进行验证并纠正不平衡的标记。
安全分析与解析器攻击向量
由于 SVG 是支持 '<script>' 标记和外部实体的可执行 XML,如果显示不可信的 SVG,将会带来显著的 XSS 和 SSRF 风险。
已知攻击向量
- 通过嵌入的 '<script>' 标记或 'onload=' 事件处理器进行存储型跨站脚本攻击 (XSS)。
- 在后端服务器上解析时,通过 XML 外部实体 (XXE) 攻击读取本地服务器文件。
- "十亿笑话" XML 实体扩展导致拒绝服务。
防御性最佳实践: 在嵌入前始终使用 DOMPurify 净化 SVG,或者使用 'Content-Security-Policy: default-src 'none'' 或以自动禁用脚本的 '<img>' 标记形式提供 SVG 服务。
历史渊源与里程碑
核心优势与特点
- 无限分辨率独立性:在任何显示或打印比例下都能保持清晰的线条和文字排版。
- 对于徽标、图标和 UI 界面元素而言,文件体积极小。
- 完全支持在浏览器 DOM 内部通过 CSS 和 JavaScript 进行脚本编写和样式定义。
技术局限与劣势
- 不适合用于照片或复杂的连续色调图像。
- 包含数千个节点的复杂矢量路径可能会导致 CPU 渲染延迟和严重的电池消耗。
- XML 的特性允许嵌入脚本,在渲染不可信的上传内容之前需要进行严格的净化处理。
趣味技术冷知识
- 由于 SVG 是纯 XML 文本,使用 Gzip 对其进行压缩(生成 .svgz 文件)通常可将文件大小缩减 70% 至 80%。
- viewBox 属性定义了一个抽象的坐标画布,该画布可动态映射到物理屏幕像素。
- 早期的网页浏览器最初缺乏原生的 SVG 引擎,促使 Adobe 在 2011 年左右原生浏览器支持巩固之前,分发了 Adobe SVG Viewer 浏览器插件。
常见技术问题
SVG 文件可以包含恶意代码吗?
可以。由于 SVG 是合法的 XML,它可以包含嵌入的 JavaScript ('<script>'),如果直接在浏览器中加载 SVG 或在内联 '<svg>' 元素中打开 SVG,该脚本就会执行。通过 '<img>' 标记提供 SVG 服务会自动使脚本执行失效。
我应该在什么时候使用 SVG 而不是 PNG?
当需要跨所有屏幕尺寸保持清晰缩放且文件体积较小时,请将 SVG 用于图标、徽标、图表、插图和文字排版。照片请使用 PNG 或 WebP。
如何优化大型或复杂的 SVG 文件?
您可以使用 SVGO 等工具,或使用 SVG 压缩工具,移除冗余元数据、编辑器注释(来自 Inkscape 或 Illustrator)、不可见的组和未使用的命名空间声明,从而清理矢量路径。
相关的 SVG 转换对
将 SVG 矢量文件转换为 PNG 光栅图像,把基于代码的可缩放图形转化为固定像素网格,以实现广泛的应用兼容性。
将光栅 PNG 图像封装在 SVG XML 矢量容器中,以便实现响应式网页缩放,并集成到支持矢量图的布局中。
将遗留的 16 位 Windows GDI 矢量绘图记录编译为现代、可缩放且无分辨率损失的 SVG 路径。
将 32 位 Windows 增强型元文件图形转换为适用于网页和设计软件的清晰、简洁、可响应式缩放的 SVG 矢量图。
将 DXF 图纸转换为 CAD SVG 导出,可将复杂的工程矢量数据转换为适用于网页浏览器和矢量编辑器的轻量级 XML 图形。
将可缩放矢量图形转换为图形交换格式,可将适用于网页的视觉矢量图转换为计算机辅助设计软件所需的精确数学坐标。
将 SVG 徽标或插图共享为单页 PDF。其可缩放路径变为固定分辨率的图像,因此缩放无法恢复矢量细节。