將 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 字符串。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/KLawB3X_ZuXdLyVb9oQXdg