ロゴとかQRコードをSVGにしてみた
- 投稿日：2010年5月10日 23:59
- カテゴリ：スクリプト関連
こんにちは、タケノコの皮を剥いたせいで手がチクチクするHitoyamです。
特に意味はないのですが、やってみたかったので @yomotsu と @neotag に知恵を借りつつ、ブログのタイトルロゴとQRコードをSVGにしてみました。
SVGをHTMLで表示させるにはいくつか方法があるのですが、まだまだブラウザごとに実装が違うみたいで、表示にはそれぞれ差が出ます。
<img>で表示させる場合
ソースとデモ
<h1><a href="http://www.hitoyam.com/web/">
<img src="./logo_web.svg" width="190" height="58" alt="その仕事、蠍は留守です" />
</a></h1>
<p><img src="./sasoru_QR.svg" width="84" height="84" alt="QRコード" /></p>
キャプチャ
Firefoxでは表示されない...です
はじめうまくいかなくてこまったのですが、.htaccessで「AddType image/svg+xml svg」の指定をしたらうまくいきました。MIMEタイプとか普段あんまり考えないし...。
IE6、7、8では当然というか、まぁ普通に表示されないんですけど、なんとFirefoxでも表示されないんです...。最初にこれでつまずいてガッカリするワケですね。3.7でも表示されないみたいで、残念すぎる...。表示されるブラウザでは、表示もリンクを張るのも問題なくできました。
<object>で表示させる場合
ソースとデモ
<h1><a href="http://www.hitoyam.com/web/">
<object type="image/svg+xml" data="./logo_web.svg" width="190" height="58">
<img src="http://www.hitoyam.com/images/web_logo.gif"
width="189" height="68" alt="その仕事、蠍は留守です" />
</object>
</a></h1>
<p><object type="image/svg+xml" data="./sasoru_QR.svg" width="84" height="84">QRコード</object></p>
キャプチャ
Adobe SVG Viewerのせい？ それとも...？？
ロゴには<object>の代替としてgif画像を設定しているため、IE8ではsvgでなくgifが表示されている状態。QRコードにはテキストだけ表示させています。
ただ、Adobe SVG Viewerをインストールしていると、IE6、7でのキャプチャのように灰色に塗りつぶされてしまってうまくいきません...。原因がAdobe SVG Viewerのせいかどうかは分かりませんが、とにかくウチの環境ではそうです。
リンク用の<rect>を引いてみた
実は<object>に単純にアンカーリンクをあてるだけでは、うまいことリンクさせるのが難しかったです。なので、svgの中にリンクを設定しています。
ソースとデモ
<a xlink:href="http://www.hitoyam.com/web/" target="_top">
<rect x="0" y="0" width="190" height="58" fill="#ffffff" fill-opacity="0" />
<g>・・・</g>
</a>
190×58pxの領域すべてをリンク領域として確保するため、<rect>で四角形を置いています。今回はfillで四角形の背景色を指定し、fill-opacityで透明化する、というやり方にしてみました。fill指定しないと、FirefoxなどのCSSを切っている時にオブジェクトが黒く塗りつぶされちゃうっぽいので、その対策。
四角形とロゴ両方を<a>で囲んでしまえば、領域全てがリンク領域になります。四角形だけしか囲まない場合には、ロゴの文字の部分などからはリンクされなくなるので注意。
HTMLの背景色を変えてみた
デモ
キャプチャ
fill-opacityが効いてない？
Firefox、Operaでは四角形の領域が透明化されて表示されているように見えるのですが、Safari、Chromeでは白地が出てしまっています。IE8はもともとgifが表示されているので変わらずgifが出てきます。ちなみにIE6、7も灰色に塗りつぶされたまんま。
<object>の方で<param name="wmode" value="transparent" />を追加しているsasoru_svg04.htmlでも結果は同じでした。
そんなこんなで
Firefoxで<img>が使えない以上、<object>を使って埋め込みをすることにしました。代替コンテンツが当てられるので、IEでも困らないかな、と。まだIE9ppでちゃんと見ていないのですが、IETesterで9が出たようなので近いうち試してみたいと思っています。
あとAdobe SVG Viewerの顧客サポートは2008年に終了しているらしいですが、今どんなふうに扱われているのですかね。アンインストールしたらIE7とかでも代替コンテンツが表示されるようになるのでしょうか。そのへんは謎。でも個人ブログですし、そこまではサポートしないでもいいかなぁ...。ううむ。
とにもかくにも、@yomotsu++ ＆ @neotag++ サンクスでした！
関連URL
- 投稿日：2010年5月10日 23:59
- カテゴリ：スクリプト関連