CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

Mizoue

画像で何かやってみようかな、と思いこのサイトのロゴをSVGにしてみました。

と言ってもSVGにすること自体はそんなに難しく無いです。
Adobe イラストレーターなどでSVG形式で書きだせばOKです。

問題なのは、ブラウザで表示させようとした場合でした・・・

HTMLでSVGを使う場合

そんなわけでSVGをHTMLで表示させる方法を試してみました。
方法は大きく分けて2種類。
画像と同じように扱うか、objectタグで埋め込むか、です。

というわけで早速サンプルをどうぞ。

画像として使う場合

・そのまんま画像で

・背景画像として

 

objectで埋め込む場合

結論

色々な方が様々な方法で既に試されているので結論を。

  • 画像として扱う場合、使い勝手が良く、是非こちらで使いたい。
  • でもFirefoxが対応してない(.htaccessでなんとか出来るという話を聞くもうまくいかず・・・)
  • objectタグで埋め込んだ場合表示は可能。webkit系のブラウザではwidth,heightを指定しなければ範囲が大きく取られてしまう様子。
  • objectで埋め込んだ場合、Safariでは背景が真っ白に!(Chromeでは透過できました)

などなど・・・

惜しい。実に惜しい。
そんなわけでロゴをSVG化するのはちょっと待つことにしました。
Firefox4、IE9ではSVGに対応するらしいのでそれに期待しましょう。

Subscribe:
pagetop