Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@icchi_h

node.jsのsvg変換パッケージconvert-svg-to-jpeg/pngの日本語文字化け対策

More than 1 year has passed since last update.

問題

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

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
icchi_h
都内のメディア企業で働く高専出身エンジニア

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?