Interview with Jon Ferraiolo | Adobe Developer Connection
Interview with Jon Ferraiolo: SVG past, present, and future Vincent interviewed Jon Ferraiolo after the "Graphical Web" conference. Jon is often called the father of SVG (Scalable Vector Graphics), a standard for creating interactive, animated two-dimensional vector graphics on the web. After spending 13 years at Adobe, Jon now works in IBM's Emerging Technologies group. In this interview, we lear
SVG のお勧めの資料 - Daniemon
SVG は新しい技術ではありませんが、最近けっこう注目されています。私もちょっと触ってみています。今のところは SVG のゲームと位置情報のサンプルだけですが、勉強するにはよく参考にする3つのホームページを見つけました。自分はまだ初心者レベルですが、ここで私にとっての最も役に立つ資料を紹介したら面白いかなと思いました。下記の資料は全部英語ですが、コードが多いなので文章を読まなくても勉強になるでしょう。 SVGBasics それぞれのページは短いですが、SVG の基本ならとても見やすいです。タグ名の綴りや属性の使い方を忘れた場合は役に立ちます。 carto:net 上記の SVGBasics ほど見やすくないですが、説明は細かく書いてあります。私がよく読む部分は Manipulating SVG Documents Using ECMAScript です。なぜなら Internet Expl
WebKitでのSVGを背景画像にすると起こるバグ
SVGはそのリサイズ(スケーリング)においてブラウザ間で差異やバグがあります。有名なのはviewBoxがないことによるIE9やWebKitでのバグでしょうか。それでもimg要素等でSVGを使う場合はSVG側でwidthとheightそしてviewBox属性を指定し、CSSなどでリサイズすれば大体問題ありません。なので背景画像で使う場合もbackground-sizeプロパティーを使えば……と思いきや、なかなかの落とし穴がありました。 Demo: SVG Arrow WebKit以外では自動リサイズが期待されるviewBoxのみ指定したSVGを背景画像にすると問題なくキレイにリサイズされます。対してWebKitではリサイズされたりされなかったりです。しかもChromeとSafariでは挙動が少し違ったりもし、追求する気が失せるほど挙動不審です。どうも良きに計らってはくれそうにないので、明示的
SVGを高速化させるためのルール - プラグインレスでSVGを表示する「SIE」開発ブログ
SVGを高速に表示させるためには SVGを速く、さくさくと表示させるには、いろんな方法があるのですが、ここで、まとめてみましょう。以下のルールに従えば、性能の向上ができると思います。 use要素とsymbol要素は必ず避けること use要素とsymbol要素は、Flashで使われる「シンボル化」と違って、内部でかなり複雑な変換をしています。 動的な変更があるたびに、この複雑な変換をしますので、描画処理の性能が落ちてしまいます。 重たくなりますので、必ず、この二つの要素は避けましょう。 アニメーションの期間は短く設定すること dur="5s"などの設定をよく見かけますが、これはとても遅く感じられます。setInterval(f, 200)も同様です。 目の「まばたき」が125ミリ秒ぐらいなのですから、下手をすれば、まばたきをしても絵が動かない、「もっさりとした」アニメーションができあがります
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よりも軽くつくれたりすることで使われていますが、 今回
The Planetarium
Mercury is the first planet from the Sun and is also the smallest and densest planet of the Solar System. Mercury has yet to be entirely mapped, making it the least known planet in our system. Venus is the second planet from the Sun and is often called Earth's sister due to its many similarities with the Blue Planet. However, a strong greenhouse effect gives Venus the hottest climate in the Solar
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 でもできないことはないが、ピクセルごとにノー
スタートアップ SVG 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
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
The Man in Blue > "HTML5" versus Flash: Animation Benchmarking
22 March 2010 76 comments I've written before about why you shouldn't let your current toolset dictate what it is you create and I still firmly hold to that mantra. Some of my more recent work has revolved heavily around animation (real-time, interactive motion graphics, to be precise). When approaching such a project I don't have any particular technology in mind, but I do have a very exacting id
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
TTF to EOT and SVG online converter — Martin Saulis
Watching the recent hype on the CSS @font-face declaration I decided to help myself out and write an application to automatically create all those EOT and SVG files from TTF ones. It's still a 2-hour-old pre alpha, the SVG files are not optimized, so they are huge in size -- so you are free to test it on your own risk. And please remember -- most fonts are copyrighted by their owners, and publishi
Opera News
AI Aria browser AI now available in Opera without sign-in September 26th, 2024 Opera is making it possible for you to use Aria AI without sign-in requirements. Opera for iOS Opera One for iOS wins the MUSE Design Award 2024 September 6th, 2024 We're thrilled to announce that Opera One for iOS has won the MUSE Design Award for 2024! AI Image Understanding arrives in Opera for Android September 3rd,
Using SVG For Flexible, Scalable, and Fun Backgrounds, Part I
SVG in the wild#section2 Several people use SVG for site design—mostly for topic icons. For instance, Sam Ruby, current HTML5 Working Group co-chair, uses SVG to annotate his weblog posts with topic icons. Erik Dahlstrom, from Opera, does the same, as does Jeff Schiller at Codedread. Jeff goes beyond icons, and incorporates SVG into his fisheye menu bar, as well as his website outliner graphic. Th
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm
Page Not Found | Inkscape
svgboilerplate.com – Czas na gotowanie SVG
Firefox 4 の HTML5 パーサ – インライン SVG、スピード、などなど « Mozilla Developer Street (modest)
HTML の内容への SVG 効果の適用 - MDC
