DataUrlでSVGを表示する（javascript）

svgを動的に生成して表示するために以下のようなbase64エンコードを考えていました。

const svg = `<svg> ...略 </svg>`;
const svgBase64 = convertToBase64(svg);
const mageSrcBase64 = `data:image/svg+xml;base64, ${svgBase64}`;

const img = document.createElement('img');
img.src = mageSrcBase64;

function convertToBase64(str: string) {
  return window.btoa(window.unescape(encodeURIComponent(str)));
}

そうするとbase64に変換する際に日本語が含まれているとややこしいことになるため、変換メソッドを作ったりする必要があります。

ブラウザで日本語をbase64変換する（javascript）

base64に変換するメソッドとしてはwindow.btoa()があるのですが、これに日本語文字列を渡すとエラーを吐きます。Latin1の範囲じゃないとダメらしい。UncaughtDOMException:Failedtoexecute&#

once-and-only.com

よくよく考えればbase64が指定できるなら文字コードが指定できるじゃん、ってことでutf8を使用してしまえば日本語問題は解決！

const svg = `<svg> ...略 </svg>`;
const imageSrcUtf8 = `data:image/svg+xml;utf-8, ${svg}`;
img.src = imageSrcUtf8;