SVG图形导出与处理：如何将SVG转为Base64或图片文件-H5教程-PHP中文网

svg转base64需先将utf-8字符串正确编码为bytes，再base64编码，并严格使用data:image/svg+xml;charset=utf-8;base64,格式，否则浏览器解析失败或显示空白；浏览器端推荐textencoder，服务端需显式utf-8编码。

svg图形导出与处理：如何将svg转为base64或图片文件

SVG转Base64不是简单“编码一下”就行，关键在字符处理、MIME声明和浏览器兼容性。直接用btoa或裸调base64.b64encode容易出空白图或解析失败，核心问题在于UTF-8编码未正确转换为字节流，以及Data URI格式不规范。

确保SVG源内容干净且编码统一

原始SVG文件必须保存为UTF-8无BOM格式。含中文、特殊符号或XML声明（如<?xml version="1.0" encoding="UTF-8"?>）会干扰编码过程。建议手动删去这行，它对Data URI无效，反而增大体积。

用VS Code、Notepad++等编辑器检查并转存为UTF-8（不带签名）
移除多余空格、换行、注释（尤其在线工具生成的SVG常带缩进）
验证XML结构合法：可粘贴到W3C Markup Validator快速检查

浏览器端安全转Base64（推荐TextEncoder）

btoa()只接受Latin-1字节流，直接传入含中文或emoji的SVG字符串会报错。现代标准做法是用TextEncoder转字节再编码：

CSS3 SVG带控件的顶部导航栏代码

CSS3 SVG带控件的顶部导航栏代码是一款功能强大的带控件的超实用网页顶部导航栏。

下载

获取SVG字符串（例如document.getElementById("my-svg").outerHTML）
执行：const bytes = new TextEncoder().encode(svgString);
再用btoa(String.fromCharCode(...bytes))或Buffer.from(bytes).toString("base64")（Node环境）
拼接前缀：data:image/svg+xml;charset=utf-8;base64,${b64String}

服务端脚本批量处理（Python示例）

适合构建自动化流程或CI/CD中预处理图标资源：

读取文件时显式指定encoding="utf-8"
调用.encode("utf-8")转为bytes，再base64.b64encode(...).decode("ascii")
MIME类型必须写全：data:image/svg+xml;charset=utf-8;base64,，缺charset=utf-8会导致部分浏览器渲染失败
示例代码片段：

svg_content = open("icon.svg", encoding="utf-8").read()
b64_data = base64.b64encode(svg_content.encode("utf-8")).decode("ascii")
data_uri = f"data:image/svg+xml;charset=utf-8;base64,{b64_data}"