将 JavaScript 生成的 SVG 转换为文件

SVG（可缩放矢量图形）是一种基于 XML 的图像格式，它可以通过 JavaScript 动态地生成和操作。在前端开发中，经常需要将 JavaScript 生成的 SVG 导出为文件。本文将介绍如何使用 JavaScript 和第三方库来实现该功能。

使用 canvas 实现导出

将 SVG 导出为文件的一种方法是使用 HTML5 中的 canvas 元素。具体步骤如下：

1. 将 SVG 代码插入到 HTML 页面中的一个元素内，例如 <div id="svg-container"></div>。

<div id="svg-container">
  <svg viewBox="0 0 100 100">
    <rect x="10" y="10" width="80" height="80" />
  </svg>
</div>

1. 创建一个 canvas 元素，并设置其宽度和高度与 SVG 相同。

const svg = document.querySelector("#svg-container svg");
const canvas = document.createElement("canvas");
canvas.width = svg.width.baseVal.value;
canvas.height = svg.height.baseVal.value;

1. 获取 canvas 的渲染上下文（context），将 SVG 绘制到 canvas 上。

const ctx = canvas.getContext("2d");
const img = new Image();
img.onload = () => {
  ctx.drawImage(img, 0, 0);
  const dataURL = canvas.toDataURL("image/png");
  // do something with dataURL
};
img.src = "data:image/svg+xml," + encodeURIComponent(svg.outerHTML);

1. 将 canvas 转换为文件（例如 PNG 格式），可以使用 canvas.toBlob() 或者 canvas.toDataURL() 方法。

canvas.toBlob((blob) => {
  const url = URL.createObjectURL(blob);
  // do something with the file URL
}, "image/png");

使用第三方库 canvg 实现导出

如果 SVG 中包含了复杂的样式、滤镜等内容，将其转换为 canvas 可能会存在兼容性和支持性问题。此时可以使用第三方库 canvg 来进行 SVG 的解析和渲染。

1. 引入 canvg 库。

<script src="https://cdn.jsdelivr.net/npm/canvg@5.15.0/dist/canvg.min.js"></script>

1. 创建一个 canvas 元素，并使用 canvg 解析 SVG 代码并渲染到 canvas 上。

const svg = `<svg viewBox="0 0 100 100">
               <rect x="10" y="10" width="80" height="80" />
             </svg>`;
const canvas = document.createElement("canvas");
canvg(canvas, svg);

1. 将 canvas 转换为文件，与上述方法相同。

canvas.toBlob((blob) => {
  const url = URL.createObjectURL(blob);
  // do something with the file URL
}, "image/png");

示例代码

下面是一个完整的例子，演示如何将 SVG 导出为 PNG 文件：

-- -------------------- ---- -------
---- -------------------
  ---- ---------- - --- -----
    ----- ------ ------ ---------- ----------- --
  ------
------
------- ---------------------- -- ------------

------- ---------------------------------------------------------------------------
--------
----- ------------ - -----------------------------------------
----- --------- - --------------------------------------

----------------------------------- -- -- -
  ----- --- - ----------------------------------
  ----- ------ - ---------------------------------
  ------------ - ------------------------
  ------------- - -------------------------
  ----- --- - ------------------------
  ----- --- - --- --------
  ---------- - -- -- -
    ------------------ -- ---
    -------------------- -- -
      ----- --- - --------------------------
      ----- ---- - ----------------------------
      --------- - ----
      ------------- - ------------
      ------------------------------

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------