SVG 查看器
在「输入」中粘贴或编写 SVG在左侧粘贴或输入 SVG 代码
在线SVG查看器，粘贴SVG代码即可实时预览渲染矢量图效果，支持复制和下载.svg文件，本地处理安全无忧。
相关推荐
什么是 SVG？
SVG（Scalable Vector Graphics，可缩放矢量图形）是用XML描述几何形状的图像格式。与JPG、PNG这种位图（像素矩阵）不同，SVG用<rect>、<circle>、<path>等标签描述图形的数学路径，因此任意尺寸缩放都不会模糊。
**SVG适合哪些场景？** Logo、UI图标、流程图、地图标注、图表、动画装饰、可复用插画——这些场景对清晰度、可改色、可缩放、可被CSS控制的要求都很高，SVG是天然选择。
**和Canvas的区别：** Canvas是命令式绘图API，绘图后变成像素；SVG是声明式DOM节点，可以随时修改属性、CSS样式、绑定事件。所以凡是图标、UI、可交互的场景用SVG，游戏、粒子、像素化艺术场景用Canvas。
**常见组成：** <svg>根节点、<g>分组、<path>路径（最常用，包含d属性）、渐变（<linearGradient>/<radialGradient>）、滤镜（<filter>）、动画（SMIL/CSS/JS）。
**怎么预览？** 通过本工具把SVG源码粘贴到编辑框，右侧实时渲染，配合可拖拽分栏布局，能在几秒内验证SVG代码是否正确、显示效果是否符合预期。
适用场景
- 前端开发需要快速预览SVG图标代码的渲染效果
- 从Figma、Sketch等设计工具复制SVG后验证显示效果
- 调试SVG路径、颜色或viewBox属性时实时查看变化
- 查看和验证SVG代码，确认无误后再集成到项目代码中
使用方法
- 将SVG源码粘贴到左侧编辑框，或点击「加载示例」查看演示效果
- 右侧即时显示矢量图渲染结果，可修改代码实时刷新预览
- 预览满意后点击复制按钮拷贝代码，或自定义文件名下载为.svg文件
功能特点
- 实时预览：粘贴或编辑SVG代码即时渲染矢量图效果，所见即所得
- 分栏布局：桌面端左右分栏可拖拽调整宽度，移动端标签切换输入与预览
- 一键导出：支持复制SVG源码到剪贴板，或自定义文件名下载为标准.svg文件
- 本地处理：所有SVG解析渲染在浏览器内完成，代码不上传服务器更安全
- 透明背景：棋盘格背景展示，清晰查看SVG的透明区域和边缘细节
- 字符统计：实时显示代码字符数，内置示例快速上手体验
常见问题
如何在线预览SVG代码效果？
将SVG源码粘贴到左侧编辑框，右侧会即时渲染显示矢量图效果。支持直接在编辑框中修改代码，预览区实时刷新，方便前端图标调试和效果验证。
预览后的SVG怎么下载保存？
点击预览区右上角的下载按钮，可自定义文件名后保存为标准.svg文件。也可以点击复制按钮将SVG源码复制到剪贴板，直接粘贴到项目代码中使用。
SVG代码会上传到服务器吗？安全吗？
不会。所有SVG解析和渲染均在本地浏览器内完成，SVG代码不会上传到任何服务器，处理完即焚，杜绝未公开的图标素材和设计稿泄露风险。
支持从设计软件复制的SVG代码吗？
支持。从Figma、Sketch、Adobe Illustrator等设计软件复制的SVG代码可直接粘贴预览。建议先查看渲染效果，确认无误后再集成到项目中。
为什么SVG预览不显示？常见原因？
常见原因：①缺少 xmlns="http://www.w3.org/2000/svg" 命名空间声明；②代码中存在未闭合标签；③特殊字符未正确转义；④SVG本身存在语法错误。请检查这几项。
可以自定义下载的SVG文件名吗？
可以。点击下载按钮后会出现文件名输入框，可自定义文件名（默认image.svg），按回车或点击确认即可下载，工具会自动补充.svg后缀。
术语表
- viewBox
- SVG内部坐标系，格式为"x y width height"。常见的"0 0 24 24"表示宽高24个单位。SVG实际显示尺寸由width/height属性或外部CSS控制。
- XML 命名空间（namespace）
- SVG必须声明xmlns="http://www.w3.org/2000/svg"，浏览器才会正确识别为SVG文档。缺少namespace是SVG在HTML中不显示的最常见原因。MDN - SVG Namespace
- path d 属性
- 路径指令集，由M/L/C/Q/H/V/Z等字母加坐标组成。M=移动、L=画线、C=三次贝塞尔曲线、Q=二次贝塞尔曲线、Z=闭合路径。复杂图标通常仅靠一个path加d属性表达。
- currentColor
- CSS关键字，指代当前元素的color属性。在SVG中把fill或stroke设为currentColor，外部CSS改color即可改变图标颜色，是设计系统的常用做法。
SVG 常见元素速查
| 元素 | 类型 | 用途 |
|---|---|---|
<svg> | 根节点 | 所有 SVG 的容器，必填 |
<rect> | 基础图形 | 矩形、圆角矩形 |
<circle> / <ellipse> | 基础图形 | 圆 / 椭圆 |
<line> / <polyline> | 基础图形 | 直线 / 折线 |
<polygon> / <path> | 路径 | 多边形 / 任意曲线（d 属性） |
<text> / <tspan> | 文本 | SVG 内嵌文字 |
<g> | 分组 | 组合节点应用统一变换 |
<defs> / <symbol> | 定义 | 可重用形状与渐变 |
<linearGradient> / <radialGradient> | 渐变 | 线性 / 径向渐变填充 |
<use> | 复用 | 引用 defs 中的元素 |
<filter> | 滤镜 | 模糊、阴影等高级效果 |
SVG 与位图格式对比
| 维度 | SVG（矢量） | PNG（位图） | JPG（位图） |
|---|---|---|---|
| 组成方式 | XML 描述几何路径 | 像素矩阵 | 像素矩阵（DCT 压缩） |
| 放大效果 | 任意缩放不糊 | 放大失真 | 放大失真且压缩痕迹更明显 |
| 文件大小 | 视路径复杂度而定，Logo 通常 < 10KB | 中（无损） | 较小（有损） |
| 透明背景 | ✅ | ✅ | ❌ |
| 动画支持 | ✅ SMIL / CSS / JS | ❌（需 APNG） | ❌ |
| 可被 CSS 改色 | ✅ currentColor / fill 变量 | ❌ | ❌ |
| 适合场景 | 图标、Logo、UI 矢量 | 透明背景素材、截图 | 照片、大面积渐变 |
Authoritative References
- ReferenceMDN - SVG 教程
- ReferenceMDN - <svg> 元素
- ReferenceWikipedia - Scalable Vector Graphics
- ReferenceW3C - SVG 规范