SVG 查看器
在线 SVG 代码编辑与实时预览工具
什么是 SVG 查看器？
SVG 查看器是一款在线 SVG 代码编辑和实时预览工具。它允许您直接编写或粘贴 SVG 代码，并即时查看渲染效果。SVG（可缩放矢量图形）是一种基于 XML 的矢量图像格式，广泛应用于网页设计、图标制作和数据可视化。本工具支持实时预览、源码查看、下载 SVG 文件等功能，是前端开发者和设计师的实用工具。 发布或提交前，应打开输出文件检查可读性、裁切、分辨率、顺序和内容缺失。
如何使用
如何使用
- 在左侧编辑器中输入或粘贴 SVG 代码
- 右侧面板实时显示 SVG 渲染效果
- 点击「源码」按钮查看格式化后的 SVG 源代码
- 点击「下载」按钮将 SVG 保存为文件
- 点击「复制 SVG」按钮将代码复制到剪贴板
SVG 安全提示
- 尽量只粘贴来自可信来源的 SVG；SVG 可能包含脚本、外部引用或意外的样式。
- 下载或嵌入前，请验证 viewBox、尺寸、填充、描边和文本在目标大小下的渲染效果。
使用场景
技术原理
SVG 源码通过 new DOMParser().parseFromString(source, 'image/svg+xml') 解析，返回一个基于 XML 规则构建的 Document，而非 HTML 的宽松解析器。解析器会检查格式良好性，在标记无效时显示 <parsererror> 节点，并像 DOM 其余部分一样将 SVG 树暴露给脚本和 CSS。<path>、<circle>、<rect>、<g>、<text>、<defs>、<linearGradient> 和 <filter> 等元素是一等节点，拥有自己的属性和事件目标。 坐标系统由 viewBox 属性控制。viewBox="minX minY width height" 定义内部坐标空间，preserveAspectRatio（默认为 xMidYMid meet）决定该空间如何映射到渲染视口：meet 通过添加信箱模式保留整个 viewBox，slice 通过裁剪填充视口，none 进行非均匀拉伸。d 属性中的路径命令使用 M（移动到）、L（直线到）、C（三次贝塞尔曲线）、Q（二次曲线）、A（椭圆弧）和 Z（闭合路径）；每个命令都有绝对大写形式和相对小写形式。 SVG 的安全性需要特别处理，因为该格式是可执行的：<script>、包含 HTML 的 foreignObject、指向外部 URL 的 xlink:href 以及 onload 等事件处理属性在 SVG 以行内方式注入时都可能在页面上下文中执行 JavaScript。使用带有 SVG 配置文件的 DOMPurify 或服务端清理器是接受第三方 SVG 时的标准缓解措施。转为 PNG 栅格图的方式是将 SVG（通过 Blob URL 加载为 HTMLImageElement）用 drawImage 绘制到画布上，然后调用 canvas.toBlob('image/png') 进行下载。
- 解析器：new DOMParser().parseFromString(source, 'image/svg+xml') 返回严格的 XML Document，失败时显示 <parsererror> 节点
- viewBox："minX minY width height" 设置内部坐标空间；preserveAspectRatio xMidYMid meet/slice 控制适配与裁剪
- 路径命令：M 移动到、L 直线到、C 三次贝塞尔曲线、Q 二次曲线、A 弧线、Z 闭合路径；大写 = 绝对坐标，小写 = 相对坐标
- 安全面：行内 <script>、foreignObject、指向远程 URL 的 xlink:href 以及 onload/onclick 处理程序都会作为 JavaScript 执行
- 清理措施：DOMPurify 配合 USE_PROFILES: { svg: true } 在插入第三方 SVG 前剥离脚本和事件处理程序
- PNG 导出：通过 Blob URL 将 SVG 加载到 HTMLImageElement，用 drawImage 绘制到画布上，canvas.toBlob('image/png') 进行下载
- 浏览器基线：自 2011 年以来所有主流浏览器均支持 SVG 1.1；SVG 2 特性（文字路径改进）仅部分支持
示例
圆形
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="#2563eb" />
</svg>矩形
<svg width="120" height="80" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="60" rx="8" fill="#10b981" />
</svg>星形
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,5 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35" fill="#f59e0b" />
</svg>常见问题
查看器有什么功能？
渲染粘贴的 SVG 代码，支持缩放和平移，带语法高亮显示源码，并标注图像尺寸和 viewBox。适合检查第三方 SVG、调试路径数据、或在添加到项目前预览图标。
SVG 会被上传吗？
不会。SVG 本质就是标记语言，浏览器原生就能渲染——页面在你的浏览器本地完成解析与渲染。粘贴的代码不会经过网络。
为什么 SVG 在这里和设计软件里看起来不一样？
SVG 的渲染依赖于用户代理。浏览器、Figma、Illustrator 和 Inkscape 在某些边缘场景（文字渲染、滤镜效果、网格渐变、剪切路径）上的处理方式不同。本查看器展示的是浏览器的渲染结果，也就是你的最终用户在 HTML 中看到的样子。
可以在这里编辑 SVG 吗？
你可以在左侧编辑源码后重新渲染。如需可视化编辑（拖动节点、修改路径），请使用 Inkscape、Figma 或 Boxy SVG 等专业 SVG 编辑器。本页面定位是查看器加快速文本编辑。
怎么把 SVG 用到我的项目里？
复制源码即可。大多数前端框架支持在 JSX/HTML 中直接内联 SVG。要作为背景使用，可放进资源目录并通过 url(...) 引用。要做成图标字体，需经过 svgo 等构建步骤再配合雪碧图生成器处理。
为什么我的 SVG 文件这么大？
很多 SVG 导出会附带编辑器元数据（Adobe Illustrator 的 XMP、Inkscape 的 :inkscape: 命名空间）、未使用的 defs、注释和冗长的路径数据。用 SVGO（在线版或 CLI 版）处理一遍，通常可缩减 30-70%，且视觉上无差别。
外部资源会被加载吗？
出于安全考虑，大多数查看器会屏蔽外部资源加载（不会请求外部 <image href> 或 <use href> URL）。如果你的 SVG 依赖这些资源，请将引用的位图改为 data: URI 内嵌，并将带外部 href 的 <use> 替换为内联副本。