开发者工具

SVG 在线查看与编辑器 - 实时预览、格式化与压缩 SVG

在线查看、编辑、预览、格式化并压缩 SVG，实时预览渲染效果，浏览器本地处理，无需上传文件。

打开任意 SVG 文件或直接粘贴 SVG 标记，即可在左侧编辑代码的同时，在右侧实时预览面板中即时查看渲染效果。这款在线 SVG 查看器与编辑器完全在浏览器本地运行，无需上传文件，支持缩放检查路径与形状、格式化或压缩 SVG 源码，操作结果可一键复制或下载。

将 SVG 文件拖放到此处

或点击浏览

代码

sample.svg • 673

预览

100%

100%
sample.svg

为什么要使用 SVG 查看器、SVG 编辑器和实时预览工具？

打开 SVG 文件或粘贴代码，边改边看渲染效果，并能格式化或压缩矢量标记，不用安装设计软件或桌面工具。

什么是 SVG 查看器与 SVG 编辑器？

SVG（可缩放矢量图形）是一种基于 XML 的二维矢量图像格式，支持交互和动画。本工具把 SVG 代码和渲染预览并排显示，修改代码、核对效果、压缩体积都在浏览器里完成，适合调试图标或微调矢量插图。

这款 SVG 查看器与 SVG 编辑器有哪些核心功能？

边改边预览

代码编辑器里的每次改动都会立即在预览面板中渲染。预览可在 10%–500% 之间缩放，放大后滚动查看路径、形状和样式细节。

在浏览器中处理

SVG 的读取、渲染和格式化都由浏览器里的 JavaScript 完成，打开的文件和粘贴的代码不会上传到服务器。

格式化、压缩与下载

「格式化SVG」按 4 个空格重新缩进标记；「缩小SVG」删除注释和标签之间的空白。结果可以复制，也可以下载为 .svg 文件。

如何使用 SVG 查看器与编辑器

  1. 1

    加载 SVG

    打开 .svg 文件、把文件拖到编辑器上，或直接把 SVG 代码粘贴进编辑器。

  2. 2

    实时预览

    右侧面板会随输入即时渲染 SVG。可以放大缩小，并滚动预览区检查形状、路径和样式。

  3. 3

    格式化或压缩代码

    点击「格式化SVG」按 4 个空格缩进整理标记；点击「缩小SVG」删除注释和空白，减小文件体积。

  4. 4

    复制或下载

    将优化后的 SVG 代码复制到剪贴板，或下载 .svg 文件用于项目。

参考资料

  • W3C — SVG 2

    W3C 官方规范，定义了 SVG 矢量图形格式的元素与属性。

  • MDN — SVG

    MDN 关于 SVG 元素、属性及浏览器中矢量图形渲染原理的参考文档。

相关工具

图片转 Base64

将 SVG 或光栅图片编码为 Base64 data URI，便于内联嵌入。

PNG 转换器

把 JPG、WebP、BMP、GIF、ICO 图片转换为 PNG。

XML 查看器

检查并格式化每个 SVG 文档底层的 XML 结构。

颜色转换器

转换 SVG 填充与描边中使用的 HEX、RGB、HSL 颜色值。

常见问题

这个 SVG 查看器免费吗？
是的，本工具对个人和商业用途完全免费。
你们会存储我的 SVG 文件吗？
不会。所有处理均在您的浏览器客户端本地完成，文件不会上传到任何服务器。
如何在线免费查看 SVG 文件？
直接将 .svg 文件拖入页面，或粘贴 SVG 代码，右侧预览面板立即显示渲染结果，无需注册或安装任何软件。
可以编辑 SVG 代码并实时查看效果吗？
可以。编辑器中的任何改动都会立即反映到预览面板，让您实时调整路径、颜色和尺寸。
如何在线将 SVG 转换为 PNG？
本工具只负责查看、编辑、格式化和压缩 SVG，不导出 PNG；本站的图片转换工具也不接受 SVG 文件。需要转成 PNG 时，可以用命令行渲染器，例如 rsvg-convert（rsvg-convert -w 512 -o icon.png icon.svg） 或 Inkscape（inkscape icon.svg --export-type=png）。想把 SVG 内联到网页，可以用「图片转 Base64」。
如何压缩 SVG 文件体积？
点击「缩小SVG」，工具会删除注释、标签之间的空白和换行，并把连续空格合并成一个，从而减小文件体积。
可以通过 URL 加载 SVG 吗？
不能直接加载，页面上没有 URL 输入框。可以先在浏览器里打开该链接，把 .svg 文件另存下来（或查看源代码复制标记），再在这里打开文件或粘贴代码。