ベクター形式でWebページ上に表示できるSVGでロゴを描いてみた
今後様々なデバイスが発表されて、様々な解像度のディスプレイで表示されることを考えると、ビットマップ画像での対応に限界があると感じたので、SVGもちょっと調べてみました。
ついでにこのブログのロゴをSVGで描いてみました。SVGが対応しているブラウザであれば、SVGで表示しているはずです。
SVGの表示の仕方
SVGの表示のさせ方には幾つか方法があります。
- objectタグ内のparamタグで指定する
- objectタグのdata属性で指定する
- imgタグで表示する
- HTML内に直接記述する
- CSSで背景画像に指定する
の辺りでしょうか？
これら＋JavaScriptで生成するライブラリもあるようですが、今回はリンクのみの紹介としておきます。
このサイトで採用しているのは、振り分けが楽そうだったのでCSSで背景画像にして指定しています。
とはいってもあんまり表示確認していません。（Chrome17、Firefox10、IE9は確認できてます。
.htaccessの設定
実は先程の方法だけではクライアント側が対応していても、サーバ側がSVGを認識していないことがあると表示されません。
そこで、拡張子が「svg」「svgz」の場合はSVGである事を認識させるため、.htaccessか、Apacheの設定で以下の記述をします。
AddType image/svg+xml .svg
AddType image/svg+xml .svgz
SVGのコード
そんなに長いコードにならなかったので、ロゴのコードを全文貼っておきます。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="110px" height="20px" viewBox="0 0 110 20">
<polygon points="0,15 10,15 10,0 25,0 25,5 15,5 15,20 0,20" stroke="none" fill="black" />
<polygon points="20,6 25,6 25,15 30,15 30,0 35,0 35,20 20,20" stroke="none" fill="black" />
<polygon points="36,15 40,15 40,0 55,0 55,5 45,5 45,20 36,20" stroke="none" fill="black" />
<polygon points="50,6 55,6 55,10 60,10 60,0 65,0 65,20 60,20 60,15 55,15 55,20 50,20" stroke="none" fill="black" />
<rect x="66" y="0" width="4" height="5" style="fill:black;" />
<rect x="66" y="10" width="4" height="10" style="fill:black;" />
<rect x="75" y="0" width="5" height="9" style="fill:black;" />
<rect x="71" y="10" width="9" height="5" style="fill:black;" />
<polygon points="75,16 81,16 81,15 90,15 90,20 75,20" stroke="none" fill="black" />
<polygon points="85,0 100,0 100,20 91,20 91,15 95,15 95,5 90,5 90,14 85,14" stroke="none" fill="black" />
<rect x="101" y="0" width="9" height="5" style="fill:black;" />
<polygon points="101,15 105,15 105,10 110,10 110,20 101,20" stroke="none" fill="black" />
</svg>