問題
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が固定とも限らないし...。