DataUrlでSVGを表示する(javascript)

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が指定できるなら文字コードが指定できるじゃん、ってことでutf8を使用してしまえば日本語問題は解決!

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

コメント