SVG Preview / Editor

SVG 预览器提供 SVG 代码的实时渲染预览，支持直接编辑 SVG XML 代码并立即查看效果。该工具为开发者提供所见即所得的 SVG 编辑和调试环境，可以快速测试 SVG 路径、样式、动画等代码的效果，并导出优化后的 SVG 文件。

SVG 预览是前端图标和插画开发的核心工具：前端开发者在编写自定义 SVG 图标时实时预览渲染效果、UI 设计师在导出 SVG 后验证与设计稿的一致性、Web 开发者在调试 SVG 动画（SMIL/CSS 动画）时逐一调整参数、以及在制作图表和可视化元素时手动调整路径、渐变和滤镜参数。

预览后可使用 SVG 优化器 压缩 SVG 文件。SVG 转 PNG 可生成位图版本。Mermaid 编辑器 生成的图表也可在此预览。图片转 Base64 可将 SVG 编码为内联格式。

SVG（Scalable Vector Graphics）是基于 XML 的矢量图形格式。浏览器通过 DOM 解析 SVG XML 构建 SVG DOM 树，然后渲染引擎（如 Blink/Skia）将矢量路径（path）、基本形状（rect、circle、ellipse、line、polygon）等元素栅格化为像素显示。CSS 可以通过样式表控制 SVG 元素的填充（fill）、描边（stroke）、透明度（opacity）、变换（transform）等。动画通过 SMIL（animate/animateTransform 元素）或 CSS @keyframes 实现。

• XML 解析错误：未正确关闭的标签或无效的属性会阻止 SVG 渲染。使用前建议通过 XML 验证器 验证结构完整性。
• 命名空间声明：内联 SVG（在 HTML 中）不需要 xmlns 属性，但独立 .svg 文件和 img src="file.svg" 中的 SVG 必须包含正确的 xmlns 声明。
• CSS 作用域：通过 img 标签引用的 SVG 文件不受当前页面的 CSS 影响，而内联 SVG 受外层 CSS 影响。两者在样式隔离上有显著差异。
• 脚本安全：SVG 中可以包含 JavaScript（通过 <script> 元素或事件处理属性），在使用不可信来源的 SVG 时需注意 XSS 风险。

在编写和调试 SVG 图标、验证 SVG 渲染效果或快速调整 SVG 参数时使用此工具。非常适合前端开发者在组件开发中的 SVG 调试。对于需要代码集成和自动化处理的场景，推荐使用 SVG.js、Snap.svg 或 D3.js 等 SVG 操作库在代码中动态创建和管理 SVG，它们提供更强大的数据绑定和动画能力。