在线SVG转Base64编码工具
轻松将SVG图像转换为Base64编码格式，无需下载任何软件，直接在浏览器中完成转换，适用于网页开发、邮件设计等场景。
提示
- 请确保输入有效的SVG代码
- SVG代码必须包含xmlns属性
- 转换后的编码可直接用于CSS、HTML或JavaScript
使用方法
- 生成的Base64编码可直接嵌入HTML、CSS或JavaScript中
- 典型用法：url('data:image/svg+xml;base64,编码内容')
- 适用于CSS背景图、HTML img标签等场景
使用示例
1. 在CSS中使用
.element {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgZmlsbD0iYmx1ZSIgLy8+PC9zdmc+');
background-size: contain;
background-repeat: no-repeat;
}2. 在HTML中使用
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgZmlsbD0iYmx1ZSIgLy8+PC9zdmc+" alt="SVG Image">3. 在JavaScript中使用
const img = new Image();
img.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgZmlsbD0iYmx1ZSIgLy8+PC9zdmc+';
document.body.appendChild(img);常见问题
什么是Base64编码？
Base64是一种基于64个可打印字符来表示二进制数据的编码方式，常用于需要通过文本协议传输二进制数据的场景，如在HTML和CSS中嵌入图像。
为什么要将SVG转换为Base64？
将SVG转换为Base64编码后，可以直接嵌入到HTML、CSS或JavaScript中，减少HTTP请求，提高页面加载速度，特别适合小型图标和简单图形。
转换后的Base64编码有大小限制吗？
技术上没有严格限制，但过大的Base64编码会增加HTML/CSS文件大小，影响加载性能。建议仅对小型SVG使用Base64编码，大型SVG仍应作为单独文件引用。
所有浏览器都支持SVG的Base64编码吗？
是的，现代浏览器（包括Chrome、Firefox、Safari、Edge等）都完全支持SVG的Base64编码。但在非常旧的浏览器（如IE8及以下）中可能存在兼容性问题。