SVG转HTML

在线将SVG转换为HTML

选择SVG文件或粘贴其代码，即可生成可用于HTML页面的内联SVG。预览结果、调整优化设置并复制代码。所有解析、优化和转换都在你的浏览器本地完成，不会把SVG发送到服务器。

制作响应式内联SVG

保留viewBox即可保留SVG的坐标系。如果SVG有可用的viewBox，可删除固定的宽度和高度，再用自己的CSS设置尺寸。

了解SVG大小与节省空间

“原始大小”是输入SVG的大小。“优化后SVG大小”是按所选选项处理后的大小，例如删除注释、对坐标取整和压缩代码。大小以kB为单位，1 kB等于1000字节。“节省”表示缩减的百分比：从10 kB减到7 kB即节省30%。如果输出更大（例如因为采用了易读的格式），则会改为显示“体积增加”。这些数据比较的是SVG代码，而不是JSX、React、CSS Data URI或Base64导出内容的大小。

小数精度与缩进

“小数精度”决定坐标和数值属性在小数点后保留几位。精度为2时，12.34567会变为12.35。减少小数位可以减小文件体积，但可能改变细节；默认值3只是一个起点，请检查预览。“缩进”可使用2个空格、4个空格或制表符，让HTML和JSX代码更易读，而不会改变图像。“压缩SVG”会删除多余的格式空白，使输出更紧凑，因此开启压缩时缩进不可用。

HTML、JSX、React与SVG Data URI

HTML输出是内联SVG代码，下载时保存为SVG文件。JSX会针对React调整属性名称和内联样式。“React组件”会将其封装为一个接受标准SVG props的TypeScript函数。“CSS Data URI”生成一条background-image声明；“Base64”生成经过编码的SVG图像URI。大小统计针对的是优化后的SVG，而不是体积更大的编码格式。在同一页面中使用多个内联副本前，请检查ID。

静态、本地的SVG处理流程

预览是一张隔离的图片，而不是可执行的页面代码。脚本、内嵌HTML、动画、外部图片和样式表都会被移除。支持的内联呈现样式和本地片段引用会被保留。此工具适用于静态图形；不受支持的功能可能会改变其外观。currentColor会改变纯色填充和描边，内联使用时会继承所在位置的颜色；图片预览则使用其自身的颜色环境。