10分でわかるSVG 基礎編
知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう SVGドキュメントの書き方 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。第2回となる今回のテーマはSVGです。 ご存じの方も多いと思いますが、SVGはXMLをベースにしたベクトルグラフィックスの記述言語です。PNGのような画像フォーマットの1つでもありますが、実際にはXMLを記述したテキストファイルであり、HTMLと同様にJavaScript（DOM API）による制御も行えます。HTMLがタグによって文書の構造を記述するのと同様に、SVGはタグで図形を記述します。 ■ XMLでベクトルグラフィックスを記述するSVG 実はSVGの規格自体はかなり以前から存在したのですが、長らくInternet Explorer（以降IE）
はいだしょうこ画伯の5年間の成長を、SVGでモーフィングにしてみた - jsdo.it - Share JavaScript, HTML5 and CSS
Inkscapeで描いたpath要素をRaphaëlを使ってアニメーションさせています。 まるで成長していない・・・・・・・・・・ はいだしょうこ画伯の5年間の成長を、SVGでモーフィングにしてみた jQuery UI v1.8.1 Raphael 1.4.3 - JavaScript Vector Library jQuery v1.6 (function($) { /** * MorphingImage class */ MorphingImage = function(name, data) { this.name = name this.data = data || [] } MorphingImage.prototype = { addData: function(pathName, pathData) { if(typeof pathData !== "object" || $
SVG女子｜SVG Girl
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
【レビュー】SVGエディタInkscapeを使いこなすための15のチュートリアル | エンタープライズ | マイコミジャーナル
Linux, Open Source, Gadgets, and all things Digital - TechSource ビッグスクリーンで動作するブラウザ、ノートPCで動作するブラウザ、ネットブックで動作するブラウザ、iPad、iPhone 4、iPhone 3GS、そのほかのスマートフォンやタブレットタイプのデバイスなど、Webコンテンツにアクセスするデバイスと条件は多様化し続けている。こうしたすべての環境に対して適切なデザインを実現するのは簡単なことではない。 特に問題となるもののひとつがビットマップ画像。iPhone 4のレティナディスプレイのように高い密度を実現したスクリーンで美しい表示を実現するには、ビットマップ画像は問題が多い。はじめから大きなサイズのビットマップ画像を用意すれば美しさは確保できるが、帯域の無駄が発生する。ここでの解決策のひとつはSVGを採用することに
IE9、HTML5やCSS3、SVG対応を大幅強化へ － ＠IT
2010/03/17 米マイクロソフトは3月16日、米国ラスベガスで開催中のイベント「MIX10」で次期バージョンのInternet Explorer 9のプレビュー版（Internet Explorer Platform Preview、以降IE9ppと略記）を初めてデモンストレーションした。同時にデモンストレーションページを含むダウンロードサイトも公開した。ただしGPUを生かした高速な描画ができるWindowsのAPI、「Direct2D」「DirectWrite」を利用するためIE9はWindows XPでは動かない模様（ars technicaによる報道）。 新JSエンジン、HTML5／CSS3、SVG対応、GPU活用 IE9の改善ポイントは新搭載のJavaScriptエンジンによる速度向上、HTML5、CSS3、SVG1.1などWeb標準への対応強化、GPUによる高速で滑らかなレ
HTML5 SVGで作るシューティングゲーム (1/6)
HTML5で手軽に扱えるようになったSVG（Scalable Vector Graphics）。前回は、HTML5文書内に埋め込まれたインラインSVGをJavaScriptで制御する方法を紹介しました。今回はJavaScriptとSVGを使ってシューティングゲームを作成します。 SVGアニメーション ゲームの作成に入る前に、SVG図形をアニメーションさせる方法を説明します。SVGには図形の位置やサイズをアニメーションさせる<anime>タグが用意されています。<anime>を使うとアニメーションが簡単に実現できます。 SVGアニメーションはアニメーションさせたい図形の子ノードに<anime>タグを記述し、変化させる属性値を指定します。指定できる主な属性名を以下の表に示します。
SVGを高速化させるためのルール - プラグインレスでSVGを表示する「SIE」開発ブログ
SVGを高速に表示させるためには SVGを速く、さくさくと表示させるには、いろんな方法があるのですが、ここで、まとめてみましょう。以下のルールに従えば、性能の向上ができると思います。 use要素とsymbol要素は必ず避けること use要素とsymbol要素は、Flashで使われる「シンボル化」と違って、内部でかなり複雑な変換をしています。 動的な変更があるたびに、この複雑な変換をしますので、描画処理の性能が落ちてしまいます。 重たくなりますので、必ず、この二つの要素は避けましょう。 アニメーションの期間は短く設定すること dur="5s"などの設定をよく見かけますが、これはとても遅く感じられます。setInterval(f, 200)も同様です。 目の「まばたき」が125ミリ秒ぐらいなのですから、下手をすれば、まばたきをしても絵が動かない、「もっさりとした」アニメーションができあがります
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
svg | Kamimura's blog
SVG - Mozilla Firefox まとめサイト
Firefox 4 の HTML5 パーサ – インライン SVG、スピード、などなど « Mozilla Developer Street (modest)