要导出 inline SVG 图像为普通图片，在 <canvas> 上绘制时需要获取到这部分 SVG 内容并创建可引用的 URL。

在 <canvas> 上绘制 SVG

解决外部的 CSS

Inline SVG 外部的 CSS 可以作用于 SVG 内的元素，但是这一部分并不属于当前 svg（文件）本身，如果将该 svg 绘制在 canvas 上，则这一部分样式会丢失。但是 svg 文件内 style 标签中的样式会得到保留。

针对这一点，可以有选择性的使用 Inline 内部的 style 标签来定义临时样式，又或者在创建 svg 内容时将外部的样式插入 svg 内。

以 URL 的形式引用 SVG 内容

SVG 的 MIME-Type 是 image/svg+xml

a. 使用 data: URL

有别于传统图片的二进制格式，SVG 是不需要将内容转成 Base64 的。

data:image/svg+xml;<svg>....</svg>

b. 使用 Blob URL

这是一个相对来说更好的方法。

const blob = new Blob(['<svg>...</svg>'], {
    type: 'image/svg+xml',
})

const blobURL = URL.createObjectURL(blob)

其它流程

剩下的就和在 canvas 上绘制其它图片格式完全一致了。一套流程下来可以把 svg 文件 / Inline SVG 转换成 PNG 格式。