2011年7月31日日曜日

bloggerに投稿したインラインSVG画像をIE9でも表示

ラベル: 時刻:

1年前、ブログにインラインSVGの画像を投稿しました。 でもそのころはWindowsXPのPCを使っていて、開発版のIE9は使うことができなかったんですよね。 以降、1ヶ月ほど前にWindows7のPCを入手するまで投稿したSVG画像がIE9で見れるかどうかチェックしていませんでした。

で、実は新PCを入手してすぐIE9で見れるか確認したんですよ。 しかしそのときは表示できませんでした。 ホントはすぐに表示する方法を調べるべきだったんですが、放置してました。 えぇ、放置しましたとも。

で、この週末でちょっとだけ調べたら簡単に表示できることが判明。

「ブログの投稿を書き換えなければならない」と思っていたけど、テンプレートをちょっと書き換えればいいみたいです。 書き換えるのは次の3箇所。

  1. DOCTYPEをhtml5用に変更。 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  ↓
<!DOCTYPE html>
  2. headタグに、強制的にIE9モードにするmeta要素を追加。 
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
  3. html要素のxmlns='http://www.w3.org/1999/xhtml'を削除

簡単ですね。 すぐにやっておけばよかった。

ブログのメニューでデザイン/HTMLの編集を選んでテンプレートの上の方を編集します。 編集箇所は、下のコードの強調表示したところです。 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html expr:dir='data:blog.languageDirection' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Stretch Denim
Designer: Darren Delaye
URL:      www.DarrenDelaye.com
Date:     11 Jul 2006
-----------------------------------------------
...

テンプレートを変更後、過去の投稿を見たらちょっとずつ変だけど一応表示されていました。

Google Chromeはバージョンが上がるたびにSVGに関して少しずつ改善されてきたけど、IEはそんなことないんだろうなぁ。 まぁ、表示されただけでもいいか? 本来DOCTYPEだけでhtml5にしなければならないところでもmetaタグが必要とか、IEらしい迷惑さ加減です。

このブログはhtml5が主要ブラウザに採用される前から続けてたからこういう編集が必要でした。 これからは、デフォルトのテンプレートからhtml5対応になるのかもしれませんね。 いや、今もうそうなっているのかもしれないけど、面倒なので確認はしない方向で。

投稿者