CAD SVG 导出 (.svg)

W3C 标准

可缩放矢量图形 (SVG) 是一种基于 XML 的矢量图像格式,用于二维图形,支持交互性、CSS 样式和动画。

将 SVG 转换为 PNG

免费的浏览器端 SVG 转 PNG 转换器。在您的设备上即时转换文件。

在线压缩 SVG

隐私保护 - 文件不会离开您的设备

检查与元数据

操作系统和文件分析器通过检查开头的二进制字节序列来识别 SVG 文件:

选择或将文件拖放到此处

隐私保护 - 文件不会离开您的设备

或粘贴 Ctrl+V
零网络传输隐私保证: 上传至外部服务器的数据为 0 字节。所有处理均在您的浏览器沙箱中本地完成。

字节级文件头签名 (魔数)

操作系统和文件分析器通过检查开头的二进制字节序列来识别 SVG 文件:

十六进制签名 (偏移量 0):

3C 73 76 67

ASCII 表示形式: <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 CanvasPDFPNG
渲染模型保留模式矢量 DOM即时模式位图画布保留模式固定页面容器栅格像素网格
样式与 CSS完全可通过 CSS 类和变量进行样式设计需要 JavaScript 画布 API 重新绘制不支持动态 CSS 样式固定栅格像素
无限可伸缩性是(数学矢量曲线)需要手动缩放分辨率是(矢量元素)否(放大时会出现像素化)
交互性原生 DOM 事件(悬停、点击、动画)需要手动计算命中区域静态文档需要图像映射或画布

常见损坏模式与十六进制恢复指南

浏览器显示 XML 解析错误:未闭合的标记或不匹配的标记。

根本原因: XML 语法畸形、缺少闭合标记或未转义的与号(使用 '&' 而非 '&amp;')。

恢复方法: 使用 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 服务。

历史渊源与里程碑

2018W3C SVG 2 候选推荐标准整合了现代 CSS 样式。
2011SVG 1.1(第二版)规范化了对移动端和桌面端浏览器的通用支持。
2001W3C 发布了由 VML 和 PGML 提案发展而来的 SVG 1.0 规范。

核心优势与特点

  • 无限分辨率独立性:在任何显示或打印比例下都能保持清晰的线条和文字排版。
  • 对于徽标、图标和 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)、不可见的组和未使用的命名空间声明,从而清理矢量路径。