将 SVG 图像转换为 Base64 格式

要在 HTML 中使用 SVG 图像，可以通过 <img> 标签或直接在 HTML 中嵌入 SVG 代码的方式来实现。以下是使用 <img> 标签的方法：

<!-- 使用 <img> 标签引入外部 SVG 文件 -->
<img src="image.svg" alt="SVG Image">


<!-- 直接在 <img> 标签中使用 Base64 编码的 SVG 图像 -->
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==" alt="SVG Image">

在第一个示例中，使用 <img> 标签通过 src 属性引入外部的 SVG 文件。在第二个示例中，直接在 src 属性中使用 Base64 编码的 SVG 图像数据。

另外，你也可以直接在 HTML 中嵌入 SVG 代码，而不使用 <img> 标签，例如：

<!-- 直接在 HTML 中嵌入 SVG 代码 -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

这种方式适用于需要对 SVG 图像进行更多定制或动态操作的情况。无论是使用 <img> 标签还是直接嵌入 SVG 代码，都可以在网页中展示 SVG 图像。

因为嵌入 SVG 代码在小程序并不能识别，所以我们在开发的时候需要把 SVG 转成 data:image/svg+xml 格式的 URL，再用 image 渲染出来。

要将 SVG 图像转换为 Base64 格式，可以通过 JavaScript 来实现。以下是一个简单的方法：

// 获取 SVG 图像的源码
const svgString = '<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="red" /></svg>'


// 将 SVG 源码转换为 Base64 格式
const base64 = btoa(svgString);


// 输出 Base64 字符串
console.log(base64);


const img = new Image();
img.src = `data:image/svg+xml;base64,${base64}`;
document.body.appendChild(img);

在这段代码中，首先获取 SVG 图像的源码。然后使用 btoa 函数将该源码转换为 Base64 格式。最后，可以将生成的 Base64 字符串用于需要的用途，比如在 CSS 中使用 url('data:image/svg+xml;base64,...') 来引用 SVG 图像。

Window 接口的 btoa() 方法可以将一个二进制字符串（例如，将字符串中的每一个字节都视为一个二进制数据字节）编码为 Base64 编码的 ASCII 字符串。