它在别人发给我的文件里发现了。危险吗？

这完全取决于文件去哪里，报告会说明是哪种情况。内联粘进页面时，SVG 的脚本以那个页面的源运行——它的 cookie、它的存储、它的 DOM。作为或 CSS 背景加载时，它根本不运行。这里的预览在渲染之前已经把它移除，渲染所在的框架无论如何都不能运行脚本，所以不管怎样，在这个工具里查看这个文件是安全的。

SVG 编辑器与解读

SVG Editor and Explainer

一边在实时渲染旁边改 SVG，一边解释这个文件：viewBox 与缩放、变换、每一条路径命令、继承来的填色、白白占地方的字节，以及它在 <img>、data URI 和内联三种用法下各会坏在哪里。

在渲染结果旁边编辑 SVG，并读一个面板，它说的是这个文件实际是什么：它会不会缩放，每个 transform 在向下传到形状的路上做了什么，d 属性逐条命令拼出了什么，一个 fill 如何经由继承解析出来，编辑器残留占了多少字节，以及同一个文件被用作 <img>、CSS 背景或内联粘贴时各会坏在哪里。每条发现都指向它所针对的那个属性。它是一组作用于解析后文件的规则，不是一个模型，所以它报告那里有什么，从不猜这个文件是干什么用的。

🔒 完全在你的浏览器里运行svgeditorviewboxexplainaccessibility

示例

SVG 源码

放一个 .svg 文件进来

在这个标签页里读。什么都不上传。

在这里打字，预览会跟着走。在预览里点一个图形，源码就跳到它那个元素。

预览

背景

能点的虚线框只盖住那些光看文件就能算出盒子的图形。<text>、<use> 和没有尺寸的 <image> 得有渲染器才知道，所以它们要从源码里选。

预览画的是从解析出来的树重新拼出来的标记，放在沙箱框里——从来不是你的原始字节。这个框是固定大小的盒子，整块都交给这个文件，所以一个没法缩放的文档，填不满这个盒子是看得见的。

字节

395

元素

图形

路径命令

最深嵌套

这个文件是什么

说明画框
有尺寸，也能缩放
width="24" 和 height="24" 给了它固有尺寸，而 viewBox="0 0 24 24" 让这个尺寸成为起点而不是上限。在 CSS 里给它换个宽度，里面的一切都会按比例重新缩放。图标要的就是这种。
说明坐标
一个用户单位值多少
里面的坐标横向从 0 到 24，纵向从 0 到 24。按声明的宽度 24，一个用户单位画出来是 1个 CSS 像素——而这个数会随文件实际拿到的尺寸变化。
说明路径
绝对命令和相对命令混在一起
同一条路径里有 3条绝对命令和 6条相对命令。两种都合法，画出来的形状也一样；实际的区别在于，全用相对命令写的路径只改第一个 M 就能整体挪动，而这一条不行。
说明上色
currentColor：颜色由页面决定
有 1个属性用 currentColor 上色。currentColor 会解析成 SVG 所在位置继承到的 CSS `color` 属性。内联在页面里时，这正是图标想要的：跟着周围文字的颜色走，切换主题也自动跟上。但当作 <img> 或 CSS background-image 使用时，它没有可以继承的元素，什么也解析不到，结果就是黑色。
说明无障碍
名称：「보관함에 저장」
<title> 是图形的无障碍名称，大多数查看器在鼠标悬停时还会把它当提示显示出来——所以把文件名写进 <title> 还不如不写。这里写的是「보관함에 저장」。
说明无障碍
没有 <desc>
<title> 是简短的名字；<desc> 是给内容本身很重要的图形——图表、示意图、地图——写的较长说明。图标用不着，加一个空的 <desc> 比不加还糟。

选中的元素

在预览里点一个图形，或者把光标放进源码里的某个元素。

用 SVG 优化压缩把多余的东西剥掉 · 变成 CSS 的 data URI · 单独处理某一条路径

怎么用

粘贴 SVG，或拖入文件
源码框接受粘贴，拖放区接受 .svg。一切都在这个标签页里读取。两个窗格上方的四个示例值得先点一下：每个都是一种不同形态的真实文件，报告对每一个说的都不一样。
先读“画框”一节
它说明这个文档是四种形态中的哪一种，这决定了后面的大部分内容。有 viewBox 又有 width 和 height 的会缩放，并且有自己的尺寸；只有 viewBox 的会填满给它的任何盒子；有 width 和 height 却没有 viewBox 的根本不缩放，这就是从设计工具里复制出来的图标常常拒绝改变大小的原因。预览给文件一个固定的盒子，所以你能看出它是哪一种。
点一个形状让两个窗格对齐
在预览里点一个轮廓，光标会落到源码里那个元素上，元素面板随之填满：从最外层元素向下的 transform 链、累积矩阵做了什么、经由继承解析出来的绘制属性，以及对于路径，每条命令的白话解释。在源码里移动光标，则反向选中。
用“显示给我看”按钮，不要搜索
每条发现都带着它所针对的源码范围，所以上面的按钮会精确选中那些字符——是带重复 id 的第二个渐变而不是第一个，是那一个属性而不是包着它的标签。
把大小方面的发现带去优化器
大小一节数字节并点名它们是什么——编辑器元数据、一个没用到的渐变、没人选过的七位小数——但这个工具不改写你的文件。SVG 优化器对整个文档一次做完那一遍，并显示前后差异，你能确认没有东西移位。

常见问题

为什么我在 CSS 里设了宽度，图标却不变大？

几乎总是因为文件有 width 和 height 却没有 viewBox。没有它，用户单位就是 CSS 像素，浏览器没有任何映射可以用来重新缩放——盒子变大了，画的东西留在原地。“画框”一节会说明这一点，并给出要加的那个 viewBox，通常是“0 0 <width> <height>”，数字就用文件里已有的。

我内联了两个图标，第二个丢了渐变。为什么？

它们的 id 撞了。设计工具生成 a、Layer_1 和 SVGID_1_ 这样的名字，两个文件一进同一个页面，每个 url(#a) 都解析到文档里先出现的那个——所以第二个图标悄悄借用了第一个的渐变或裁剪路径。可移植性一节标出导出器生成的 id，正是为了这个。内联之前给每个 id 加上这个文件独有的前缀。

文件在我的页面上正常，作为 CSS 背景却渲染成空白。变了什么？

有三处不同，报告会点出适用的那一处。缺 xmlns 在 HTML 解析器里被宽恕，在其他任何地方都是致命的。currentColor 在页面之外没有东西可以继承，所以变成黑色。在 <img> 或 background-image 里外部引用根本不会被抓取，所以需要它们的元素什么都画不出来。另外，十六进制颜色里的 # 会截断 data URI，除非写成 %23。

我路径里的一个洞被填成了实心。要把它移开吗？

不要——把它反向。在默认的 fill-rule="nonzero" 下，内圈只有在绕行方向和包着它的圈相反时才是洞，所以一个被填实的洞是方向问题，不是位置问题。路径一节会说明有多少个子路径以及哪条规则在起作用。反转一个子路径是 SVG 路径工具做的事。

它在别人发给我的文件里发现了 <script>。危险吗？

这完全取决于文件去哪里，报告会说明是哪种情况。内联粘进页面时，SVG 的脚本以那个页面的源运行——它的 cookie、它的存储、它的 DOM。作为 <img> 或 CSS 背景加载时，它根本不运行。这里的预览在渲染之前已经把它移除，渲染所在的框架无论如何都不能运行脚本，所以不管怎样，在这个工具里查看这个文件是安全的。