タグ

SVGに関するpaellaのブックマーク (6)

  • はいだしょうこ画伯の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" || $

    はいだしょうこ画伯の5年間の成長を、SVGでモーフィングにしてみた - jsdo.it - Share JavaScript, HTML5 and CSS
    paella
    paella 2011/05/17
    すごいセンス
  • 白黒シンプルがいい感じのベクター形式のソーシャルアイコンセット:phpspot開発日誌

    JustVector Social Icons 1.0 Alex Peattie, a web developer and designer. 白黒シンプルがいい感じのベクター形式のソーシャルアイコンセット。 次のようなアイコンが公開されています。 形式は、EPS、SVGAI、PNG形式で配布してるようです。 当然ながらPNGのものは32x32のラスター形式になっています。 evernoteamazon、facebook等のアイコンもありますね。 関連エントリ iPhoneAndroidアプリ等に使えるアイコンセット総まとめ:2010 jQuery UI のアイコンチートシート モダンなブラウザアイコンセット9

    paella
    paella 2011/03/25
    They are completely free, even for commercial use, redistribution or remixing
  • SVGでグラフを生成する·SVGGraph MOONGIFT

    SVGGraphはPHP製のオープンソース・ソフトウェア。HTML5が正式に決まり、メジャーなブラウザがHTML5対応を強めている。そんな中、ようやく日の目を見そうなのがSVGだ。技術的には昔からあるものの、対応ブラウザが限られることもあってあまり使われてこなかった。 棒グラフ、円グラフ SVGを使うと幸せなのが、クライアントサイドでレンダリングを行えるということだ。サーバサイドでは画像を生成する必要がなく、XMLベースでベクターデータを出力すれば良いだけだ。そしてSVGを使ったグラフライブラリがSVGGraphだ。 SVGGraphはPHPを使ってグラフを生成する。対応しているグラフは棒グラフ、円グラフ、折れ線グラフ、散布図となっている。棒、円グラフは3D表示にすることも可能だ。画像とは異なり、リンクを埋め込むことができたり、値のツールチップを入れることもできる。 折れ線グラフおよび散布

    paella
    paella 2010/12/30
    iPhone/iPadにも対応しているとのこと。
  • JavaScriptで3D - os0x.blog

    id:wanparkさんが(3年前に)書かれたchannel3というFlash用3DグラフィックライブラリをJavaScriptにポーティングしてみました。IEは未対応です(たぶんそのうち)。 channel3JS - ss-o.net この前のCanvasでDot3Dが結構余裕だったので、もうちょっと格的な(だけどライブラリとして大きすぎないような)のをポートしたくなったところにchannel3のことを思い出して、突貫でやってみました(コメントアウトいっぱいでソースは綺麗じゃないです)。 SVGとCanvas両対応です。なぜかというとパフォーマンスを比べたかった(SVGのほうが良い)のと、テクスチャやるにはCanvasが必要になりそうだから。 実はSVGほぼ初めて触ったんですが、面白いので後でまとめようと思います。 ソースは os0x / channel3JS / source — B

    JavaScriptで3D - os0x.blog
    paella
    paella 2010/06/08
    ファンがブンブン鳴り出すね。
  • サイズやカラーが豊富に揃った、シンプルな無料のアイコン -Iconic

    さまざまなサイトに利用できるよう、アイコンのサイズやカラーが豊富に揃った無料のアイコンをSome Random Dudeから紹介します。 Iconic Icon Set – 84 icons in raster and vector format アイコンは全部で84種類あり、PNGとSVGフォーマットでダウンロードできます。 PNGのサイズは8x8, 12x12, 16x16, 24x24, 32x32が用意されており、他のサイズが必要な場合はSVGから適宜サイズを変更することができます。 また、カラーもあらかじめ13色が用意されています。

    paella
    paella 2010/01/07
    ライセンスはCC3.0。個人でも商用でも利用可能
  • SVGを使ったものすごいグラフライブラリ·dygraphs JavaScript Visualization Library MOONGIFT

    dygraphs JavaScript Visualization LibraryはJavaScript製のオープンソース・ソフトウェア。グラフライブラリは多数あれど、大抵は円グラフや棒グラフなどのシンプルなグラフを描く機能しかない。高度なグラフを描こうとすると利用できるライブラリは途端に少なくなる。 高機能なグラフライブラリ また高度なグラフはクライアントサイドだけでなく、サーバサイドの仕組みが必要になることも多い。そんな中dygraphs JavaScript Visualization Libraryはとても簡単に使えるグラフライブラリになっている。JavaScriptSVGを描いてグラフ化するのだ。 主なグラフはX-Y軸を持った折れ線グラフになるようだ。とはいえ測定範囲を含んだグラフを描いたり、グラフの一部をマウスを使って拡大する、マウスオーバーすると値が表示されるなど高度な機能

    SVGを使ったものすごいグラフライブラリ·dygraphs JavaScript Visualization Library MOONGIFT
  • 1