🧊

SVGをcanvas要素で扱う

普通の`img`やら`video`要素なら、`CanvasRenderingContext2D`の`drawImage()`で楽勝なんですが、SVGは画像であって画像ではないので、ひと手間が必要・・・。

地味に面倒だったのでメモ。

やりたかったこと

  • インラインSVGを使う
  • CSSで色を適当に変える
  • それを、`canvas`に貼り付ける
  • 画像としてダウンロードする

その過程で、SVGを`canvas`に載せたくて、どうしよう？ってなった。

こうなった

const SIZE = 400;

//
// SVG
// - change color by CSS via inline-svg
//
const $svg = document.querySelector("svg");
$svg.querySelector("path.a").style.fill = "#e8e733";

//
// CANVAS
// - change color by canvas
// - draw SVG above
//
const $canvas = document.createElement("canvas");
$canvas.width = $canvas.height = SIZE;

const ctx = $canvas.getContext("2d");

ctx.fillStyle = "lightgreen";
ctx.fillRect(0, 0, SIZE, SIZE);

const img = new Image();
img.src = "data:image/svg+xml," + $svg.outerHTML;
img.onload = () => ctx.drawImage(img, 0, 0, SIZE, SIZE);


現状、SVGはいったん`img`要素を経由してから`canvas`に貼るしかない。
SVGを`img.src`にするところは、調べると他にもいろいろやりかたが出てくるけど、一番短く書くパターンがコレ。とりあえずChromeとSafariで動いたのは確認した。

噂によると、Operaは直で`drawImage()`できたらしい。