SVG 工具

SVG Viewer

查看 SVG 源码、结构树和文件信息,快速了解图形由哪些部分组成。

SVG 内容仅在您的浏览器中处理,不会上传到服务器。

这个工具是什么

SVG Viewer 将一个 SVG 文件拆分为容易查看的信息:显示宽高、内部坐标范围、路径与分组数量,并列出元素结构。适合在使用图标、插图或下载素材之前确认文件内容。

如何使用

  1. 选择一个 SVG 文件,或粘贴完整 SVG 源码。
  2. 点击查看,阅读宽高、viewBox、文件大小与元素统计。
  3. 展开结构树查看各部分,或在源码区查找原始文字。
  4. 查看安全提示,并通过静态预览核对图形外观。

功能说明

  • 文件信息包括宽高、viewBox、元素、路径、分组、渐变和 symbol 的数量。
  • 源码作为文字显示,结构树可展开与收起;查看操作不会修改输入文件。
  • 原始内容与安全预览分开显示,遇到被移除的内容会提示。

查看源码与预览的区别

  • 源码区保留输入文字,包括注释和可能被预览移除的内容。看到这些文字并不代表它们会在页面上运行。
  • 预览只显示支持的静态图形。需要调整背景或仔细放大查看时,可使用 SVG Preview。

SVG 安全说明

预览使用经过安全处理的静态副本,不运行脚本、点击事件或动画,也不加载外部图片、字体和样式。外部引用、内嵌网页和不支持的内容会被移除,因此预览可能与原文件不同。含 DOCTYPE 或自定义实体的文档不受支持。

SVG 文件或 UTF-8 源码最多 2 MiB,最多 20000 个节点(包括元素和文本),嵌套深度最多 96 层。内容过大或结构过于复杂时,请先简化文件。

隐私

SVG 内容仅在您的浏览器中处理,不会上传到服务器。

工具不会自动保存输入或结果。请在清空或离开页面前下载需要保留的文件,并保留原始副本。

FAQ

SVG 文件是什么?

SVG 是用 XML 描述图形的文件,可包含路径、形状、文字和渐变。矢量部分通常可以放大而不出现像素锯齿。

为什么 SVG 可以包含代码?

SVG 用带标签的文字记录图形,也可能附带脚本、事件或外部引用。查看文字内容与运行这些内容是不同的操作。

SVG Viewer 会执行脚本吗?

不会。源码和结构树以文字显示,预览则使用移除脚本与交互内容后的静态副本。

SVG 中的外部资源会加载吗?

不会加载外部图片、字体或样式。依赖这些资源的部分可能无法显示,工具会提示被过滤的内容。

返回开发者工具分类首页