「Raphaël」を使ってSVGによる図を描いてみた

やけに解像度の高いRetinaディスプレイが登場したり、手持ちのタブレット端末が流行ったりと、固定の画像で対応するには大変になってきそうな気がしたので、SVG等のベクタ画像をサイトに表示させる必要性があるのではないかと感じています。 そこで、実験的にJavaScriptを利用してベクタ画像を描画するRaphaëlを使って自サイトに線を引いてみました。 その他、矩形や円を描画したり、色を塗ったり出来るみたいなので、その辺りも含めて残しておきます。 Raphaëlを使う準備 .entry-content svg{border:1px solid #999;} 何だか最近フレームワークばかり触っていたので、色々読み込まないと行けないかと思ってましたが、ファイルは一つだけ。 また、描画するDOMを用意しておきます。 <div id="canvas" »

ベクター形式でWebページ上に表示できるSVGでロゴを描いてみた

今後様々なデバイスが発表されて、様々な解像度のディスプレイで表示されることを考えると、ビットマップ画像での対応に限界があると感じたので、SVGもちょっと調べてみました。 ついでにこのブログのロゴをSVGで描いてみました。SVGが対応しているブラウザであれば、SVGで表示しているはずです。 SVGの表示の仕方 SVGの表示のさせ方には幾つか方法があります。 objectタグ内のparamタグで指定する objectタグのdata属性で指定する imgタグで表示する HTML内に直接記述する CSSで背景画像に指定する の辺りでしょうか? これら+JavaScriptで生成するライブラリもあるようですが、今回はリンクのみの紹介としておきます。 このサイトで採用しているのは、振り分けが楽そうだったのでCSSで背景画像にして指定しています。 とはいってもあんまり表示確認していません。(Chrome17、Firefox10、IE9は確認できてます。 .htaccessの設定 実は先程の方法だけではクライアント側が対応していても、 »