SVG 预览
预览 SVG 文件并查看源代码
- 文件不会离开你的设备
- 在浏览器本地运行
- 免费、免注册、无水印
拖放 SVG 文件到这里，或点击选择
支持 SVG、SVGZ · 也可以用 Ctrl+V / ⌘V 粘贴
提示：在页面任意位置按 Ctrl+V / ⌘V 即可粘贴 SVG 代码。
如何使用SVG 预览
打开 SVG 文件或粘贴代码，安全地查看：缩放、平移、切换背景，查看显示尺寸、width、height、viewBox 和元素数。可直接编辑源代码并实时预览，文件里的脚本绝不会执行。
- 1
把 SVG 或 SVGZ 文件拖到页面上，或在「或者粘贴 SVG 代码」中粘贴后点「添加 SVG」；在页面任意位置按 Ctrl+V 也可以。
- 2
用「棋盘格」「白色」「黑色」切换背景；用按钮、Ctrl/⌘ + 滚轮或快捷键 + − 0 1 缩放，拖动平移，双击适应窗口。
- 3
在「详细信息」中查看显示尺寸、width、height、viewBox、文件大小和元素数；鼠标悬停在图上会显示 SVG 坐标。
- 4
在「源代码」里修改代码，预览随输入更新；语法错误会标出行号和列号。
- 5
在「导出」中点击「下载 SVG」或「复制 Data URI」。
常见问题
打开来源不明的 SVG 安全吗？
安全。SVG 只以图片方式显示，其中的脚本和事件处理程序不会执行，引用的网络文件（图片、字体、样式表）也不会加载。文件不会上传。
为什么 SVG 在这里能显示，在浏览器或 img 标签里却显示不出来？
多半是缺少 xmlns 声明。预览会自动补上并给出提示，点「补到代码里」修正源代码后再下载即可。
为什么尺寸显示为 300 × 150？
这个 SVG 既没有 width/height 也没有 viewBox，只能按浏览器默认尺寸处理。如果只是缺少宽高，尺寸会取自 viewBox。
「复制 Data URI」复制的是什么？
一段 URL 编码的 data:image/svg+xml 字符串，可直接用在 CSS 的 background-image 或 img 的 src 中。需要 Base64 格式或更小的体积，请用 SVG 优化器。
能打开 .svgz 文件吗？
能。gzip 压缩的 SVGZ 会在浏览器中解压，「下载 SVG」保存的是未压缩的 .svg 文件。