bloggerにインラインSVGを投稿したときのメモ

以前bloggerにインラインSVGの画像を投稿したときのメモです。 現在、bloggerにはSVG画像のファイルをアップロードできません。 html編集モードにして、本文にインラインSVGを書けば投稿することができます。

ie以外の主要ブラウザは外部ファイルのSVG画像を表示できます。 しかし、インラインSVGを正式サポートしているブラウザはまだないはず。 私が知っているインラインSVGを表示できるブラウザは3つだけです。

• firefox 3.6.8 (html5.enable=trueにする)
• firefox 4 beta (未確認)
• IE9 Platform Previews (未確認)

今は本格的に絵を描く人がSVGを投稿するのはまだ早いですね。 「本格的に絵を描く人がSVGを使うのか」と聞かれると疑問ですが。

firefox4やIE9が正式リリースされたら閲覧環境が大幅に改善するので、その後ならインラインSVGってのはアリかもしれません。 bloggerでは投稿できる画像の総容量に制限がありますが、本文に埋め込めば制限は気にしなくていいです。

問題は、「bloggerで本文に何KBまで書けるか」ってことですよね? 以前に投稿した画像は80kb程度のファイルサイズだったので正直不安でした。 inkscapeSVG形式で116,805バイト、プレーンSVGにしていらない情報を削って81,205バイトです。 ブログに80kbも文章を書くなんて、まぁ無いことですよね。 数kbの本文 + 80kbのインラインSVGの記事、「8割がたはじかれるだろうなぁ」と思いつつ投稿しました。

アッサリ受け付けてくれました。

ヨカッタヨカッタ。 はじかれたら自分でSVGを置くページを用意しなければならないところでした。 これから先SVG画像を描くかどうかわからなかったので、1つのファイルのためだけに手間をかけるのは面倒です。 楽に投稿できるのは助かります。

その投稿をしたときに1点、注意すべきことが分かりました。 SVGにタイトルを付けるとエラーメッセージが表示されます。

• 作成されたHTMLファイルは承認できません : Tag is not allowed:TITLE

titleタグはinkscapeなら名前を付けてファイルを保存するときのダイアログでタイトルを指定したり、「ドキュメントのメタデータ」でタイトルを設定すると追加されます。 SVGの仕様では色んなオブジェクトにタイトル付けられるのかな? まぁ、仕様の方は未確認で。

エラーメッセージのすぐ下にある次のチェックボックスをonにすれば、問題なく投稿ができます。

• この投稿の本文についてHTMLエラーを表示しない

これはエラーメッセージというよりwarningみたいなものかも?

閲覧する人がhtmlファイルに埋込まれたインラインSVGをコピー&ペーストしてSVGファイルを作るときの注意もあります。 と言っても、firefox 3.6.8だけです。

firefoxの右クリックメニュー「選択した部分のソースを表示」を使うと、選択した部分のコードが反転した状態で「選択した部分のDOMソース」ウィンドウが開くので取り出すのに便利です。 しかし、このとき表示されるソースはサーバーから送られてきたソースそのものではありません。 firefoxのパーサが構文解釈したあとのソースになります。

デフォルトの「html5.enable=false」のときはSVGコードの部分がかなり書き換えられており、コピー&ペーストで作ったSVGファイルはエラーで表示できなくなります。 インラインSVGが有効な「html5.enable=true」のときも、やはり若干書き換えられています。 以前投稿したSVGについては表示できますが、全てのコードで表示できるとは限りません。 作者が投稿したとおりのSVGコードを得るには、htmlのテキストを選択をしない状態で普通に「ページのソースを表示」をしましょう。 そこからsvgタグを検索してコピー&ペーストをします。 そうすると、パーサが構文解釈する前のソースが得られます。