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入門（SVGについて詳しく解説します
SVGとはScaleable Vector Graphicの略で２次元グラフィックをXML形式で記述するための規格です。このサイトではSVGについて入門レベルの知識から詳細なテクニックまでをご説明していく予定です。 SVGの特徴としては次のような点があげられます。 XML形式の文書でグラフィックを表現できるため、エディタとブラウザさえあれば開発できる ベクター画像なので拡大・縮小が容易である 画像の変更をXML文書の変更として行えるため、ラスター画像の変更よりも容易な場合がある XML形式なのでSVG文書をパース、生成するプログラムが書きやすい（DOM APIを利用できるため独自のパーサーやジェネレータを作る必要がない） 一方でSVGが抱える問題は、ブラウザに標準機能として搭載されるか、あるいはすべてのブラウザで利用できるプラグインが提供されるかどうかということです。ともかくブラウザで
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 は、冒頭に記した翻
Animation - SVG 1.1 - 20030114
19 アニメーション 目次 19.1 概要 19.2 アニメーション要素 19.2.1 概観 19.2.2 SMILアニメーションとの関係 19.2.3 アニメーション要素の例 19.2.4 アニメーションの対象となる要素を特定する属性 19.2.5 アニメーションの対象となる属性またはプロパティを特定する属性 19.2.6 アニメーションのタイミングを制御する属性 19.2.7 時経過に伴うアニメーション値を定義する属性 19.2.8 アニメーションが加法的かどうかを制御する属性 19.2.9 継承 19.2.10 'animate' 要素 19.2.11 'set' 要素 19.2.12 'animateMotion' 要素 19.2.13 'animateColor' 要
デベロッパーズコーナー：実践！SVG（2） - XML Square
１．イントロダクション 本連載第１回ではSVGの基本的な書き方を解説しました。第２回では、他の規格と一緒にSVGを活用する方法を紹介します。SMIL Animationを使ってグラフィックを動かしたり、数字データとして格納されたXMLデータを、XSLTによってSVGのグラフィック表示に変換することができます。 2. SMIL Animationと連携してグラフィックに動きを加えるでは、Adobe社の「SVG Viewer」をIEにプラグインして使います。Adobe社のダウンロードサイトからダウンロードしてください。指定されたインストール手順に従うと、IEにプラグインされます。 また、3. XSLTによりXMLからSVGに変換するでは、「msxsl.exe」を使用します。まず最初にMicrosoft社のMSDN Libraryからダウンロード（無償）しておきましょう。 ２．グラフィックに動き
むしゃくしゃしてやった - まずまずのダム日和
ぼーっとしてると、日曜日のこと思い出してうわーってなるので、余計なことを考えないようにプログラムの勉強してた。 http://jp.rubyist.net/magazine/?0019-cairoを参考にして（というか、ほとんどそのままだ）rcairo使ってrubyで白地図を描画するプログラム作ってみました。こういうことするとデータの力ってすごいなぁ、って思う。 ftpでファイルアップするのめんどいから、スーパーpre記法で掲載。 require 'cairo' #海岸線データ # # http://rimmer.ngdc.noaa.gov/coast/から # Coastline database:WVS and All Political Boundaries # Coast Format options:Mapgen # で取得 COAST_DATA_FILENAME = "coas
SVG学習辞典
SVG(スケーラブルベクターグラフィックス)言語を学習しやすい辞典。ブラウザ対応別に並べてある。 お知らせ 2007/02/20 辞典の優先度の基準をブラウザ（とプラグイン）の対応別に変えた。 過去の履歴はこちら 目次 1，この辞典を読む前に 「要素」と「属性」という言葉については、SVGの基礎知識をご覧下さい。 「SVG学習辞典」は、SVG言語を学習するために作られた辞典。ブラウザ対応別に分けて、要素を解説する。上から順に読むと、学びやすいだろう。 辞典をひとまとめにダウンロードしたい>>ZIP形式の圧縮版（svg20050121.zip) この辞典はW3Cの勧告仕様「SVG1.1」と「SVG1.0」に従う。SVG1.1の邦訳板（http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/index.html）を主に参考にしている。 2，索引 初心者は
Ruby bindings
Ruby bindings for cairo are available at GitHub since 2010/08/21. Install: RubyGems For RubyGems users. % sudo gem install cairo For Windows user: % gem install cairo --platform x86-mingw32 Install: tar.gz For non-RubyGems users. The latest version is rcairo-1.10.0 % wget http://cairographics.org/releases/rcairo-X.X.X.tar.gz % tar xvzf rcairo-X.X.X.tar.gz % cd rcairo-X.X.X % ruby extconf.rb % make
RubyTreemap
About RubyTreemap is a library for generating treemaps in ruby. RubyTreemap provides an interface for creating treemaps and rendering them in multiple formats such as png, svg, and html. Treemaps are an effective tool for visualizing data sets and are commonly used to display hierarchical data. Treemaps were first designed by Ben Shneiderman at the University of Maryland. For more information and
オープンソースの SVG ドローツール、Inkscape を試す - WebOS Goodies
今日は、オープンソースのドローツール、「Inkscape」をご紹介しようと思います。SVG をネイティブフォーマットとして採用したドローツールなのですが、ほんとうに SVG で実現できているのかと目を疑うほどの多彩な表現が可能です。日本語も問題なく通りますし、マルチプラットフォーム対応なので Windows だけでなく Linux, Mac OS X でも動作します。これがあれば Illustrator はいらない、なんてのはさすがに言い過ぎでしょうが、少なくとも個人用途ならじゅうぶん過ぎる機能があります。そしてなによりも、使っていて楽しいと感じられるソフトに仕上がっています。 今回もいくつかサンプル画像を交えてご紹介していますので、ぜひ読んでみてください。 インストール ではまずインストール方法からいきましょう。ここでは Windows 版を前提にしますが、他にも Linux, Mac
プラグインレスでSVGを表示する「SIE」開発ブログ
データの移行が完了 日時のバグなどがありましたが、それを修正して、インポートが完了しましたので、ここでお知らせします。 今後は、引き続き、下記のgoo ブログでSIEの開発日誌を書いていきます。どうぞ、よろしくお願いします。 プラグインレスのSVGアニメーションライブラリ「SIE」開発ブログ https://blog.goo.ne.jp/dhrnamesie 今後の予定 gooブログを使いながら、開発を続けていきます ブログの検討 前回の記事 ( http://d.hatena.ne.jp/dhrname/20180909/p1 )で、引っ越し先となるようなブログを検討してみましたが、goo ブログを一つの候補として考えています goo ブログの実験 使いやすいかどうかのテストをするため、goo ブログで以下のようなSIE 開発日誌を立ち上げました。 プラグインレスのSMIL・SVGアニメ
IEでSVGを表示（プラグインなし）·SIE MOONGIFT
これは面白い。SVGはベクターグラフィックス言語として有力なのだが、プラグインが必要とあっていまいち流行らない。特に問題なのはブラウザでもっとシェアがあるIEで標準サポートされていないことだろう。 そこで、プラグインなしでもSVGが表示できるこちらのライブラリを紹介しよう。 今回紹介するオープンソース・ソフトウェアはSIE、プラグインなしでSVGを表示するJavaScriptライブラリだ。 全てのSVGに対応する訳ではないようだが、それでも表示できるものがあるのが素晴らしい。SIEを使えば、サイト上で存分にSVGの魅力を表現できそうだ。 標準のままでは表示不可 使い方は簡単で、SIEを読み込み、「<object data="Svg.svg" type="image/svg+xml" width="180" height="200"></object>」といった具合にimage/svg+xm
ruby で svg を作成(その1) - pyopyopyo - Linuxとかプログラミングの覚え書き -
初めての ruby-svg http://ruby-svg.sourceforge.jp/ をつかって，ruby で svg を吐き出すスクリプトを作ったので，メモ． とりあえずこんな感じ． require 'svg/svg'; svg = SVG.new('4in 4in', '0 0 640 480') st = SVG::Style.new() {self.style.stroke = '#ff0000' } svg << SVG::Rect.new(x,y,width,height) { self.Style = st } svg << SVG::Line.new(x0,y0,x1,y1) { self.Style = st } svg << SVG::Text.new(x,y,string) { self.Style = st } svg.to_s SVG.new()の引数は，s
ruby cairo で svg を生成してみた - katoy: cocolog
http://jp.rubyist.net/magazine/?0019-cairo るびま 19号の cairo: 2 次元画像描画ライブラリ の記事中の最初のサンプルは png を出力するものだが、これを svg 出力に変更してみた。 ---------- cat hinomaru-svg.rb # See http://jp.rubyist.net/magazine/?0019-cairo require "rubygems" require 'cairo' width = 300 height = 200 radius = height / 3 surface = Cairo::SVGSurface.new('hinomaru.svg', width, height) context = Cairo::Context.new(surface) # context.set_sourc
Home Documentation RubyForge Project Don’t Worry. Be Scruffy. Beautiful Graphs for Ruby. What is Scruffy? Scruffy is a Ruby library for generating attractive and powerful graphs, useful for web applications, print media and many others. Scruffy’s key features include: Built on SVG Scruffy uses SVG internally for rendering graphs. This allows Scruffy to render your graph identically at almost any
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
XRVG
RubyForge: SVuGy - Ruby DSL for SVG: Project Info
RubySVG :: Make Art with Code
SVuGy - Creating SVG with Ruby
ruport で svg グラフを生成 - katoy: cocolog