SVG 查看与优化

安全预览 SVG、查看尺寸信息、生成 Data URI

功能介绍

粘贴 SVG 代码进行安全预览：渲染前会剥离脚本（script）、事件属性与外部引用，杜绝 XSS 风险。同时显示 viewBox 与尺寸信息，并可生成 Data URI 用于 <img> 内联。

使用说明

  • 粘贴完整 <svg> 代码，右侧安全预览
  • 面板显示 viewBox、宽高与文件大小
  • 「生成 Data URI」输出可直接用于 img src 的编码
  • 含脚本或外部资源的 SVG 会被剥离对应部分并提示

输入输出示例

输入示例

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" fill="#2563eb"/></svg>

常见问题

预览会执行 SVG 里的脚本吗？

不会。渲染前强制移除 script、on* 事件属性、foreignObject 与外部 href 引用，恶意 SVG 无法在预览中执行代码。

支持压缩吗？

当前版本提供基础清理（去除注释、空白）；深度优化（路径简化）建议使用 SVGO。

相关工具

  • 图片转 Base64 - 本地图片转 Data URI / Base64，预览并显示体积变化
  • 颜色转换 - HEX / RGB / HSL 互转，含对比度与色卡预览
  • Favicon 生成器 - 一张源图生成多尺寸 favicon.ico 与 PNG，本地 Canvas 处理
  • CSS 渐变生成 - 可视化生成 linear / radial 渐变 CSS 代码

本工具完全在浏览器本地运行，输入内容不会被上传或保存。