Canvg v4を使ってブラウザ上でSVGをCanvasに変換する

はじめに

2022年2月17日にCanvgのメジャーアップデートであるv4.0.0がリリースされました。

前回の記事では、Canvg v3を使ったSVGからCanvasへの変換方法に説明しましたが、今回はCanvg v4を使った方法について説明します。

とはいえ、破壊的な変更はCanvgがデフォルトエクスポートから、名前付きエクスポートに変更されたことが主で、v2からv3への移行時ほどの違いはありません。以下のようにインポート部分を書き換えるだけでよさそうです。

canvg_v3.js

import Canvg from "canvg";

canvg_v4.js

import { Canvg } from "canvg";

サンプルコード

詳細な説明は、前回の記事を参照してください。

canvg_v4.0.0.js

import { Canvg } from "canvg";

function render() {
    const svgRoot = document.querySelector("#svg_root");
    const svgString = svgRoot.outerHTML.replace(/NS[0-9]+:href/g, "xlink:href");
    // .replace()はiOS Safari等でnamespaceが"xlink"ではなく"NSなんとか"になるのに対応するため

    const canvas = document.createElement("canvas");
    const canvas.width = 1920; // canvasの幅を指定
    const canvas.height = 1080; // canvasの高さを指定
    const ctx = canvas.getContext('2d');

    const v = Canvg.fromString(ctx, svgString);
    return v.render(); // Promise
}