无需安装体积庞大的 Illustrator，在浏览器本地直接打开 .svg 文件或粘贴 <svg> 源代码。一键切换棋盘格与深浅背景色、诊断 viewBox 坐标边界并审阅底层 XML 结构，文件零上传。
或点击浏览
看看 UI 设计师与前端工程师如何利用 SVG 查看器排查纯白图标隐身、画板裁切与冗余编辑器代码问题。
系统自带文件夹或普通浏览器标签页默认使用纯白背景，导致深色模式专用的纯白（#FFFFFF）图标看起来像空白坏文件。在预览区一键切换为“黑色”或“透明网格”背景后，2px 矢量描边与半透明阴影立即清晰呈现。
右侧“文件信息”面板即时提取根标签的 Width、Height 与 ViewBox 坐标字符串（min-x min-y width height）。快速发现因缺失 viewBox 或负坐标溢出导致的网页端图标无法自适应缩放问题。
画布区实时渲染内嵌的 CSS @keyframes 与 SMIL <animate> 动画效果，下方代码面板完整展示 XML 树结构。轻松排查写死的颜色值（#3B82F6）、隐藏图层或冗余元数据，并可一键跳转至 SVG 优化器瘦身。
Windows 资源管理器常常无法显示 SVG 缩略图，而为了看一眼图标结构专门启动几个 G 的 Adobe Illustrator 又过于繁琐。本工具专为解决以下高频场景而设计：
当您收到一批用于深色界面的白色或浅色 SVG 图标时，直接双击打开往往只能看到白茫茫一片。通过切换透明棋盘格、纯黑、纯白或自定义背景色，一秒看清每一个细节与抗锯齿边缘。
在将 SVG 集成到 React/Vue 组件、微信小程序或移动端工程之前，无需手翻代码即可直观查看其声明的 Width、Height、ViewBox 边界数值以及精确的字节大小。
想确认一个 SVG 里的文字有没有转曲（是 <path> 还是 <text>）、颜色是否使用了动态 currentColor、或者是否包含可疑脚本？底部内置代码面板让您一目了然并支持一键复制。
我们的本地浏览器解析引擎支持所有主流设计软件与开发框架输出的矢量图形格式：
支持直接拖入由 Figma、Illustrator、Inkscape、Sketch、MasterGo 或 CAD 软件导出的标准 .svg 文件。
切换至“粘贴 SVG 代码”选项卡，可直接粘贴从网页 F12 开发者工具、Iconfont 或前端组件中复制出来的 <svg> 源码进行实时渲染。
完整支持内嵌 <style> 关键帧动画、线性/径向渐变（<linearGradient>）、蒙版裁切（<clipPath>）以及原生 <animateTransform> 动态图形。
在本地安全沙箱中精准还原所有矢量基本图形（<path>、<circle>、<rect>、<polygon>）及内联 data:image/*;base64 位图图层。
将本地 .svg 文件拖入上传框（或点击“加载示例 SVG”立即体验），也可以切换到“粘贴 SVG 代码”标签页直接输入 <svg> 源码。
点击预览画布上方的背景切换按钮（透明网格、白色、黑色或自定义取色器），全面测试图标在不同底色下的视觉表现。
在右侧属性栏查看解析出的文件名、精确体积（KB/Bytes）、声明的宽度（Width）、高度（Height）以及核心 viewBox 坐标参数。
在底部“SVG 代码”窗口审阅或一键复制源码；也可直接点击右侧操作区的“转换为 PNG”或“优化 SVG”无缝衔接上下游处理。
完成视觉对比度测试与属性核验后，您可以直接将结果应用于以下开发与设计流程：
直接复制经过核验的 XML 源码粘贴至 HTML、React JSX 或 Vue 模板中，方便配合 CSS fill: currentColor 实现图标随文字颜色动态变色。
先在查看器中确认图形没有被画板边缘裁切、透明通道完好，再点击“转换为 PNG”导出 4K 或 300 DPI 高清位图，避免盲目转换返工。
若在代码区看到大量 Illustrator 私有的 <i:pgf> 数据块、未使用的 <defs> 或冗长的小数点坐标，可立即使用“优化 SVG”将其体积削减 40%–80%。
如果加载后画布看起来空白、图形残缺或字体改变，说明查看器帮您揪出了源文件本身的潜在缺陷：
最常见的原因是图标路径本身为纯白色（#FFFFFF）而背景恰好也是白色；或者图形路径的绘制坐标超出了 viewBox 声明的可视窗口范围。
首先点击“预览背景”切换为“黑色”或“透明网格”；若仍无图形，请查看底部 XML 源码，核对 viewBox="x y w h" 与 <path d="M..."> 起始坐标是否匹配。
源码中使用了 <text> 标签并指定了本地电脑未安装的商业字体名称，且未嵌入字体文件。
在底部代码框搜索是否存在 <text> 标签。为了保证跨设备显示一致，请回到设计软件将文字“创建轮廓（转曲为 <path>）”后重新导出。
出于浏览器安全沙箱与跨域（CORS）保护机制，独立预览容器会拦截向第三方服务器发起的外部图片请求。
请将外部引用的位图转换为内联 Base64 编码（data:image/png;base64,...）直接写入 SVG 源码中。
了解“SVG 查看器”与本站“SVG 优化器”及“SVG 转 PNG 转换器”的功能分工，高效组合使用：
| 对比维度 / 场景 | SVG 查看器与代码检查（当前工具） | SVG 代码优化瘦身器 (/svg-optimizer/) | SVG 转 PNG 转换器 (/) |
|---|---|---|---|
| 核心功能定位 | 多背景视觉预览、ViewBox 与尺寸属性诊断、XML 源码透视检视 | 自动剥离编辑器冗余元数据与注释，无损压缩 .svg 矢量文件体积 |
将矢量 .svg 文件或代码光栅化渲染为 32 位高清透明 .png 位图 |
| 最终交付产物 | 视觉与属性质检报告、可复制的格式化 XML 源码、原文件下载 | 体积缩小 40%–80% 的轻量化生产级 .svg 矢量文件 |
指定像素宽高与 300 DPI 印刷元数据的高清 .png 图像文件 |
| 背景对比度测试 | 支持透明棋盘格、纯白、纯黑及任意自定义颜色实时切换测试 | 提供优化前后双栏视觉对比预览 | 将所选背景色（透明或纯色）永久合成写入导出的 PNG 像素中 |
| 尺寸与属性透视 | 专门展示文件名、字节大小、Width、Height 与完整 ViewBox 坐标串 | 重点展示原始体积、优化后体积与节省百分比（%） | 重点控制目标输出像素分辨率（px）与物理打印 DPI |
100% 安全且私密。本 SVG 查看器完全运行在您的浏览器本地环境中，利用前端 FileReader 与原生 DOM 解析技术读取文件。您的 .svg 文件与粘贴的源码绝不会离开您的设备，也不会向任何服务器发送数据。
viewBox="min-x min-y width height" 定义了 SVG 内部画布的虚拟坐标系（决定了图形的纵横比与可视边界），而 width 和 height 定义了它在网页或软件中默认渲染的外部显示尺寸。只要具备正确的 viewBox，SVG 就能在任意尺寸容器中无损自适应缩放。
完全支持！不同于操作系统文件夹静态缩略图，我们的浏览器实时预览画布原生支持 CSS @keyframes 关键帧动画、悬停过渡以及 SVG SMIL（<animate>、<animateTransform>）动画的 60 帧流畅播放。
许多前端图标库（如 Heroicons 或精简后的响应式 SVG）在导出时会故意省略根标签上的固定 width 和 height 属性，仅保留 viewBox，以便通过外部 CSS 类名灵活控制大小。这属于正常的响应式最佳实践。
非常方便：在预览区右侧的“操作（Actions）”面板中，您可以直接点击“优化 SVG”跳转至代码瘦身工具清理冗余节点，或点击“转换为 PNG”将其导出为高分辨率透明 PNG。
每个工具专注解决一个具体需求，点击下方卡片可切换至对应工具页面。
清除 Illustrator/Figma 导出的冗余元数据、注释与多余小数位，在不改变视觉效果下缩减 40%–80% 体积。
将矢量 SVG 无损转换为透明底 PNG，支持自定义宽高像素（px）、4倍超清放大及 300 DPI 印刷元数据写入。
一次拖入数十或数百个 SVG 图标文件，批量导出为 PNG、JPG 或 WebP 并自动打包为 ZIP 下载。
上传一张高清图，一键生成包含多尺寸 favicon.ico、Apple Touch Icon 及 Android/iOS 应用图标的完整压缩包。