🎨 SVG查看器/优化器
编辑、预览、优化SVG代码，转换为Data URI或Base64格式
点击或拖拽SVG文件到这里
什么是 SVG 查看器？
SVG 查看器是一款用于预览、检查和调试 SVG（Scalable Vector Graphics）文件的在线工具。SVG 是基于 XML 的矢量图形格式，由 W3C 标准定义，广泛用于图标、插画、图表、Logo 和界面图形。与位图（PNG/JPG）不同，SVG 可以无损缩放到任意尺寸，文件体积小，且可通过 CSS 和 JavaScript 进行动态修改。本工具支持直接上传 SVG 文件或粘贴 SVG 代码进行实时预览，同时显示 SVG 的源代码、元素结构树、尺寸信息（viewBox）、内联样式等，帮助开发者调试 SVG 的渲染问题和优化 SVG 代码。
如何使用 SVG 查看器
- 步骤一：加载 SVG — 拖拽 SVG 文件到上传区域，或粘贴 SVG 代码到编辑器中。工具立即渲染并显示预览效果。
- 步骤二：检查和调试 — 查看 SVG 源代码、元素树、属性面板。修改颜色、尺寸、路径等属性后实时更新预览。检查 viewBox 设置是否正确，元素是否正确嵌套。
- 步骤三：优化和导出 — 查看文件大小，检查可优化的元素（冗余属性、未使用的定义）。复制优化后的 SVG 代码或下载为 .svg 文件。
常见使用场景
场景一：调试图标显示异常
图标在浏览器中显示不完整、颜色不对或尺寸异常时，使用 SVG 查看器检查源代码。常见问题包括：viewBox 设置不正确导致裁剪、fill 属性继承导致颜色异常、路径坐标超出 viewBox 范围。
场景二：SVG 代码审查和优化
设计工具（如 Illustrator、Figma）导出的 SVG 通常包含大量冗余代码：编辑器元数据、未使用的定义、精度过高的数值。使用查看器审查代码结构，手动或通过 SVGO 优化工具清理。
场景三：学习和理解 SVG 语法
通过修改 SVG 源代码并实时查看效果，直观学习 SVG 的各种元素（rect、circle、path、text）和属性（fill、stroke、transform）的含义，比阅读文档更高效。
技术原理
SVG 是基于 XML 的文本格式，使用标签描述图形元素。<svg> 是根元素，viewBox 定义坐标系统，width/height 定义显示尺寸。<path> 使用 d 属性描述路径（M 移动、L 直线、C 贝塞尔曲线、Z 闭合等）。SVG 可以直接嵌入 HTML，作为 <img> 的 src，或通过 CSS background-image 引用。作为内联 SVG 时，可以用 CSS 修改其样式。
<!-- 基本 SVG 结构 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
<circle cx="50" cy="50" r="40" fill="#4F46E5" stroke="#333" stroke-width="2"/>
<text x="50" y="55" text-anchor="middle" fill="white" font-size="16">SVG</text>
</svg>
<!-- path 路径示例 -->
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"
stroke="#4F46E5" fill="none" stroke-width="3"/>最佳实践与注意事项
- 始终设置 viewBox 属性以确保 SVG 在不同尺寸下正确缩放，避免使用固定 width/height。
- 使用 SVGO 或 SVGOMG 工具优化 SVG 文件，通常可以减少 30-60% 的文件体积。
- 需要 CSS 控制颜色时，使用
fill="currentColor"让 SVG 继承父元素的文本颜色。 - 内联 SVG 可以使用 CSS 样式和 JavaScript 交互，但会增加 HTML 体积。图标建议用 <symbol> + <use> 复用。
常见问题
Q：SVG 图标为什么不显示或显示不完整？
A>常见原因：1）缺少 viewBox 属性，SVG 没有定义坐标系统；2）viewBox 范围不包含实际图形内容（坐标超出范围）；3）SVG 文件本身有错误（XML 语法问题）。使用本查看器可以快速定位问题。
Q：如何让 SVG 图标跟随文字颜色变化？
A>将 SVG 中的 fill 属性设为 "currentColor"，然后 SVG 会自动继承父元素的 color 值。示例：<path fill="currentColor" d="..."/>，设置父元素 color: red，图标就变红。
Q：SVG、Canvas 和 WebGL 应该如何选择？
A>SVG 适合静态矢量图形、图标、简单动画（DOM 元素，可绑定事件）；Canvas 适合大量 2D 绘制、游戏渲染（像素操作，无 DOM）；WebGL 适合 3D 图形和高性能计算。通常图标用 SVG，图表用 Canvas/SVG，3D 用 WebGL。
Q：SVG 文件体积太大怎么优化？
A>使用 SVGO 命令行工具或 SVGOMG 在线工具优化。常见优化：移除编辑器元数据、精简数值精度（3.45678→3.46）、合并相同样式的路径、移除不可见元素、将内联样式转为 class。通常可减少 30-60% 体积。
Q：如何在 React/Vue 中使用 SVG 图标？
A>方案一：将 SVG 作为组件导入（SVG 转 JSX/模板）。方案二：使用图标库组件（如 react-icons）。方案三：使用 <img> 或 background-image 引用 SVG 文件。方案四：使用 SVG sprite（<symbol> + <use>）实现复用。