問題

svg画像をjpegやpngに変換する際にはconvert-svgを使っています。NodeコードからやCLIからも使えたりと高機能なことに加えて、内部的にブラウザに描画したSVGをラスター化しているので変換後の仕上がりが素直で気に入っています。

以前、日本語を含んだSVG画像を変換した際に文字化けに遭遇したので、その原因、対策をメモしておきます。

文字化けした画像はこんな感じ。

原因

内部的にSVGをブラウザ上で表示する際に利用するHTMLテンプレート上に文字コードの指定がされていないため。

具体的には、変換の共通処理を記述しているconvert-svg-coreに含まれる以下の箇所

Converter.js

...
    let html = `<!DOCTYPE html>
<base href="${options.baseUrl}">
<style>
* { margin: 0; padding: 0; }
html { background-color: ${provider.getBackgroundColor(options)}; }
</style>`;
...

https://github.com/neocotic/convert-svg/blob/master/packages/convert-svg-core/src/Converter.js#L194

対策

HTMLテンプレートにメタタグでcharsetを明記してあげる。

Converter.js

...
    let html = `<!DOCTYPE html>
<base href="${options.baseUrl}">
<meta charset="utf-8">
<style>
* { margin: 0; padding: 0; }
html { background-color: ${provider.getBackgroundColor(options)}; }
</style>`;
...

おわりに

Forkして手元で修正したけど本家にPRしてもいいのか迷う。
charsetが固定とも限らないし...。