Back

SVG 预览与检查器

粘贴或拖放 SVG,即可立即看到渲染结果,并显示一个包含尺寸、viewBox、元素分布、唯一颜色和安全标志的统计面板。预览在禁用脚本和 same-origin 访问的沙箱 iframe 中运行,因此恶意 SVG 无法执行代码。可将图像导出为 SVG 或 PNG,在白色、黑色和透明棋盘背景之间切换,或切换到源视图以检查标记。

规范

常见用例

  • 在嵌入之前快速预览 SVG 图标或插图
  • 检查不受信任的 SVG 是否包含嵌入的脚本或事件处理器
  • 验证 SVG 的 viewBox 和固有尺寸
  • 统计 SVG 中的唯一颜色(用于提取调色板或优化)
  • 将 SVG 转换为带彩色或透明背景的 PNG
  • 查看元素分布,发现意外的 <script> 或 <foreignObject> 使用

功能

  • 沙箱实时预览 — SVG 在 sandbox="" 的 iframe 中渲染,脚本和事件处理器无法执行
  • 背景切换:白色、黑色或透明棋盘图案
  • 统计面板:尺寸、viewBox、宽高比、字节大小、元素数量、主要元素、唯一颜色
  • 安全标志会突出显示包含 <script>、事件处理器、外部引用或动画的 SVG
  • 导出为 SVG 或高分辨率 (2×) PNG — 所选背景会被嵌入 PNG 导出中
  • 全屏预览以查看细节
  • 带语法高亮的源视图
  • 将规范化的 SVG 复制到剪贴板

示例

简单图标

试试看 →

用描边绘制的圆形内对勾图标

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

渐变填充

试试看 →

用线性渐变填充的矩形

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#0ea5e9"/></linearGradient></defs><rect width="100" height="100" fill="url(#g)"/></svg>

带动画的 SVG

试试看 →

使用 SMIL 动画的脉动圆 — Animations 标志会亮起

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><circle cx="50" cy="50" r="20" fill="#ef4444"><animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/></circle></svg>

提示

  • 使用 viewBox 而不是固定的 width/height,让图像能够正确缩放
  • 若 Scripts 或 Event Handlers 徽章亮起,嵌入后该 SVG 会执行代码 — 在信任它之前请先移除
  • 棋盘背景有助于发现意外的透明;切换到白色或黑色以预览在不同页面上的效果
  • PNG 导出以 2× 分辨率渲染;使用 SVG 导出以保留矢量质量
  • 外部引用(http:// 的 href)在沙箱预览中不会加载 — 这是有意为之
← 返回所有工具