什么是SVG 查看器？
SVG 查看器把左侧源码实时渲染到右侧，可切换棋盘格、纯白、深色三种背景，用「适应」把小图标放大到看得清，并为 fill="currentColor" 指定颜色，还能导出 PNG 或复制 Data URI。预览通过 <img> 加载，脚本不执行、外部资源不请求，代码不上传。
怎么用SVG 查看器？
- 1把 SVG 代码粘贴到左侧，或选择一个本地 .svg 文件。
- 2右侧立即渲染；继续改源码，预览逐字符同步。
- 3用「适应」放大小图标，用背景开关检查透明区域与深色底上的表现。
- 4图形用 currentColor 上色时，用取色器换颜色确认对比度。
- 5需要位图点「导出 PNG」，需要写进 CSS 点「复制 Data URI」。
在代码里怎么实现？
一次性操作用上面的工具，重复性工作建议固化到脚本或项目里。
CSS
HTML
/* Data URI 里的 # 必须转义成 %23，否则会被当成片段标识符截断 */
.icon {
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22 fill=%22%231d6f5c%22%3E%3Cpath d=%22M4 10h12%22/%3E%3C/svg%3E');
}常见错误与排查
| 现象 | 成因 | 修复 |
|---|---|---|
| 放大之后画布变大了，图形还是原来那么小，缩在左上角。 | 源码只有 width/height 没有 viewBox。没有 viewBox 时改尺寸只是改画布，坐标系不跟着缩放。 | 本工具会按 width/height 自动补一个等价的 viewBox 再渲染，所以这里的缩放是对的；把「复制 Data URI」得到的版本用到项目里，或手工给根元素加上 viewBox="0 0 宽 高"。 |
| 图标整块是黑的，或者在深色背景上完全看不见。 | fill="currentColor" 需要从父元素继承 color，在没有继承来源的环境里会解析成默认的黑色。 | 用工具栏的 currentColor 取色器指定颜色预览效果；在项目里则给包裹元素设置 color，或把 currentColor 换成具体色值。 |
| 从 React 组件里复制出来的 SVG 提示解析失败。 | JSX 用的是 strokeWidth、className 这类驼峰属性，还可能夹着 {...props} 表达式，都不是合法 XML。 | 改回 stroke-width、class 等连字符写法并删掉表达式。反方向的转换可以用本站的「SVG 转 React 组件」。 |
常见问题
预览别人给的 SVG 安全吗？+
安全。预览走的是 <img>，规范规定这种方式加载的 SVG 处于安全静态模式：里面的 <script> 不会执行，外部图片与字体也不会被请求。工具还会把检测到的脚本、事件属性与外链单独列出来——它们在这里无害，但一旦被内联进 HTML 就会真的执行。
为什么导出的 PNG 是这个尺寸？+
按当前显示的像素尺寸导出，所见即所得。「适应」模式下这个数字随窗口大小变化，需要固定尺寸就切到 100%、200% 或 400%，或者先在源码里把 width/height 改成目标值。边长上限 4096 像素。
和 SVG 优化压缩有什么区别？+
这个工具只负责看：渲染、缩放、换背景、换颜色、导出。优化压缩负责改：删掉设计工具留下的元数据、注释与多余空白。常见顺序是先在这里确认渲染无误，再去做压缩。
支持 SVG 动画吗？+
支持 SMIL（<animate>、<animateTransform>）和 CSS 动画，它们在 <img> 里照常播放。只有 JavaScript 驱动的动画不会动，因为脚本在这种加载方式下被禁用。