「Snap.svg」で、ぐにゃっとアニメーションさせてみた。 | MONSTER DIVE
ふと気づくと、やってみたいなぁと思う演出は大抵「ぐにゃっ」としていまして、「私だってぐにゃっとさせたい」と言ったら、先日、kentaro先生がSVGを制御できるJSライブラリ・Snap.svgについての勉強会を開いてくれました。 今回はそれを受けて、Snap.svgについて簡単にまとめてみたいと思います。 Snap.svgとは Snap.svg Snap.svgは、Adobeが提供しているオープンソースです。 Webブラウザ上でベクターデータが描画できるSVGの制御に特化したライブラリで、複雑なSVGタグの記述を簡略化して扱うことができる他、 パスの制御 フィルタ・マスク・クリッピング処理 アニメーション機能 等、様々な機能が提供されています。 用意されているメソッドもjQueryと似ていて、取り入れやすそうなところも良いですね。 今回使ってみたところ、少し重いかも？という印象はありました
SVGヤバイ - 最速チュパカブラ研究会
canvas を苛めていたら気づいたことがあったので書きます。（この記事は2011年5月現在の情報です。あなたがこの記事を読んでいる時点で、より新しくて良い方法が無いか確認して下さい） 基本的な話 canvas には、図形を描画する機能だけでなく、描かれている内容を読み取る機能があります。getImageData を使うと、canvas の内容をピクセル単位で読み取って画像処理をかけたりできます。また、toDataURL を使うと canvas の内容を Data URI として出力でき、サーバに送信したりできます。 しかし、この機能にはリスクがあります。例えば、悪意のあるページを開いただけで、社内SNSにしか公開していないあなたの顔写真を canvas 経由で抜き取られるかもしれません。そういう事が起きないように、他のサイトから読み込んだ画像が canvas に描画されている場合（以下、
SVG女子を90%軽くしたSVG軽量化テク+α #svggirl
あいつ仕事してないで女の子のイラストばっかりいじってるぞと陰ながら言われていた喜納です。 HTML5で動くSVGアニメーション「SVG女子」がラスベガスでのマイクロソフト基調講演MIX11で公開され、 世界を（いろんな意味で）驚かしてきましたが、 ついに本日、日本でも公開されました！ しかも日本版に合わせてアニメーションも長くなっています！ こっそりブラウザを英語にして見ていた人も必見です！ （神風動画さんによる予告編動画！） 神風動画さんによるハイクオリティアニメーションをSVGで再現すると言う試み、 プログラムについては SVG Girlの公開と内部実装（プログラマーブログ） で担当プログラマーの吾郷が説明していますが、とにかく いかにSVGをきれいに軽くするかが最重要！ SVGといえば拡大しても荒れる事の無いベクター形式で、pngよりも軽くつくれたりすることで使われていますが、 今回
SVGを高速化させるためのルール - プラグインレスでSVGを表示する「SIE」開発ブログ
SVGを高速に表示させるためには SVGを速く、さくさくと表示させるには、いろんな方法があるのですが、ここで、まとめてみましょう。以下のルールに従えば、性能の向上ができると思います。 use要素とsymbol要素は必ず避けること use要素とsymbol要素は、Flashで使われる「シンボル化」と違って、内部でかなり複雑な変換をしています。 動的な変更があるたびに、この複雑な変換をしますので、描画処理の性能が落ちてしまいます。 重たくなりますので、必ず、この二つの要素は避けましょう。 アニメーションの期間は短く設定すること dur="5s"などの設定をよく見かけますが、これはとても遅く感じられます。setInterval(f, 200)も同様です。 目の「まばたき」が125ミリ秒ぐらいなのですから、下手をすれば、まばたきをしても絵が動かない、「もっさりとした」アニメーションができあがります
スタートアップ 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
SVG Wow!
About This web site provides links to demos shown during the SVG Wow! session at the SVG Open conference. The purpose of the SVG Wow session is to demonstrate features of the SVG format in either pure rendering, interactivity, animation, or integration with other open web technologies e.g HTML and CSS. Some of the demos are also meant to demonstrate advanced, upcoming features. License Unless othe
Coordinate Systems, Transformations and Units - SVG 1.1 - 20030114
7 座標系, 変換, 単位 目次 7.1 概要 7.2 初期ビューポート 7.3 初期座標系 7.4 座標系変換 7.5 入れ子にされた変換 7.6 transform 属性 7.7 viewBox 属性 7.8 preserveAspectRatio 属性 7.9 新しいビューポートの確立 7.10 単位 7.11 オブジェクトの包含矩形に対して相対的な単位 7.12 地理座標系 7.13 Viewport 属性モジュール 7.14 DOM インターフェース 7.1 Introduction 7.2 The initial viewport 7.3 The initial coordinate system 7.4 Coordinate system transformations 7.5
第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
日記 | ヨモツネット
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 混在でき
JavaScript で SVG を XHTML に動的に埋め込む : ynakajima の JavaScript 備忘録
2009年02月25日05:47 カテゴリ JavaScript で SVG を XHTML に動的に埋め込む 以前、別の blog に書いたものを転載。 ※Firefox 3 でのみ確認済み。 /* svg要素を作成 */ var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg:svg"); svg.setAttribute("width", "500"); svg.setAttribute("height", "120"); /* rect(四角形)要素を作成 */ var rect = document.createElementNS("http://www.w3.org/2000/svg", "svg:rect"); rect.setAttribute("x", "0"); rect.setAttr
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
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のプランニングにおいて、これからのトレンドはグラフィックスと判断し、グラフィックス機能の
SVG: スケーラブルベクターグラフィック | MDN
SVG: スケーラブルベクターグラフィック チュートリアル Introducing SVG from scratch 概要 始めましょう 配置 基本図形 パス 塗りつぶしとストローク SVG におけるグラデーション パターン テキスト 基本的な座標変換 クリッピングとマスク SVG におけるその他のコンテンツ フィルター効果 SVG フォント SVG の image 要素 SVG のツール SVG と CSS リファレンス 要素 <a><animate>animateMotion<animateTransform><circle><clipPath><cursor> 非推奨 <defs><desc><ellipse><feBlend><feColorMatrix><feComponentTransfer><feComposite><feConvolveMatrix><feDiffuseLi
Scalable Vector Graphics (SVG) 1.1 Specification
SVG 1.1 勧告 日本語版について： この文書は、W3Cが作成し、W3C勧告として公開された "Scalable Vector Graphics 1.1" を日本語に翻訳したものです。 この文書の原文はW3CのSVGサイトにある SVG 1.1 仕様書の 2003年 1月 14日 勧告（ http://www.w3.org/TR/2003/REC-SVG11-20030114/ ）であり、著作権は W3C にあります。 SVG 1.1 仕様書の正式な文書は英語版であり、この日本語版は正式なものではありません。 この翻訳には翻訳上の誤りがあるかもしれませんし、正確性は保証されません。 ただし、この翻訳の二次著作権は翻訳者「広瀬行夫」 （連絡先） が有します。この翻訳のこのページ自身は別サイトなどに存在する複製の可能性がありますが、この翻訳のオリジナルの URL は、冒頭に記した翻
SVG vs. Canvas? « HTML5.JP ブログ
先日の HTML5 3Days の Tech Talk で Canvas と SVG の違いを簡単に説明しましたが、これを深く追求してレポートされている方がいらっしゃいましたので紹介します。 2009 年 10 月にカルフォルニアで開催された SVG Open 2009 で、ヘルシンキ大学の Samuli Kaipiainen 氏と Matti Paksula 氏によるプレゼンテーション SVG vs. Canvas on Trivial Drawing Application で、SVG と Canvas の特性の違いや、それらを組み合わせる方法などが解説されています。このプレゼンテーションの内容は、こちらの資料に詳しく説明されています。 このプレゼンテーションを要約すると、次の通りです。 ピクセル描画では Canvas が優れている。SVG でもできないことはないが、ピクセルごとにノー
Opera News
Opera for iOS Introducing Opera One for iOS: a fresh take on mobile browsing August 14th, 2024 We're excited to announce the launch of Opera One for iOS, our redesigned, AI-powered browser for iPhone. Opera requests that the EU General Court secure the DMA’s promise of free browser choice... July 12th, 2024 Opera is appealing the EU Commission’s decision not to designate Microsoft Edge as a gateke
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVG Named Color Codes
[html5-developers-jp:868] 「canvas」と「svg」