Animated line drawing in SVG
There's a demo you're missing here because JavaScript or inline SVG isn't available. I like using diagrams as a way of showing information flow or browser behaviour, but large diagrams can be daunting at first glance. When I gave talks about the Application Cache and rendering performance I started with a blank screen and made the diagrams appear to draw themselves bit by bit as I described the pr
GNU/Linux Distribution Timeline
GNU/Linux Distribution Timeline Libranet Omoikane (Arma) Gibraltar LEAF Skolelinux Freespire Lindows Linspire Rxart Swift antiX MEPIS SimplyMEPIS Impi Amber Guadalinex DeadCD Olive Underground Desktop Ulteo Kubuntu nUbuntu Christian Edition Linux Mint Satanic Edition Uberyl ComFusion Mythbuntu Geubuntu OpenGEU Fluxbuntu Eeebuntu Aurora OS Zebuntu ZevenOS Ultimate Edition Maryan Zorin OS Qimo wattO
SVGヤバイ - 最速チュパカブラ研究会
canvas を苛めていたら気づいたことがあったので書きます。（この記事は2011年5月現在の情報です。あなたがこの記事を読んでいる時点で、より新しくて良い方法が無いか確認して下さい） 基本的な話 canvas には、図形を描画する機能だけでなく、描かれている内容を読み取る機能があります。getImageData を使うと、canvas の内容をピクセル単位で読み取って画像処理をかけたりできます。また、toDataURL を使うと canvas の内容を Data URI として出力でき、サーバに送信したりできます。 しかし、この機能にはリスクがあります。例えば、悪意のあるページを開いただけで、社内SNSにしか公開していないあなたの顔写真を canvas 経由で抜き取られるかもしれません。そういう事が起きないように、他のサイトから読み込んだ画像が canvas に描画されている場合（以下、
SVG animation with JavaScript
Why is SVG important? See SVG Overview for lots of good reasons that you should use SVG. SVG in the browser Despite SVG's status as a W3C recommendation, you'll need to make sure your browser can see it. W3C and SVG I've been involved in the SVG Interest Group, and have engaged in some babble about extending the spec to include new and wilder things. Here is another view of some of said babble.
【レビュー】SVGエディタInkscapeを使いこなすための15のチュートリアル | エンタープライズ | マイコミジャーナル
Linux, Open Source, Gadgets, and all things Digital - TechSource ビッグスクリーンで動作するブラウザ、ノートPCで動作するブラウザ、ネットブックで動作するブラウザ、iPad、iPhone 4、iPhone 3GS、そのほかのスマートフォンやタブレットタイプのデバイスなど、Webコンテンツにアクセスするデバイスと条件は多様化し続けている。こうしたすべての環境に対して適切なデザインを実現するのは簡単なことではない。 特に問題となるもののひとつがビットマップ画像。iPhone 4のレティナディスプレイのように高い密度を実現したスクリーンで美しい表示を実現するには、ビットマップ画像は問題が多い。はじめから大きなサイズのビットマップ画像を用意すれば美しさは確保できるが、帯域の無駄が発生する。ここでの解決策のひとつはSVGを採用することに
SVGをimg要素で | Web標準Blog | ミツエーリンクス
IE9が（ある程度までの）実装を決め、昨今注目を集めつつあるSVG。Gecko（Firefoxなど）でも、レンダリングそのものは以前よりサポートされてきました。 しかし、Geckoでは外部SVGファイルをimg要素を使って参照することはできませんでした。次のマークアップ断片のようにSVGファイルを参照しようとしても、レンダリングされなかったのです： <p><img src="foobar.svg" alt="Foo Bar" /></p> そのため、object要素やiframe要素を使って参照する必要がありました。 この問題はBug 276431として解決が図られてきました。また、HTML5仕様のimg要素src属性値定義では、Noteとして（スクリプトを含まない）SVGを参照できることが明記されました。 そしてつい先日、パッチが適用されました。このまま何事もなければFirefox 4（
フォクすけの壁紙メーカー
/あなたが今お使いのブラウザ (インターネット閲覧ソフト) は、Web 標準技術である SVG に対応していません。フォクすけの壁紙メーカーをお使いいただくには、SVG に対応したブラウザが必要です。 ぜひお使いのパソコンに Firefox をインストールしてからこのページをご覧ください。 ▶ Firefox ってなに？ ブラウザ上で壁紙を作ってみよう!! フォクすけの壁紙メーカーは、「SVG」という Web 標準技術を使って、モダンブラウザ上で「フォクすけ」の壁紙を簡単に作れるツールです。画像、背景などの素材を選んで、大きさやレイアウトをあなたの好みに合わせてカスタマイズできます！ 作成できる壁紙は、パソコンのデスクトップ壁紙、携帯電話の待ち受け画面、Firefox の Personas テーマ (ウィンドウデザイン) の 3 種類。ぜひ、オリジナル壁紙作りを楽しみながら、次世代の We
あのフォクすけ壁紙をブラウザ上で自由自在にカスタマイズ!? SVG で作る「フォクすけの壁紙メーカー」登場!! | Mozilla Japan ブログ
皆さんは Firefox に「フォクすけ」という日本発のマスコットキャラクターがいるのをご存じですか？ 今では世界中の Firefox ファンにもじわじわと人気が広まりつつあるようですが、本日、このフォクすけをテーマにした壁紙をブラウザ上で簡単に作れるツール「フォクすけの壁紙メーカー」が公開されました！ Mozilla Japan では「フォクすけ」をテーマにしたデスクトップ壁紙を 2007 年から毎月配布していますが、ディスプレイサイズ追加の要望や、カレンダーの位置、デザインについてのフィードバックも多く寄せられていたため、壁紙をダウンロードされる皆さん自身が自分の好みに合ったカスタマイズをできる方法がないかということで、今回のツールが企画されました。 このフォクすけの壁紙メーカーですが、パソコンのデスクトップ壁紙の他、携帯の待ち受け画面 (iPhone や iPad のサイズも用意して
実務で使いたいSVG
軽く自己紹介 名前：執行 大介 （しぎょう だいすけ） Twitter ID : @mattari_panda 実験的サイト : Panda Space やってます、みてね。 今年の春まで：制作会社勤務 去年の９月ごろは：戻るボタンアワードADOBE賞とか受賞して軽く調子にのってたり。 現在は：無職です、、、 最近HTML5やらCSS3やら色々聞きますね。 実務でHTML5やCSS3を使っているサイトも増えてきました。 実務ではないけど、ここ最近よく見かけたのが「CSS3で◯◯描いてみました」系 面白いんだけど、もうそろそろ、、、いいよね！実務で使えないし。 前回のSugamo.cssで「実務で使いたいCSS3」的な内容でネタをやろうと思っていたのですが イーモバの電波が入らず、断念！orz 断念したネタは「jsdo.it」で晒しているので、興味がある人は見てね！こちら そして今回「実務で
スタートアップ SVG：第4回 SVGを活用する｜gihyo.jp … 技術評論社
第1回はSVGの基礎知識を、第2回と第3回でIE9がサポートする範囲（予定含む）を中心にSVGの書き方を解説しました。最終回となる今回はSVGを実際に活用していく上でのノウハウを解説したいと思います。 HTMLなページへのSVGの埋め込みテクニック 第1回で解説しましたが、SVGは画像フォーマットでもあり、InkScapeなどのグラフィカルなインターフェースを持ったアプリケーションで作成することができます。そのsvgファイルをページに読み込むにはobjectタグを使う方法が一般的です。しかし、この方法ではobjectタグはiframeのように親ページと子ページで独立したDOMを構築するため、SVGを動的に扱いたい場合には適しません。そういった場合、svgファイルをXMLHttpRequestで読み込む方法がオススメです。 まずはシンプルにresponseXMLを使う方法です。この方法はFi
第2回 SVG実習 | gihyo.jp
前回はSVGの概要を解説したので、今回はSVGの具体的な書き方をざっくりと見ていきます。 と、その前に前回のおさらいとして、SVGをウェブページで用いる方法を2つにまとめます。 SVGをXMLとして記述し、svgファイル（もしくはdataスキームなど）をobjectタグなどで埋め込むか、もしくはXHTMLを用いてHTMLに埋め込む（Firefox 4.0betaやIE9ppなどはHTML（XHTMLでない）に直接記述することも可能） JavaScriptから動的にSVGを作る SVGをXMLとしてあらかじめ記述しておく方法は画像フォーマットとしても利用できますし、InkScapeのようなグラフィカルなインターフェースで作成したものを表示するのに向いています。一方、JavaScriptでSVGを描画する方法は動的に図を描けるので、データを元にグラフを描くといったケースに適していますし、Rap
第3回 少し高度なSVG | gihyo.jp
前回はSVGの基本的な書き方を解説しました。今回は前回触れなかった座標変換・テキスト関連に、グラデーションを解説していきます。 座標とグループ化 SVGにはg要素という複数の要素をまとめるための要素があります。このg要素によってグループ化した要素に同じ色を適用したり、座標変換（後述）をすることなどができます。 グループ化のサンプルコード(SVG) <g fill="#33ff33"> <rect x="40" y="40" width="30" height="30" /> <polygon points="0,0 43.3,25 0,50"/> </g> グループ化のサンプルコード(SVGDOM) // g(group)要素を作成 var g = document.createElementNS(SVG, 'g'); g.style.fill = '#3333ff'; var rect
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
第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
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
Secret Origin of SVG - SVG
The Secret Origin of SVG In the early days of the Web, there was an explosion of different formats and extensions to HTML. From early on, it was clear that a vector graphic format for the Web would be useful. Chris Lilley wrote up a document for general requirements for vector graphics in 1996. By 1998, the landscape had settled somewhat, and there were six competing submissions to the W3C in the
IE Teamのプログラムマネージャが語るIE9とSVG | Web標準Blog | ミツエーリンクス
SVG WGのBlogにて、Team ContactのDoug Schepersと、IE TeamでSenior Program Managerに就くPatrick Denglerの対談が公開されていました。MicrosoftがSVGについて考えていることや、SVG仕様で改善したいところ、検討中のSVG 2.0など面白いトピックが多いので、すこし紹介します。 Interview with Internet Explorer's Patrick Dengler SVG対応の理由 まずは、DougがPatrickにIE9でのSVG対応について、その理由を尋ねています。 Patrick曰く、MicrosoftはWebの現在とこれからのトレンドについて情報を集めており、製品のプランニングに活かすそうです。IE9のプランニングにおいて、これからのトレンドはグラフィックスと判断し、グラフィックス機能の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
svg-edit - Project Hosting on Google Code
http://svg-wow.org/yui-animations/svg-animate.xhtml
1.5.0 · DmitryBaranovskiy/raphael@e3fb35b
