在现代Web开发中，SVG（可缩放矢量图形）因其清晰度高、文件体积小和可编程性强的特点而被广泛使用。很多开发者最初会将SVG代码直接嵌入HTML中，但随着项目规模扩大，将SVG迁移到独立文件成为更好的选择。本文将详细介绍如何将HTML中的SVG代码迁移到单独的.svg文件。

为什么要迁移SVG到独立文件

1.代码整洁性：减少HTML文件的体积和复杂度

2.可维护性：集中管理所有SVG资源

3.可复用性：同一SVG可在多个页面使用

4.缓存优势：浏览器可单独缓存SVG文件

5.性能优化：减少HTML文档大小，加快初始加载

如何操作

• 菜单栏：配置选项 > 代码转换 > 页面的SVG代码转换图片文件(默认不勾选)

测试

• 原始代码：html代码中的svg图片

• 输出代码：已经将svg代码平移到svg单独图片文件后的代码

支持

• 自动修复svg文件中的viewBox属性
• 自动添加svg文件中的xmlns空间
• 原代码中的style和class平移到img属性
• 支持svg的use元素解析
• 自动修复svg文件中的大小写问题