SVGをdata URI schemeに変換するとき文字化けしないように必要なこと - 聴く耳を持たない(片方しか)

現在、パソコン、スマートフォン、タブレットと様々な画面サイズの情報機器が世の中に溢れています。そうした端末に適切に対応するには画像も色々なサイズのものをいくつも用意する必要があるわけですが、SVGのようなベクター画像であればそうした手間も少なくて済むのがメリットです。 例えば、AppleのサイトではロゴにSVGを使っています。 https://www.apple.com/jp/iphone/ そしてそのロゴを調べてみるとSVGをdata URI schemeで指定しているのが分かりますね。 data URI schemeはHTML文書内に記述できるため、画像ファイルのリクエストを減らして素早く画面表示が行えるという利点がありますから、世界中から多くのアクセスを集めるAppleのサイトで採用されているのでしょう。 こうした使われ方も多いことから、data URI schemeを簡単に作成でき

[rryu]

XML宣言を省略してdata URI schemeでも文字コード指定しない場合にUS ASCIIとして扱われるというのはバグっぽい感じもする。

[gfx]

charsetを必ず指定すべきという話。デフォルトがUTF-8だったらよかったのに…。

[lambdalisue]

とてもよい

[kits]

data:image/svg+xml;charset=utf-8,(...) という指定が必要。

[efcl]

SVGをDataURIで埋め込むときの文字コード

[pipehead]

data URI scheme の仕様の説明あり〼