第1回 SVGの基礎知識 | gihyo.jp
SVGは比較的古くからある仕様の1つですが、2010年3月にマイクロソフトがInternet Explorer 9でのサポートを表明してから一気に注目が高まりました。そんな古くて新しいSVGを今から使える情報と、将来の展望を全4回の集中連載で解説します。 SVGとは SVG（Scalable Vector Graphics）は、XMLベースのベクターグラフィック言語もしくは画像フォーマットです。W3Cによってその仕様が定義されており、画像フォーマットとして用いる場合は拡張子.svgが使用され、MIME形式はimage/svg+xmlが用いられます。 SVGの現状 Firefox、Safari、Google Chrome、Operaなどのブラウザが既にサポートしており、Internet Explorerもそのバージョン9、具体的にはInternet Explorer 9: Platform
JavaScriptでSVGのレーダーチャートを描画するライブラリ Raphael Radar をつくった - I CAN ’CAUSE I THINK I CAN!
概要 JavaScriptでSVGを描画するライブラリRaphael.jsを使って、 操作可能なレーダーチャートを描画するライブラリ Raphael Radar を作りました。 Raphael Radar は次の2つの機能を持ちます。 レーダーチャートをSVGで表示 レーダーチャートの各軸の値をフォームと対応づけて、インタラクティブに値を選択 (2)の機能は任意で無効化して単純なレーダーチャートとして利用することもできます。 入手と使い方 依存ライブラリ Raphael Radar を使う前に、2つのライブラリをインストールする必要があります。 Raphael.js (1.3.1 以降) jQuery (1.4.2 以降) もしうまく動作しない場合、Raphael.jsとjQueryのバージョンを合わせてみてください。 インストール方法 上記の依存ライブラリをインストール Raphael
Raphaël―JavaScript Library
The most popular coding language for the web is javascript; so much so that since the advent of HTML5, it has now been officially accepted as the default standard. Javascript has moved beyond a smaller client-side browser-based language to become integrated not just for front-end design, but also for back-end server-side development. As a result there are has been a huge growth of Javascript libra
Raphael.JS でテトリスみたいなゲームを作ろう！
四角を書いてみよう <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Sample</title> </head> <body> <script src="raphael.js"></script> <script> var paper = Raphael(0, 0, 500, 500); paper.rect(0, 0, 20, 20); </script> </body> </html> サンプル 四角に色を付けてみよう <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Sample</title> </head> <body> <script src="raphael.js"></script> <script> var paper = Raphael(
ブラウザ上でお絵かき: Days on the Moon
「Ajax を使った手書き文字認識」を見て。ここでは線を描くのに絶対配置の span 要素を大量生成しているけど、最近のブラウザってベクター描画エンジン付きのものが多いわけで。WinIE 5 以降の VML 、Opera 8 ・ Firefox 1.5 以降の SVG 、Safari 1.3 ・ Firefox 1.5 以降の canvas 要素といった具合に。 ということで各ブラウザでベクター描画エンジンが使えればそれを使い、なければ絶対配置の HTML 要素を大量生成することで、ブラウザ上でお絵かきできるというものを作ってみた。元に戻す / やり直すこともできる。線を描くだけで塗りつぶしはできないが。 その線を描くために作ったのが DrawingCanvas クラス。以下のようにすることで三角形が描ける。実際の描画部分には SVG Tiny 、HTML Canvas 、CSS Posi
いまさら聞けないSVG、なぜ知られていないのか？
いまさら聞けないSVG、なぜ知られていないのか？：いまさら聞けないリッチクライアント技術（9）（1/3 ページ） 「SVGって何？」と思うのは無理もない PCで取り扱う画像のフォーマットにはいろいろな形式があります。JPEG、GIF、PNG、BMP、TIF、…… などなどいろいろあります。さて、その画像形式の中で「SVG」というフォーマットがあるのはご存じでしょうか？ このSVG「ベクタデータで画質のクオリティが高い！」「テキストファイル作成されているので、汎用性が非常に高い！」「XML形式で記述ができて管理しやすい！」「JavaScriptと相性バツグンでリッチコンテンツが手軽に作れる！」など、とてもWebと相性が良さそうな画像形式です。 いろいろな長所を持つ「SVG」は、知らない人にとっては「新しい技術」と思うかもしれません。しかし、Webの標準化団体「W3C」からSVG 1.0が勧告
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ただ線がひけるだけのSVG
gotta業 on Twitter: ".@amachang のSVG http://tinyurl.com/yl34ya5 でお絵かき描き描き！ http://tinyurl.com/yer3soc"