SVG 预览 / 编辑器

SVG 预览 / 编辑器如何工作

工具功能

SVG 预览 / 编辑器会在你编辑 SVG 标记时实时渲染，并提取元数据（width、height、viewBox、元素数量）以便快速检查。一个开关可添加棋盘格背景，让你清晰看到透明区域。该工具还会生成经过 URL 编码的数据 URI，可直接用于 CSS background-image 或 HTML src 属性。

常见开发者使用场景

图标设计师在不同尺寸下测试 viewBox 计算和描边宽度。前端开发者验证手工编辑的 SVG 图标在优化后（手动或通过 SVGO）仍能正确渲染。邮件开发者生成紧凑的数据 URI 版本的品牌标识，用于在 HTML 中内联。教育者演示 preserveAspectRatio、overflow 等属性如何影响渲染。

数据格式、类型或变体

输入为原始 SVG XML 标记。输出为在沙盒化 iframe 中渲染的同一 SVG，以及一个 URL 编码的数据 URI（data:image/svg+xml;charset=utf-8,…）。元素计数指标会统计每个开始标签（包括 defs、g、渐变以及类似的嵌套元素），从而粗略反映复杂度。提取到的属性值以原始形式显示。

常见陷阱与边界情况

在沙盒化 iframe 中，通过 `use` 或 `image` 元素的 href 引用的外部资源不会加载。script 元素中的内联 JavaScript 会被沙盒阻止——动画应依赖 SMIL 或 CSS 关键帧。依赖某个未在系统中安装的特定字体的 SVG 会回退到默认字体；预览时请嵌入字体或使用系统字体。

何时使用此工具而非代码

将该浏览器工具用于一次性的图标设计、调试或生成数据 URI。对于生产资源，请使用经过调优配置的 SVGO 处理 SVG，以移除元数据并压缩标记；并使用精灵系统或合适的打包器集成在应用中加载图标，而不是到处内联数据 URI。